部落格

不定期分享最新資訊文章

  • article-氛圍編碼時代來了!從零開始用 AI 寫程式,一步步成為「不打碼」工程師

    2025/7/11

    Vibe Coding
    氛圍編碼時代來了!從零開始用 AI 寫程式,一步步成為「不打碼」工程師
    生成式 AI 進入寫程式領域,已經不是「會不會」的問題,而是已經來了,而且來勢洶洶。 你可能聽過一句話:「AI 不會取代工程師,但會讓會用 AI 的人取代不會的人。」但現在,這句話又得升級了——你甚至可以不是工程師,就能用 AI 寫出可用的 App。 這一切都拜一種新寫法所賜,它被稱為「氛圍編碼」。 🌈 什麼是「氛圍編碼(Vibe Coding)」?這個詞由 OpenAI 前研究總監 Andrej Karpathy 提出,他的定義非常詩意:「有了 AI,寫程式變成一種跟隨當下情境氛圍的流程,你甚至可以忘記程式碼的存在。」 白話文就是——只要你有需求、有想像力,AI 就能幫你寫出程式碼。 寫程式不再是「工程師的技能」,而是一種「思維的交互」。Vibe Coding 的誕生,讓每一個創作者、設計師、PM、小老闆,甚至學生,都能踏入開發的世界。 🪜 氛圍編碼實戰五步驟:從發想到上線步驟一:選擇合適的 AI 程式開發平台要讓 AI 寫程式的過程事半功倍,第一步就是選對工具。以下推薦幾個主流的平台,各有特色: Cursor:結合 ChatGPT 的 VSCode 變體,能即時在程式中補充、解釋、修正,超適合初學者。 Replit Ghostwriter:雲端開發平台,從寫到部署一站搞定,介面友好。 Claude + Code Interpreter:語意理解超強,適合資料分析、邏輯推演。 GitHub Copilot:工程師愛用工具,寫一半自動幫你補齊,整合性極佳。 Gemini Code Assist:整合在 Google 產品中的輔助工具,例如 Colab、Android Studio。 🚀 Gemini CLI:終端機控者的最愛!能用指令與 Gemini 對話、寫檔、部署。想變成 AI 黑客風開發者,必玩這套。 如何選擇? 建議你根據用途決定: 想學語法:Cursor 想快速建站:Replit 偏好指令流:Gemini CLI 要整合 GPT API 做產品:Claude 或 Copilot 步驟二:描述需求,像寫劇本一樣具體AI 不是通靈大師,它是語言模型。提示詞的清晰度,決定了輸出程式碼的品質。一個好的提示詞應該包含具體的功能、風格與技術棧。 🎯 範例提示詞: 1請幫我用 JavaScript 建一個互動式網站,畫面要活潑,可以播放動畫、背景音樂,並顯示即時天氣資訊,整體體驗要像進入一個小型遊樂園。 提示詞訣竅: 指定語言:JavaScript、Python、Vue… 指定介面風格:活潑、極簡、卡通風 指定功能模組:播放音樂、表單驗證、串接 API 步驟三:迭代調整程式碼,把它當成對話AI 第一次生成的程式碼很可能不完美,就像一份半熟的漢堡排——可以吃,但還沒熟透。這時你需要跟 AI 展開「對話式 Debug」,逐步優化。 🔧 常用提示詞大全 類型 提示詞 優化結構 「請幫我簡化這段程式碼,讓結構更乾淨可讀」 功能加料 「幫我加入倒數計時與音效提醒」 錯誤修正 「這段程式有 undefined 錯誤,請說明原因並修正」 畫面升級 「把這個網頁改成 RWD 響應式,支援手機與桌機」 技術轉譯 「請把這段程式從 JavaScript 改寫為 TypeScript」 AI 是你的副駕,不是自駕車。你給方向,它幫你補路。 步驟四:部署與交付,讓你的專案上線程式寫出來,還得部署到伺服器才能被大家看見。這一步驟不難,但很關鍵!AI 同樣能在此提供極大幫助。 🛠 AI 能幫你做什麼: 生成 Dockerfile、.env、vercel.json 等部署設定檔 撰寫 CI/CD 腳本(如 GitHub Actions) 協助建構環境變數、權限設定、伺服器配置 提供自動化測試、報錯追蹤的程式碼(可整合 Jest、Sentry) 🎯 範例提示詞: 1請幫我建立一個 GitHub Actions workflow,讓這個 Next.js 專案在 push 到 main 分支時,能自動部署到 Vercel。 開發只是開始,部署才是上場。 步驟五:拆解複雜任務,一個個搞定當你想做的不是單一功能,而是一個「完整作品」(如 AI 聊天機器人、訂閱制網站)時,千萬不要一次把所有需求丟給 AI。 直接對 AI 說:「請幫我做一個支援會員登入、即時通訊、留言功能的網站」,十之八九會得到一坨無法執行的混亂程式碼。 🔑 任務分解:將複雜需求化為具體步驟 正確的做法,是把一個龐大的目標拆解成一塊塊積木,再引導 AI 一塊一塊蓋起來。 如何請 AI 協助拆解任務?你可以用這樣的開場白,請 AI 幫你規劃專案藍圖: 我要開發一個 XXX 系統,請幫我拆解成 5~7 個具體的小任務,並針對每個任務簡要說明推薦使用的技術工具與實作方向。 👀 範例提示詞: 1我想做一個支援登入、留言、通知的聊天室網站,請幫我拆解成幾個核心開發任務,並說明每一步推薦使用的技術。 AI 可能會回覆你這樣的任務清單: 使用者註冊與登入模組 → 使用 Firebase Authentication + OAuth 第三方登入(Google / Facebook) 即時聊天系統 → 使用 WebSocket 或 Firebase Realtime Database 建立訊息流 資料儲存與歷史訊息查詢 → 使用 Firestore 存取用戶與訊息紀錄 即時通知系統 → 使用 toast + badge 效果 + Firebase Messaging RWD 響應式前端建構 → 使用 Tailwind CSS / Bootstrap + React or Next.js 部署與測試 → 上傳至 Vercel,整合 CI/CD,進行基本測試與錯誤追蹤 如何逐步實作拆分後的任務?有了任務清單後,你只需要一次專注一項,對 AI 下達指令: 1請幫我完成第 1 項任務:使用 Next.js + Firebase Authentication 完成使用者註冊與登入功能,支援 Google 與 Facebook 第三方登入。 接著,你可以進入「細節調整對話」模式,搭配以下進階提示詞: 「登入流程目前沒處理錯誤,請加上失敗提示訊息」 「幫我把登入後導向首頁,並顯示用戶暱稱」 「請加上使用者登入後的個人資訊畫面,顯示 email 與大頭貼」 完成一項後,再進行下一項,整個開發過程就像玩任務卡牌遊戲一樣清晰。 🎯 Bonus:把 AI 當你的專案經理你可以直接對 AI 下達一個長期追蹤用的提示詞,讓它成為你的 PM: 1接下來我會逐步開發這個聊天室專案,請你擔任我的專案經理。請記錄每個已完成與未完成的任務,並在我需要時提醒我專案進度。 這個提示詞在 Cursor 或 Gemini CLI 這類支援長對話上下文的工具中特別有用。你甚至可以請它產出專案管理表格: 1請幫我把剛剛拆解的任務整理成 Markdown 表格,欄位包含:任務名稱、功能說明、預估時間、目前狀態(未開始 / 開發中 / 已完成)。 這就等於你擁有了一個不抱怨、不請假、不怕加班的「AI 專案經理」。 🚀 進階延伸玩法:導入團隊分工 如果你有夥伴一起開發(例如設計師、後端工程師),也能請 AI 協助分工: 12請幫我依據剛剛的任務列表,標記出哪些任務偏前端、哪些偏後端、哪些是設計需求,方便我們團隊分工。 🤔 為什麼任務分解如此重要?因為在 AI 時代,真正的開發能力不再只是你會寫多少語法,或能手刻幾百行程式碼。 核心能力在於:你能不能把一個「抽象需求」拆解成「可落地的小任務」,再引導 AI 一步步完成它。 這才是氛圍編碼的最強應用:用對話完成開發,用拆解推動產品落地。 不會打程式沒關係,先學會怎麼問問題、拆任務、給上下文,你就能讓 AI 幫你完成從 0 到 1 的開發歷程。 🧭 結語:你不是不會寫程式,而是還沒換對方法氛圍編碼,不只是技術的演進,更是創作思維的釋放。 你可以不懂變數、不熟語法、不擅排錯,但只要你敢說出需求,AI 就能陪你把點子變現。寫程式,已經從「打字工作」變成「對話式創作」。 AI,是你的副駕駛,而你是靈感與決策的掌舵者。