{"id":10087,"date":"2025-05-16T21:08:29","date_gmt":"2025-05-16T13:08:29","guid":{"rendered":"https:\/\/ai-stack.ai\/?p=10087"},"modified":"2025-05-16T21:14:31","modified_gmt":"2025-05-16T13:14:31","slug":"vibecoding2025","status":"publish","type":"post","link":"https:\/\/ai-stack.orca-biz.tw\/en\/vibecoding2025","title":{"rendered":"The 2025 Definitive Guide to Vibe Coding"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>From Drag-and-Drop to \u201cDescribe-and-Run\u201d<\/strong><\/h3>\n\n\n\n<p>You may have built a site with <strong>Lovable<\/strong> or asked ChatGPT to tweak some HTML.<br>This guide takes you the whole way\u2014up to <strong>Cursor<\/strong> and <strong>Windsurf<\/strong>, the IDEs built for Vibe Coding\u2014and explains where tools like Claude or Gemini fit in.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1 | What <\/strong><strong><em>is<\/em><\/strong><strong> Vibe Coding?<\/strong><\/h2>\n\n\n\n<p><strong>Definition<\/strong><strong><br><\/strong> <em>Vibe Coding<\/em> (often written <em>vibecoding<\/em>) is a workflow where natural-language prompts drive a large-language model (LLM) to generate and iterate on <strong>all<\/strong> the source code. The human shifts from \u201cwriter\u201d to \u201cdirector\u201d: describe what you want, run it, test, then refine. The term comes from AI researcher <strong>Andrej Karpathy<\/strong>, who posted on X in February 2025:<\/p>\n\n\n\n<p>\u201cThere\u2019s a new kind of coding I call <strong>vibe coding<\/strong>\u2026\u201d<a href=\"https:\/\/x.com\/karpathy\/status\/1886192184808149383?utm_source=chatgpt.com\"> X (formerly Twitter)<\/a><\/p>\n\n\n\n<p>It builds on his earlier quip that \u201cthe hottest new programming language is English.\u201d<\/p>\n\n\n\n<p><strong>Why it matters<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No-\/Low-code killed a lot of manual boilerplate by letting you <strong>drag components<\/strong>.<br><\/li>\n\n\n\n<li>Vibe Coding kills even the drag-and-drop step\u2014you simply <strong>talk<\/strong>.<br>IBM describes it as moving \u201cdirectly from intent to executable code.\u201d<br><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2 | Why the Explosion in 2025?<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Milestone<\/strong><\/td><td><strong>What happened<\/strong><\/td><\/tr><tr><td><strong>Feb 2025<\/strong><\/td><td>Karpathy coins the term; tech media amplifies it.<\/td><\/tr><tr><td><strong>May 2025<\/strong><\/td><td><strong>OpenAI agrees to buy <em>Windsurf<\/em> (formerly Codeium) for \u2248 US $3 billion<\/strong>, its biggest acquisition ever.<a href=\"https:\/\/www.bloomberg.com\/news\/articles\/2025-05-06\/openai-reaches-agreement-to-buy-startup-windsurf-for-3-billion?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\"> <\/a><a href=\"https:\/\/www.reuters.com\/business\/openai-agrees-buy-windsurf-about-3-billion-bloomberg-news-reports-2025-05-06\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\">Reuters<\/a><\/td><\/tr><tr><td><strong>Spring 2025<\/strong><\/td><td>TikTok fills with \u201cBuild an app in 30 minutes\u201d demos; AWS cites major banks adopting generative coding.<\/td><\/tr><tr><td><strong>April\u2013May 2025<\/strong><\/td><td><strong>National Australia Bank<\/strong> reports it accepts <strong>\u2248 50 %<\/strong> of Amazon Q\u2019s AI code suggestions in production.<a href=\"https:\/\/docs.aws.amazon.com\/prescriptive-guidance\/latest\/strategy-transform-adm-operating-model-gen-ai\/introduction.html?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\"> AWS <\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Signal = Big-tech money + mature tooling + viral social proof\u2014arriving all at once.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3 | Anatomy of the Workflow<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Stage<\/strong><\/td><td><strong>Your role<\/strong><\/td><td><strong>The AI\u2019s role<\/strong><\/td><td><strong>Pro tips<\/strong><\/td><\/tr><tr><td><strong>Prompt<\/strong><\/td><td>Describe feature, constraints, style<\/td><td>Parse intent \u2192 plan code<\/td><td>Break big asks into smaller prompts<\/td><\/tr><tr><td><strong>Generate<\/strong><\/td><td>Wait<\/td><td>Emit front-end\/back-end\/tests<\/td><td>Specify language &amp; framework<\/td><\/tr><tr><td><strong>Review<\/strong><\/td><td>Run, test, debug<\/td><td>Answer questions, refactor<\/td><td>Commit to Git each round<\/td><\/tr><tr><td><strong>Iterate<\/strong><\/td><td>Add features, improve perf<\/td><td>Cross-file diffs, migrations<\/td><td>Keep automated tests running<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Think of it as pairing with a <em>hyper-speed<\/em> teammate\u2014you narrate, the AI types.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4 | Tool Landscape\u2014Who Sits Where?<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Name<\/strong><\/td><td><strong>Type<\/strong><\/td><td><strong>One-liner<\/strong><\/td><td><strong>Learning curve*<\/strong><\/td><td><strong>Typical price<\/strong><\/td><\/tr><tr><td><strong>ChatGPT<\/strong><\/td><td>Chat LLM<\/td><td>The household name; quick code snippets<\/td><td>\u2605<\/td><td>Free \/ Plus US $20 mo<a href=\"https:\/\/www.news.com.au\/finance\/business\/media\/treasurer-jim-chalmers-backs-australian-parents-as-us-big-tech-targets-online-laws\/news-story\/6146b79763dda881ffcc623491b11887?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\"> news<\/a><\/td><\/tr><tr><td><strong>Claude<\/strong><\/td><td>Chat LLM<\/td><td>Giant context window (200k tokens)<\/td><td>\u2605<\/td><td>Free \/ Plus US $20<\/td><\/tr><tr><td><strong>Gemini<\/strong><\/td><td>Multi-modal LLM<\/td><td>Google\u2019s model; handles text + images; tight Docs\/Gmail hooks<\/td><td>\u2605<\/td><td>US $19.9 mo<\/td><\/tr><tr><td><strong>Lovable.ai<\/strong><\/td><td>AI site builder<\/td><td>\u201cIdea \u2192 site in seconds\u201d; Figma import<\/td><td>\u2605\u2605<\/td><td>Free \/ Pro US $25 mo<a href=\"https:\/\/aws.amazon.com\/blogs\/media\/nab-show-2025-featured-latest-generative-ai-live-cloud-sports-production-capabilities-from-aws\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\"> Amazon Web Services, Inc.<\/a><\/td><\/tr><tr><td><strong>Cursor<\/strong><\/td><td>AI-first IDE<\/td><td>VS Code fork; select code \u2192 \u201crefactor \/ add tests\u201d<\/td><td>\u2605\u2605\u2605<\/td><td>Free 200 req; Pro US $20 mo<a href=\"https:\/\/aws.amazon.com\/blogs\/media\/nab-show-2025-featured-latest-generative-ai-live-cloud-sports-production-capabilities-from-aws\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\"> Amazon Web Services, Inc.<\/a><\/td><\/tr><tr><td><strong>Windsurf<\/strong><\/td><td>Cloud Vibe IDE<\/td><td>Multi-file conversational refactor; team mode<\/td><td>\u2605\u2605\u2605<\/td><td>Free \/ Pro US $15 mo<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>*More \u2605 = more programming background required.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5 | Hands-On Example: From Landing Page to Production App<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Lovable 2.0 is insane\u2026 vibe-code anything in minutes!\" width=\"1300\" height=\"731\" src=\"https:\/\/www.youtube.com\/embed\/zDFY--jbaeU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Spin up an MVP in Lovable<\/strong><strong><br><\/strong> Prompt: <em>\u201cOne-page Mother\u2019s Day promo, pink theme, countdown timer, lead-capture form.\u201d<\/em><em><br><\/em> In ~30 s you have a live page on a sub-domain.<br><\/li>\n\n\n\n<li><strong>Tweak copy with ChatGPT<\/strong><strong><br><\/strong> <em>\u201cReplace every \u2018early-bird\u2019 with \u201824-hour only\u2019 and change the CTA button color to #B94A6F.\u201d<\/em><em><br><\/em><\/li>\n<\/ol>\n\n\n\n<p><strong>Deep-customize in Cursor<\/strong><br>git clone https:\/\/github.com\/your-lovable-mvp.git<\/p>\n\n\n\n<p>cursor .<\/p>\n\n\n\n<p>&nbsp;Select HeroSection.tsx \u2192 prompt:<br><em>\u201cSwitch to dark glass-morphism background and add a FAQ component.\u201d<\/em><em><br><\/em><\/p>\n\n\n\n<p><strong>Team refactor in Windsurf<\/strong><strong><br><\/strong> Connect the repo, then ask:<br><em>\u201cExtract duplicated CSS into <\/em><em>Card.css<\/em><em>, add Jest snapshots, and open a PR.\u201d<\/em><em><br><\/em> Apply &amp; commit with a click.<br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>6 | Prompt Engineering\u2014Level-Up Tactics<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Layer your ask<\/strong>: business goal \u2192 page blocks \u2192 exact file\/function changes.<br><\/li>\n\n\n\n<li><strong>Few-shot style guide<\/strong>: show a tiny \u201cideal\u201d output; the model matches it.<br><\/li>\n\n\n\n<li><strong>Chain-of-thought<\/strong>: first say \u201cPlan the steps,\u201d then \u201cImplement step 1,\u201d etc.\u2014fewer logic bugs.<br><\/li>\n\n\n\n<li><strong>Always generate tests<\/strong>: \u201cCreate Jest unit tests and explain each assertion.\u201d<br><\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>7 | Risks &amp; Governance<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Risk<\/strong><\/td><td><strong>Example<\/strong><\/td><td><strong>Mitigation<\/strong><\/td><\/tr><tr><td><strong>License conflicts<\/strong><\/td><td>GPL fragments sneaking in<\/td><td>SPDX scanning + human review<\/td><\/tr><tr><td><strong>Hidden vulns<\/strong><\/td><td>SQLi \/ XSS<\/td><td>SAST, DAST, e2e tests<\/td><\/tr><tr><td><strong>Cost overrun<\/strong><\/td><td>Millions of GPT-4o tokens<\/td><td>Quotas + caching<\/td><\/tr><tr><td><strong>Opaque code<\/strong><\/td><td>Hard-to-maintain blobs<\/td><td>Force AI to add comments &amp; UML diagrams<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>8 | Careers &amp; Market Signals<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>National Australia Bank<\/strong> already lets AI author <strong>\u2248 50 %<\/strong> of accepted code.<a href=\"https:\/\/docs.aws.amazon.com\/prescriptive-guidance\/latest\/strategy-transform-adm-operating-model-gen-ai\/introduction.html?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\"> AWS <br><\/a><\/li>\n\n\n\n<li><strong>Roles on the rise<\/strong><strong><br><\/strong>\n<ol class=\"wp-block-list\">\n<li><em>Prompt Engineer \/ AI Pair-Programming Lead<\/em><em><br><\/em><\/li>\n\n\n\n<li><em>AI Governance Engineer<\/em> (security, license, cost)<br><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong>Skills that matter<\/strong><strong><br><\/strong>\n<ol class=\"wp-block-list\">\n<li>Problem-decomposition<br><\/li>\n\n\n\n<li>Product intuition &amp; UX empathy<br><\/li>\n\n\n\n<li>Security &amp; testing know-how<br><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>9 | 30-Day Skill Sprint<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Week<\/strong><\/td><td><strong>Goal<\/strong><\/td><td><strong>Check-off Tasks<\/strong><\/td><\/tr><tr><td><strong>1<\/strong><\/td><td>Prompt basics<\/td><td>Build 3 Python scripts in ChatGPT, run them locally<\/td><\/tr><tr><td><strong>2<\/strong><\/td><td>MVP shipping<\/td><td>Launch a Lovable site; collect 10 form leads<\/td><\/tr><tr><td><strong>3<\/strong><\/td><td>IDE mastery<\/td><td>Port site to Cursor; refactor UI + auto-tests<\/td><\/tr><tr><td><strong>4<\/strong><\/td><td>Cloud collab<\/td><td>Co-edit the repo in Windsurf; set up CI\/CD<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>10 | Takeaway<\/strong><\/h2>\n\n\n\n<p>Vibe Coding turns software creation into a <strong>conversation<\/strong>. When drag-and-drop builders feel slow or rigid, pairing <strong>ChatGPT<\/strong> for ideation, <strong>Lovable<\/strong> for instant scaffolding, then <strong>Cursor\/Windsurf<\/strong> for deep, test-driven refinement compresses the idea-to-product loop to days\u2014or hours.<br>The winning edge isn\u2019t faster typing\u2014it\u2019s sharper problem framing and the ability to steer AI toward <strong>well-tested, secure, user-centric solutions<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>From Drag-and-Drop to \u201cDescribe-and-Run\u201d You may have built a site with Lovable or asked ChatGPT to tweak some HTML.This guide takes you the whole way\u2014up to Cursor and Windsurf, the IDEs built for Vibe Coding\u2014and explains where tools like Claude or Gemini fit in. 1 | What is Vibe Coding? Definition Vibe Coding (often written vibecoding) is a workflow where natural-language prompts drive a large-language model (LLM) to generate and iterate on all the source code. The human shifts from \u201cwriter\u201d to \u201cdirector\u201d: describe what you want, run it, test, then refine. The term comes from AI researcher Andrej Karpathy,&#8230;<\/p>\n","protected":false},"author":253372376,"featured_media":10088,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[96987604,96987592],"tags":[96988096],"class_list":["post-10087","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai-news","category-featured-articles","tag-vibe-coding-2"],"blocksy_meta":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/ai-stack.orca-biz.tw\/wp-content\/uploads\/2025\/05\/%E6%A8%A1%E5%9E%8BA-12.jpg?fit=1920%2C1080&quality=100&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/ph344V-2CH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ai-stack.orca-biz.tw\/en\/wp-json\/wp\/v2\/posts\/10087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ai-stack.orca-biz.tw\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai-stack.orca-biz.tw\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai-stack.orca-biz.tw\/en\/wp-json\/wp\/v2\/users\/253372376"}],"replies":[{"embeddable":true,"href":"https:\/\/ai-stack.orca-biz.tw\/en\/wp-json\/wp\/v2\/comments?post=10087"}],"version-history":[{"count":0,"href":"https:\/\/ai-stack.orca-biz.tw\/en\/wp-json\/wp\/v2\/posts\/10087\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ai-stack.orca-biz.tw\/en\/wp-json\/wp\/v2\/media\/10088"}],"wp:attachment":[{"href":"https:\/\/ai-stack.orca-biz.tw\/en\/wp-json\/wp\/v2\/media?parent=10087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai-stack.orca-biz.tw\/en\/wp-json\/wp\/v2\/categories?post=10087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai-stack.orca-biz.tw\/en\/wp-json\/wp\/v2\/tags?post=10087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}