[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-how-to-start-vibe-coding-with-ai-zh":3,"article-related-how-to-start-vibe-coding-with-ai-zh":31,"series-tools-2c75f00f-eb01-418f-a793-45c1522f226e":84},{"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":23,"views":27,"created_at":28,"published_at":29,"topic_cluster_id":30},"2c75f00f-eb01-418f-a793-45c1522f226e","how-to-start-vibe-coding-with-ai-zh","怎麼開始 AI Vibe Coding","\u003Cp data-speakable=\"summary\">這篇教你用 \u003Ca href=\"\u002Ftag\u002Fai-coding\">AI coding\u003C\u002Fa> 工具，從一個小問題一路做出可用的微型應用。\u003C\u002Fp>\u003Cp>這篇給非工程背景的產品人、剛接觸程式的人，以及想帶同事入門的開發者。照著做完，你會拿到一套可重複的流程：選題、下提示、跑起來、修錯、驗證，最後把一個小工具交付出去。\u003C\u002Fp>\u003Cp>本文的做法參考 \u003Ca href=\"https:\u002F\u002Fdocs.anthropic.com\u002F\" target=\"_blank\" rel=\"noreferrer\">Anthropic Docs\u003C\u002Fa> 與 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-code\" target=\"_blank\" rel=\"noreferrer\">Claude Code GitHub repo\u003C\u002Fa> 的實作方式，也能套用到 \u003Ca href=\"\u002Ftag\u002Fgemini\">Gemini\u003C\u002Fa> 或其他 AI coding 工具。\u003C\u002Fp>\u003Ch2>開始之前\u003C\u002Fh2>\u003Cul>\u003Cli>Anthropic 帳號，或其他支援程式生成的 AI coding 帳號\u003C\u002Fli>\u003Cli>API key，若你的工具需要串接\u003C\u002Fli>\u003Cli>Node 20+\u003C\u002Fli>\u003Cli>Git 2.40+\u003C\u002Fli>\u003Cli>VS Code 1.90+ 或同等級編輯器\u003C\u002Fli>\u003Cli>一個能用一句話說完的小問題\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Step 1: 選定單一問題\u003C\u002Fh2>\u003Cp>先把題目縮到最小，讓 AI 能一次做出第一版。目標不是做完整產品，而是做一個只解一件事的微型應用。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780773471291-8bu6.png\" alt=\"怎麼開始 AI Vibe Coding\" 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>你應該看到一行清楚的問題敘述，裡面有使用者、任務和結果。如果不需要額外背景就能看懂，這個範圍就夠小，可以開始做。\u003C\u002Fp>\u003Ch2>Step 2: 建立專案資料夾\u003C\u002Fh2>\u003Cp>先準備乾淨的工作區，讓 AI 有地方寫程式，你也有地方檢查修改。新建資料夾、初始化 Git，再建立工具偏好的專案骨架。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780773474337-m3jw.png\" alt=\"怎麼開始 AI Vibe Coding\" 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>你應該看到一個新的 Git repository 和一個 package.json。執行 \u003Ccode>git status\u003C\u002Fcode> 時，只會看到你剛建立的檔案，這代表環境乾淨。\u003C\u002Fp>\u003Ch2>Step 3: 讓 AI 產生第一版\u003C\u002Fh2>\u003Cp>現在要請\u003Ca href=\"\u002Fnews\u002Fbest-kimi-models-2026-k2-5-vs-k2-thinking-zh\">模型\u003C\u002Fa>先做可跑的初版，不要追求完美。把功能、輸入和輸出講清楚，並要求它保持簡單，必要時說明假設。\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>你應該看到生成的檔案、基本介面，以及可以直接執行的程式碼。如果 AI 先給你計畫而不是程式，改成只要它先完成第一個畫面和一個核心函式。\u003C\u002Fp>\u003Ch2>Step 4: 執行並修正第一個錯誤\u003C\u002Fh2>\u003Cp>這一步的目標是把程式跑起來，找到第一個失敗點，再讓 AI 幫你修。這就是 \u003Ca href=\"\u002Ftag\u002Fvibe-coding\">vibe coding\u003C\u002Fa> 的核心循環：執行、觀察、調整、重跑。回饋越具體，修得越快。\u003C\u002Fp>\u003Cpre>\u003Ccode>npm install\nnpm run dev\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>你應該看到應用在瀏覽器或本機預覽中載入。如果它當掉，把錯誤訊息貼回工具裡，要求只修這一個問題。成功的標準是頁面能開啟，並對測試輸入有反應。\u003C\u002Fp>\u003Ch2>Step 5: 用真實資料驗證\u003C\u002Fh2>\u003Cp>接著要確認它能處理你真的會遇到的輸入。用真實的傳單、真實的排班規則，或真實的清單來測。這一步會把「看起來厲害」\u003Ca href=\"\u002Fnews\u002Fnvidia-ai-models-playbook-zh\">變成\u003C\u002Fa>「真的有用」。\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>你應該看到輸出符合預期，或至少暴露出明確缺口。如果結果不穩定，就重寫提示、加上驗證，或把輸入格式簡\u003Ca href=\"\u002Fnews\u002Fwhy-thanh-hoa-to-hue-weather-alerts-should-be-taken-seriousl-zh\">化到\u003C\u002Fa>模型能穩定處理為止。\u003C\u002Fp>\u003Ch2>Step 6: 保存、分享、再迭代\u003C\u002Fh2>\u003Cp>最後要把可用版本保存下來，讓後續修改有起點。提交 Git、補一份簡短 README，並記下下一個要加的功能。這樣你就有一條從點子到工具的固定路徑。\u003C\u002Fp>\u003Cpre>\u003Ccode>git add .\ngit commit -m \"Build first version of micro-app\"\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>你應該看到一個乾淨的 commit，外加一段簡短說明。如果別人能 clone、安裝依賴並成功執行，這個結果就已經可以分享。\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>指標\u003C\u002Fth>\u003Cth>基準／優化前\u003C\u002Fth>\u003Cth>結果／優化後\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>建置結果\u003C\u002Ftd>\u003Ctd>手動處理或沒有應用\u003C\u002Ftd>\u003Ctd>可運作的單一問題微型應用\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>迭代流程\u003C\u002Ftd>\u003Ctd>想到什麼做什麼\u003C\u002Ftd>\u003Ctd>提示、執行、除錯、重複\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>技能收穫\u003C\u002Ftd>\u003Ctd>幾乎沒有程式經驗\u003C\u002Ftd>\u003Ctd>理解檔案、錯誤與提示的基本關係\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2>常見錯誤\u003C\u002Fh2>\u003Cul>\u003Cli>第一天就想做完整產品。修法：把範圍縮成一個使用者、一個任務。\u003C\u002Fli>\u003Cli>提示詞太空泛，例如「幫我做得更好」。修法：明確寫出輸入、輸出和邊界情況。\u003C\u002Fli>\u003Cli>跳過真實測試。修法：直接拿你之後要依賴的表單、PDF 或試算表資料來跑。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>接下來可以看什麼\u003C\u002Fh2>\u003Cp>當第一個微型應用跑通後，可以再加一個進階能力，例如檔案上傳、資料解析或簡單資料庫，觀察 AI 在每一層的表現差異。那時候，vibe coding 就會從有趣實驗變成可用流程。\u003C\u002Fp>","這篇教你用 AI coding 工具，從一個小問題一路做出可用的微型應用。","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-1780773471291-8bu6.png","tools","zh","df69beef-d6a6-40d1-9284-474eebad74b7",[17,18,19,20,21,22],"AI coding","vibe coding","Node.js","Git","VS Code","Claude Code",[24,25,26],"先把題目縮成單一問題，再請 AI 做第一版。","用執行與錯誤訊息回饋 AI，形成固定的修正循環。","用真實資料測試並提交版本，才算完成可分享的成果。",0,"2026-06-06T19:17:22.400458+00:00","2026-06-06T19:17:22.39+00:00","269e8a66-8555-4fa6-80c1-90390e524b04",{"tags":32,"relatedLang":43,"relatedPosts":47},[33,35,37,39,41],{"name":19,"slug":34},"nodejs",{"name":18,"slug":36},"vibe-coding",{"name":21,"slug":38},"vs-code",{"name":20,"slug":40},"git",{"name":17,"slug":42},"ai-coding",{"id":15,"slug":44,"title":45,"language":46},"how-to-start-vibe-coding-with-ai-en","How to Start Vibe Coding with AI","en",[48,54,60,66,72,78],{"id":49,"slug":50,"title":51,"cover_image":52,"image_url":52,"created_at":53,"category":13},"34162763-ffe3-416d-a719-e450ba87ac3d","llm-leaderboard-2026-300-models-ranked-zh","2026 LLM 排行榜：309 模型怎麼選","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780776191145-786j.png","2026-06-06T20:02:36.847112+00:00",{"id":55,"slug":56,"title":57,"cover_image":58,"image_url":58,"created_at":59,"category":13},"09c2902c-97a8-433c-94de-874a7f55d2ff","llama-benchy-api-benchmark-zh","llama-benchy 把 API 也納入基準測試","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780775303246-184z.png","2026-06-06T19:47:53.968325+00:00",{"id":61,"slug":62,"title":63,"cover_image":64,"image_url":64,"created_at":65,"category":13},"fd6e6e2e-4036-4fc0-8521-0d8237178f85","nvidia-ai-models-playbook-zh","NVIDIA AI Models 把選模變成流程","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780771714449-s6kx.png","2026-06-06T18:48:02.508579+00:00",{"id":67,"slug":68,"title":69,"cover_image":70,"image_url":70,"created_at":71,"category":13},"c62bb593-ee76-46eb-bb3e-c160e78f7a5b","kimi-k25-agent-code-setup-zh","Kimi K2.5 讓代理編碼更穩","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780769047868-ajc6.png","2026-06-06T18:03:19.108312+00:00",{"id":73,"slug":74,"title":75,"cover_image":76,"image_url":76,"created_at":77,"category":13},"50b75ca3-5060-48d1-966a-56cfaa19b410","why-small-businesses-should-use-ai-for-admin-zh","為什麼小型企業只該把 AI 用在行政，不該什麼都交給它","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780758168808-yjnz.png","2026-06-06T15:02:17.869478+00:00",{"id":79,"slug":80,"title":81,"cover_image":82,"image_url":82,"created_at":83,"category":13},"cd6961a9-52ee-46f0-8e9b-2de544cd1906","crun-ai-gemini-omni-chat-video-editing-zh","Crun AI 把 Gemini Omni 變聊天剪片","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780733909044-zn45.png","2026-06-06T08:17:59.890613+00:00",[85,90,95,100,105,110,115,120,125,130],{"id":86,"slug":87,"title":88,"created_at":89},"855cd52f-6fab-46cc-a7c1-42195e8a0de4","surepath-real-time-mcp-policy-controls-zh","SurePath 推出即時 MCP 政策控管","2026-03-26T07:57:40.77233+00:00",{"id":91,"slug":92,"title":93,"created_at":94},"9b19ab54-edef-4dbd-9ce4-a51e4bae4ebb","mcp-in-2026-the-ai-tool-layer-teams-use-zh","2026 年 MCP：團隊真的在用的 AI 工具層","2026-03-26T08:01:46.589694+00:00",{"id":96,"slug":97,"title":98,"created_at":99},"af9c46c3-7a28-410b-9f04-32b3de30a68c","prompting-in-2026-what-actually-works-zh","2026 提示工程，真正有用的是什麼","2026-03-26T08:08:12.453028+00:00",{"id":101,"slug":102,"title":103,"created_at":104},"05553086-6ed0-4758-81fd-6cab24b575e0","garry-tan-open-sources-claude-code-toolkit-zh","Garry Tan 開源 Claude Code 工具包","2026-03-26T08:26:20.068737+00:00",{"id":106,"slug":107,"title":108,"created_at":109},"042a73a2-18a2-433d-9e8f-9802b9559aac","github-ai-projects-to-watch-in-2026-zh","2026 必看 20 個 GitHub AI 專案","2026-03-26T08:28:09.619964+00:00",{"id":111,"slug":112,"title":113,"created_at":114},"a5f94120-ac0d-4483-9a8b-63590071ac6a","claude-code-vs-cursor-2026-zh","Claude Code 與 Cursor 深度對比：202…","2026-03-26T13:27:14.279193+00:00",{"id":116,"slug":117,"title":118,"created_at":119},"0975afa1-e0c7-4130-a20d-d890eaed995e","practical-github-guide-learning-ml-2026-zh","2026 機器學習入門 GitHub 實用指南","2026-03-27T01:16:49.712576+00:00",{"id":121,"slug":122,"title":123,"created_at":124},"bfdb467a-290f-4a80-b3a9-6f081afb6dff","aiml-2026-student-ai-ml-lab-repo-review-zh","AIML-2026：像課綱的學生實驗 Repo","2026-03-27T01:21:51.467798+00:00",{"id":126,"slug":127,"title":128,"created_at":129},"80cabc3e-09fc-4ff5-8f07-b8d68f5ae545","ai-trending-github-repos-and-research-feeds-zh","AI Trending：把 AI 資源收成一張表","2026-03-27T01:31:35.262183+00:00",{"id":131,"slug":132,"title":133,"created_at":134},"3ce6e6e2-bac5-463e-9f8d-45caabcc61f7","awesome-ai-for-science-research-tools-map-zh","AI 科研工具清單，開始像地圖了","2026-03-27T01:46:50.521945+00:00"]