--- title: How I Use ChatGPT as a Frontend Developer (5 Ways) description: A frontend developer shares five ways to use ChatGPT for optimizing workflow, including formatting JSON, creating UI skeletons, generating random data, working... canonical: https://daily.dev/posts/how-i-use-chatgpt-as-a-frontend-developer-5-ways--hdlqis7sa twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How I Use ChatGPT as a Frontend Developer (5 Ways) | daily.dev og:description: A frontend developer shares five ways to use ChatGPT for optimizing workflow, including formatting JSON, creating UI skeletons, generating random data, working... og:url: https://daily.dev/posts/how-i-use-chatgpt-as-a-frontend-developer-5-ways--hdlqis7sa og:image: https://api.daily.dev/og/posts/hDLQIs7Sa.png og:image:alt: How I Use ChatGPT as a Frontend Developer (5 Ways) og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How I Use ChatGPT as a Frontend Developer (5 Ways) **[Community Picks](https://daily.dev/sources/community)** · 5 min read · 1542 upvotes · 56 comments ## Summary A frontend developer shares five ways to use ChatGPT for optimizing workflow, including formatting JSON, creating UI skeletons, generating random data, working with regular expressions, and finding code solutions. By leveraging ChatGPT, tasks such as creating Material UI skeletons or finding regex solutions become more efficient, saving time and enhancing productivity. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@vibraniumstapler** · 36 upvotes > He could use VSCode to format his JSON instead of sending it to ChatGPT. Otherwise not a bad article. **@chandrajeetmaurya** · 27 upvotes > Creating ui skeleton from screenshot is something I never thought of 😍 . Will definitely use that. **@pm96** · 10 upvotes > id argue its quicker to do xyz.json | jq . in the terminal than to go to ChatGPT and ask it to format json, but that is dependant on how much you use the terminal. Any linter worth its weight would also have the ability to do so **@jkinami** · 2 upvotes > This is great! I am beginner coder and front-end is not my forte. 😅 This will help speed up my personal projects! **@tarik4** · 2 upvotes > I enjoyed the article, but I find myself questioning the usefulness of chatGPT and friends. Especially for frameworks like React Angular and Svelte asking them anything usually leads them to do it using older versions of the framework.On the one hand if you're a beginner it helps by giving you an idea but I find that it's easy to rely on it and go down a rabbit hole. > > Ultimately I find AI tools can quickly lead to a lot of frustration,the only AI that actually blew my mind is ClaudeAI which I use sparingly but it seems to help the most ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#chatgpt](https://daily.dev/tags/chatgpt), [#nextjs](https://daily.dev/tags/nextjs) [View this post on daily.dev](https://daily.dev/posts/how-i-use-chatgpt-as-a-frontend-developer-5-ways--hdlqis7sa) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How I Use ChatGPT as a Frontend Developer (5 Ways)","url":"https://daily.dev/posts/how-i-use-chatgpt-as-a-frontend-developer-5-ways--hdlqis7sa","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-i-use-chatgpt-as-a-frontend-developer-5-ways--hdlqis7sa"},"datePublished":"2024-08-05T08:19:55.586Z","dateModified":"2024-10-05T16:12:16.471Z","description":"A frontend developer shares five ways to use ChatGPT for optimizing workflow, including formatting JSON, creating UI skeletons, generating random data, working...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/bd358af14e26ac5f75f29c0e514d04c0?_a=AQAEuiZ","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/bd358af14e26ac5f75f29c0e514d04c0?_a=AQAEuiZ","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":56,"discussionUrl":"https://daily.dev/posts/how-i-use-chatgpt-as-a-frontend-developer-5-ways--hdlqis7sa","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1542},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":56}],"keywords":"react,chatgpt,nextjs","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"How I Use ChatGPT as a Frontend Developer (5 Ways)"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/how-i-use-chatgpt-as-a-frontend-developer-5-ways--hdlqis7sa","comment":[{"@type":"Comment","text":"He could use VSCode to format his JSON instead of sending it to ChatGPT. Otherwise not a bad article.","datePublished":"2024-08-05T16:14:04.136Z","url":"https://daily.dev/posts/hDLQIs7Sa#c-60tD5SIcV","author":{"@type":"Person","name":"Stan Pler","url":"https://daily.dev/vibraniumstapler","image":"https://lh3.googleusercontent.com/a/ACg8ocJBeCiMPKpy9X3YxF9kLZwrQmngdvdqtxxi4ad5pve8dhENsA=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":36}},{"@type":"Comment","text":"Creating ui skeleton from screenshot is something I never thought of 😍 . Will definitely use that.","datePublished":"2024-08-06T05:25:17.479Z","url":"https://daily.dev/posts/hDLQIs7Sa#c-25Zcr2TZv","author":{"@type":"Person","name":"Chandrajeet Maurya","url":"https://daily.dev/chandrajeetmaurya","image":"https://lh3.googleusercontent.com/a/ACg8ocInWGPzXkQ2FVvweJ7oJwqzE9vPWCEAlG-Dai6t9MNMZ8Ne=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":27}},{"@type":"Comment","text":"id argue its quicker to do xyz.json | jq . in the terminal than to go to ChatGPT and ask it to format json, but that is dependant on how much you use the terminal. Any linter worth its weight would also have the ability to do so","datePublished":"2024-08-07T07:17:40.877Z","url":"https://daily.dev/posts/hDLQIs7Sa#c-TmgQb5rQ3","author":{"@type":"Person","name":"Pm","url":"https://daily.dev/pm96","image":"https://avatars.githubusercontent.com/u/15211681?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":10}},{"@type":"Comment","text":"This is great! I am beginner coder and front-end is not my forte. 😅 This will help speed up my personal projects!","datePublished":"2024-08-23T22:20:46.056Z","url":"https://daily.dev/posts/hDLQIs7Sa#c-dAmVyORrD","author":{"@type":"Person","name":"Junichi Kinami","url":"https://daily.dev/jkinami","image":"https://media.daily.dev/image/upload/s--pw-GzKap--/f_auto/v1716966278/avatars/avatar_e0XEM28tZ2BvhbAvvvEZx"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"I enjoyed the article, but I find myself questioning the usefulness of chatGPT and friends. Especially for frameworks like React Angular and Svelte asking them anything usually leads them to do it using older versions of the framework.On the one hand if you’re a beginner it helps by giving you an idea but I find that it’s easy to rely on it and go down a rabbit hole.\nUltimately I find AI tools can quickly lead to a lot of frustration,the only AI that actually blew my mind is ClaudeAI which I use sparingly but it seems to help the most","datePublished":"2024-09-06T05:34:06.962Z","url":"https://daily.dev/posts/hDLQIs7Sa#c-jj2RFRLHX","author":{"@type":"Person","name":"tarik","url":"https://daily.dev/tarik4","image":"https://lh3.googleusercontent.com/a/ACg8ocKytKD_Nyva04kTbNdZgWxJ61CDq_AFXn7FcLVLIwkzf9TZjsg=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}]} ```