[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-how-to-start-vibe-coding-with-ai-en":3,"article-related-how-to-start-vibe-coding-with-ai-en":30,"series-tools-df69beef-d6a6-40d1-9284-474eebad74b7":81},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":22,"views":26,"created_at":27,"published_at":28,"topic_cluster_id":29},"df69beef-d6a6-40d1-9284-474eebad74b7","how-to-start-vibe-coding-with-ai-en","How to Start Vibe Coding with AI","\u003Cp data-speakable=\"summary\">This guide shows non-coders how to use \u003Ca href=\"\u002Ftag\u002Fai-coding-tools\">AI coding tools\u003C\u002Fa> to build small, useful apps.\u003C\u002Fp>\u003Cp>If you are a non-coder, a product person, or a curious developer helping teammates get started, this guide will show you how to go from a simple daily problem to a working micro-app. By the end, you will have a clear workflow for picking a problem, prompting an \u003Ca href=\"\u002Ftag\u002Fai-coding\">AI coding\u003C\u002Fa> tool, testing the result, and shipping something useful.\u003C\u002Fp>\u003Cp>The approach is based on the \u003Ca href=\"\u002Ftag\u002Fvibe-coding\">vibe coding\u003C\u002Fa> tools and patterns discussed in the article, plus the practical docs for \u003Ca href=\"https:\u002F\u002Fdocs.anthropic.com\u002F\" target=\"_blank\" rel=\"noreferrer\">Anthropic Docs\u003C\u002Fa> and the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-code\" target=\"_blank\" rel=\"noreferrer\">Claude Code GitHub repo\u003C\u002Fa>. The same workflow also maps well to other code assistants such as \u003Ca href=\"\u002Ftag\u002Fgemini\">Gemini\u003C\u002Fa> and GPT-based coding tools.\u003C\u002Fp>\u003Ch2>Before you start\u003C\u002Fh2>\u003Cul>\u003Cli>An Anthropic account or another AI coding account with code-generation access\u003C\u002Fli>\u003Cli>An API key if your tool requires one\u003C\u002Fli>\u003Cli>Node.js 20+ installed\u003C\u002Fli>\u003Cli>Git 2.40+ installed\u003C\u002Fli>\u003Cli>A code editor such as VS Code 1.90+\u003C\u002Fli>\u003Cli>A small problem you can describe in one sentence\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Step 1: Pick one tiny problem\u003C\u002Fh2>\u003Cp>Your goal is to choose a problem that is narrow enough for a first build. Good examples are a grocery sorter, a wedding seating helper, a school pickup tracker, or a workout log. The point is to define a micro-app, not a startup.\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780773471455-gav1.png\" alt=\"How to Start Vibe Coding with AI\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cpre>\u003Ccode>Problem: Compare two grocery stores' weekly deals so I can pick the cheaper route.\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>You should see a one-line problem statement that names the user, the task, and the outcome. If you can explain it without extra context, the scope is small enough to build.\u003C\u002Fp>\u003Ch2>Step 2: Set up the project folder\u003C\u002Fh2>\u003Cp>Your goal is to create a clean workspace where the AI can write code and you can review it. Start with a fresh directory, initialize Git, and create the app shell your tool prefers.\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780773470490-2lw6.png\" alt=\"How to Start Vibe Coding with AI\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cpre>\u003Ccode>mkdir vibe-app\ncd vibe-app\ngit init\nnpm init -y\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>You should see a new repository with a package.json file and a Git history ready for checkpoints. If you run \u003Ccode>git status\u003C\u002Fcode>, you should see only the files you created.\u003C\u002Fp>\u003Ch2>Step 3: Prompt the AI for a first version\u003C\u002Fh2>\u003Cp>Your goal is to ask for a working first draft, not a perfect app. Tell the model what the app should do, what inputs it accepts, and what output it should produce. Ask it to keep the code simple and to explain any assumptions.\u003C\u002Fp>\u003Cpre>\u003Ccode>Create a small web app that lets me enter two store names and two weekly deal URLs, then compares the items and highlights the cheaper basket. Use plain JavaScript and a simple HTML UI.\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>You should see generated files, a basic interface, and code that runs without major edits. If the assistant gives you a plan instead of code, ask it to implement the first screen and one core function only.\u003C\u002Fp>\u003Ch2>Step 4: Run the app and fix the first bug\u003C\u002Fh2>\u003Cp>Your goal is to execute the code, find the first failure, and let the AI help you repair it. This is the key vibe coding loop: run, inspect, adjust, repeat. Keep the feedback specific so the model can debug the exact issue.\u003C\u002Fp>\u003Cpre>\u003Ccode>npm install\nnpm run dev\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>You should see the app load in a browser or a local preview. If it crashes, paste the error message back into the tool and ask for one targeted fix. A successful result is a page that loads and responds to your test input.\u003C\u002Fp>\u003Ch2>Step 5: Test with real data\u003C\u002Fh2>\u003Cp>Your goal is to prove the app works on the kind of input you actually care about. Use a real grocery circular, a real seating rule set, or a real schedule list. This is where the app becomes useful instead of merely impressive.\u003C\u002Fp>\u003Cpre>\u003Ccode>Test case:\n- Store A: apples, milk, rice\n- Store B: apples, milk, rice\n- Expected: show which basket costs less\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>You should see the output match your expectation or reveal a clear gap. If the app fails on real data, revise the prompt, add validation, or simplify the input format until the result is stable.\u003C\u002Fp>\u003Ch2>Step 6: Save, share, and iterate\u003C\u002Fh2>\u003Cp>Your goal is to preserve the working version and make it easy to improve later. Commit the code, write a short README, and note the next feature you want. That gives you a repeatable path from \u003Ca href=\"\u002Fnews\u002Flinux-kernel-hobby-project-core-infrastructure-en\">hobby project\u003C\u002Fa> to useful tool.\u003C\u002Fp>\u003Cpre>\u003Ccode>git add .\ngit commit -m \"Build first version of micro-app\"\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>You should see a clean commit and a short description of what the app does. If someone else can clone the repo, install dependencies, and run the app, you have a shareable result.\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Metric\u003C\u002Fth>\u003Cth>Before\u002FBaseline\u003C\u002Fth>\u003Cth>After\u002FResult\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Build outcome\u003C\u002Ftd>\u003Ctd>Manual task or no app\u003C\u002Ftd>\u003Ctd>Working micro-app for one daily problem\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Iteration loop\u003C\u002Ftd>\u003Ctd>Ad hoc idea with no workflow\u003C\u002Ftd>\u003Ctd>Prompt, run, debug, repeat\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Skill gain\u003C\u002Ftd>\u003Ctd>Little or no coding experience\u003C\u002Ftd>\u003Ctd>Basic understanding of files, errors, and prompts\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2>Common mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Trying to build a full product on day one. Fix: cut the scope to one user and one task.\u003C\u002Fli>\u003Cli>Giving vague prompts like \"make it better.\" Fix: name the exact input, output, and edge case.\u003C\u002Fli>\u003Cli>Skipping real testing. Fix: use the actual spreadsheet, PDF, or form data you plan to rely on.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>What's next\u003C\u002Fh2>\u003Cp>Once your first micro-app works, try adding one deeper capability such as file upload, data parsing, or a simple database, then compare how the AI handles each new layer. That is where vibe coding starts to move from a fun experiment to a practical workflow.\u003C\u002Fp>","A practical guide to using AI coding tools for small, everyday apps.","www.businessinsider.com","https:\u002F\u002Fwww.businessinsider.com\u002Fvibe-coding-normies-embrace-ai-solve-daily-problems-save-money-2026-5",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780773471455-gav1.png","tools","en","2c75f00f-eb01-418f-a793-45c1522f226e",[17,18,19,20,21],"vibe coding","AI coding tools","micro-apps","prompt engineering","debugging",[23,24,25],"Start with one small, concrete problem that a micro-app can solve.","Use a tight prompt, then run and debug the code in short loops.","Save a working version early so you can iterate without losing progress.",0,"2026-06-06T19:17:22.823911+00:00","2026-06-06T19:17:22.814+00:00","f8b38c0e-e87c-4fe2-89b6-05bf73c2aaf6",{"tags":31,"relatedLang":40,"relatedPosts":44},[32,33,35,37,39],{"name":21,"slug":21},{"name":20,"slug":34},"prompt-engineering",{"name":17,"slug":36},"vibe-coding",{"name":18,"slug":38},"ai-coding-tools",{"name":19,"slug":19},{"id":15,"slug":41,"title":42,"language":43},"how-to-start-vibe-coding-with-ai-zh","怎麼開始 AI Vibe Coding","zh",[45,51,57,63,69,75],{"id":46,"slug":47,"title":48,"cover_image":49,"image_url":49,"created_at":50,"category":13},"4065ada8-125b-4286-85c5-85cfe7d6369a","llm-leaderboard-2026-300-models-ranked-en","LLM Leaderboard 2026: 300+ Models Ranked","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780776189065-qk79.png","2026-06-06T20:02:37.334702+00:00",{"id":52,"slug":53,"title":54,"cover_image":55,"image_url":55,"created_at":56,"category":13},"92a22a3d-6d0c-4884-9865-c1fe0f2e5e78","llama-benchy-llama-bench-style-api-benchmarks-en","llama-benchy brings llama-bench tests to APIs","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780775297695-nchl.png","2026-06-06T19:47:54.675055+00:00",{"id":58,"slug":59,"title":60,"cover_image":61,"image_url":61,"created_at":62,"category":13},"bece181a-96c8-494b-ac0b-fb254413e051","nvidia-ai-models-playbook-en","NVIDIA AI Models turn model hunting into a playbook","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780771718084-8xiy.png","2026-06-06T18:48:07.10885+00:00",{"id":64,"slug":65,"title":66,"cover_image":67,"image_url":67,"created_at":68,"category":13},"40bf1841-77d9-4bf6-9764-3e956510d41a","kimi-k25-claude-code-cline-roocode-setup-en","Kimi K2.5 works in Claude Code and Cline","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780769031200-z2kv.png","2026-06-06T18:03:19.685945+00:00",{"id":70,"slug":71,"title":72,"cover_image":73,"image_url":73,"created_at":74,"category":13},"258a698f-2ab5-47bf-9b3b-ec8a8e14b8be","why-small-businesses-should-use-ai-for-admin-en","Why small businesses should use AI for admin, not everything","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780758184970-z888.png","2026-06-06T15:02:18.347592+00:00",{"id":76,"slug":77,"title":78,"cover_image":79,"image_url":79,"created_at":80,"category":13},"7da5424f-1ff8-483a-80ed-7091c5b0454b","crun-ai-gemini-omni-chat-video-editing-en","Crun AI turns Gemini Omni into chat video editing","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780733910991-ji5m.png","2026-06-06T08:18:00.680201+00:00",[82,87,92,97,102,107,112,117,122,127],{"id":83,"slug":84,"title":85,"created_at":86},"8008f1a9-7a00-4bad-88c9-3eedc9c6b4b1","surepath-ai-mcp-policy-controls-en","SurePath AI's New MCP Policy Controls Enhance AI Security","2026-03-26T01:26:52.222015+00:00",{"id":88,"slug":89,"title":90,"created_at":91},"27e39a8f-b65d-4f7b-a875-859e2b210156","mcp-standard-ai-tools-2026-en","MCP Standard in 2026: Integrating AI Tools","2026-03-26T01:27:43.127519+00:00",{"id":93,"slug":94,"title":95,"created_at":96},"165f9a19-c92d-46ba-b3f0-7125f662921d","rag-2026-transforming-enterprise-ai-en","How RAG in 2026 is Transforming Enterprise AI","2026-03-26T01:28:11.485236+00:00",{"id":98,"slug":99,"title":100,"created_at":101},"6a2a8e6e-b956-49d8-be12-cc47bdc132b2","mastering-ai-prompts-2026-guide-en","Mastering AI Prompts: A 2026 Guide for Developers","2026-03-26T01:29:07.835148+00:00",{"id":103,"slug":104,"title":105,"created_at":106},"3ab2c67e-4664-4c67-a013-687a2f605814","garry-tan-open-sources-claude-code-toolkit-en","Garry Tan Open-Sources a Claude Code Toolkit","2026-03-26T08:26:20.245934+00:00",{"id":108,"slug":109,"title":110,"created_at":111},"66a7cbf8-7e76-41d4-9bbf-eaca9761bf69","github-ai-projects-to-watch-in-2026-en","20 GitHub AI Projects to Watch in 2026","2026-03-26T08:28:09.752027+00:00",{"id":113,"slug":114,"title":115,"created_at":116},"9f332fda-eace-448a-a292-2283951eee71","practical-github-guide-learning-ml-2026-en","A Practical GitHub Guide to Learning ML in 2026","2026-03-27T01:16:50.125678+00:00",{"id":118,"slug":119,"title":120,"created_at":121},"1b1f637d-0f4d-42bd-974b-07b53829144d","aiml-2026-student-ai-ml-lab-repo-review-en","AIML-2026 Is a Bare-Bones Student Lab Repo","2026-03-27T01:21:51.661231+00:00",{"id":123,"slug":124,"title":125,"created_at":126},"6d1bf3f6-e191-4d30-b55b-8a0722fa6afe","ai-trending-github-repos-and-research-feeds-en","AI Trending Tracks Repos and Research Feeds","2026-03-27T01:31:35.709532+00:00",{"id":128,"slug":129,"title":130,"created_at":131},"010539a1-4c3a-4bd3-937a-26616422ee0d","awesome-ai-for-science-research-tools-map-en","Awesome AI for Science Is Becoming a Real Research Map","2026-03-27T01:46:50.89513+00:00"]