跳到主要內容

Vibe Coding 2

 Vibe Coding最早是由Andrej Karpathy於2025年2月首次提出。他將這種新的寫程式方式稱為“vibe coding”,形容為「全然沉浸在氛圍中,擁抱指數級成長,彷彿忘了程式碼的存在」

而近期我跟汐止國小曾靜瑜老師也用v0作為開發生成工具,搭配 Next.js 和 Tailwind CSS,並串接 OpenAI 的 API。 嘗試出以下兩種開發法:
方法一:邊做邊想
當一個新的想法浮現,我可能連具體要做什麼都還沒想清楚。我連網站具體需求?功能規格?我或許只能語焉不詳地說出「左邊大概放這個,右邊那個,API 回應大概是...」,更多時候我只能憑著一股「現代一點」、「簡潔一點」的氛圍(Vibe)感來博杯祈禱這次AI生成的東西是我想要的。
這種方式的優點在於極度的自由與即時性。你可以隨心所欲地邊想邊改,讓設計與功能在不斷的互動中不斷演進。然而它的缺點也顯而易見:效率極低。 為了達到心中那股說不清處的「Vibe」,第一版的網站就更迭了50幾版才上線。
方法二:想清楚在做
我先利用如 o3 等推理模型討論出明確具體的規格與需求。 接下來在請03根據討論結果,將其轉換成詳細的產品需求文件(PRD),或依據軟體特性轉化為更精確的提問 Prompt。
AI不僅能幫我生成程式碼,還能協助我將模糊的需求拆解、梳理,甚至連 API 的 System Prompt、測試案例等一堆在前一版我沒想到的細節都為我考慮周全。而過去需要改五十幾版的專案,現在只迭代了六次就順利完成!
#品味是VibeCoding中最為關鍵的能力
品味不僅僅是個人喜好,它更是一種對美好事物的辨識與選擇能力。它源於我們對世界的理解,對自己所喜歡事物的深度理解。當你能明確說明「我喜歡這個,因為它的簡潔、因為它的流暢」,你的品味就開始萌芽。嘗試的越多,涉獵的越廣,你的品味就越好、越精準。反之若缺乏對事物的探索與洞察,便容易被平庸所滿足。
而在 Vibe Coding 的情境下,品味在於如何將個人想像力轉化為 AI 可理解的指令,並在 AI 的能力範圍內,將作品實現到極致。
#實作心得
-逐步迭代: 不要奢望AI能一次性完成所有功能,AI不是許願池。將複雜的需求拆解成更小的、可管理的功能。我通常會從前端介面開始,先搭建骨架,然後一個功能、一個功能地逐步加上去。
-善用AI開發工具: 如果在某個環節卡關,就在最後的prompt提文要求 v0 提供「不同的方法」來解決問題。V0的選取工具可以處理樣式跟文字的問題,不用每次都重新跑一次
本篇文章發想、草稿及編輯皆由真人自己來,但在過程中ChatGPT及Gemini協助提供想法及修改建議



留言

這個網誌中的熱門文章

Anthropic 團隊如何使用 Claude Code

Anthropic團隊透過Claude Code 改造他們的工作流,讓開發人員跟非技術人員可以處理複雜專案、自動化流程,並跨越過去限制其生產力的技能鴻溝。 他們深入採訪了以下團隊 資料基礎設施 產品開發 安全工程 推論 資料科學與視覺化 產品工程 成長行銷(Growth Marketing) 產品設計 強化學習工程 法律 Claude Code 用於資料基礎設施 資料基礎設施團隊為公司內所有團隊組織業務資料。他們使用 Claude Code 自動化例行資料工程任務、排除複雜基礎設施問題,並為技術和非技術團隊成員創建文件化工作流程,讓他們能夠獨立存取和操作資料。 主要 Claude Code 使用案例 使用截圖進行 Kubernetes 除錯 當 Kubernetes 叢集當機且不再排程新的 pod 時,團隊使用 Claude Code 診斷問題。他們將儀表板的螢幕截圖輸入 Claude Code,它逐一引導他們瀏覽 Google Cloud 的 UI 選單,直到找到顯示 pod IP 位址耗盡的警告。Claude Code 接著提供確切的指令來建立新的 IP 池並將其新增到叢集,無需涉及網路專家。 為財務團隊提供純文字工作流程 工程師向財務團隊成員展示如何撰寫描述其資料工作流程的純文字檔案,然後將其載入 Claude Code 以獲得完全自動化的執行。沒有編碼經驗的員工可以描述步驟,如「查詢此儀表板、獲取資訊、執行這些查詢、產生 Excel 輸出」,Claude Code 會執行整個工作流程,包括詢問所需的輸入,如日期。 協助新進人員熟悉程式庫 當新的資料科學家加入團隊時,他們被引導使用 Claude Code 來導覽龐大的程式庫。Claude Code 讀取他們的 Claude.md 檔案文件,識別特定任務的相關檔案,解釋資料管線間依賴關係,並幫助新人了解哪些上游來源輸入到儀表板。這取代了傳統的資料目錄和可發現性工具。 工作階段結束後更新claude.md 團隊要求 Claude Code 總結已完成的工作階段,並在每個任務結束時建議改進。這創建了一個持續改進循環,Claude Code 根據實際使用情況幫助改進 Claude.md 文件和工作流程指示,使後續迭代更有效。 跨多個實例的平行任務管理 在處理長時間執行的資料任務時...

親師溝通一定要用LINE嗎? 用LINE@會更安全更省時間

作者: 林穎俊 常聽到很多老師不想用LINE,因為LINE的方便性使得老師上班時間延伸到5點下班之後,舉凡孩子的大小事,甚至婆媳之間的事情,家長也想好好跟老師聊一聊。常讓老師覺得為什麼我下班了還要當家長的垃圾桶? 而且相信大家也有聽過同事說過。家長覺得孩子在學校受到委屈,自己覺得老師沒有公正的處理,就放話說要來學校找對方孩子的,在LINE群中這些層出不窮的事,相信都不是老師想要跟家長溝通的本意。 ㄧ、LINE@的特色: LINE@最大的特點是 群組成員無法對話跟互相加好友,只能跟老師對話。還可以設定關鍵字回復,不用立即回訊。在1對1 對話中還可以設定對話時間,不用半夜還在回line LINE@的功能:群發、1對1對話、動態消息等可以方便做好親師溝通。而且群發訊息(像是提醒 全班注意事項、班級宣導等)只要在1000則內都是不收費的。 二、如何使用LINE@ 1.安裝並登入Line@ 1-1在AppStore 中搜尋LINE@。  1-2 下載完成後,以原來LINE的帳號登入,設定好照片、名稱(例如五年孝班的小天地等),就可以開始使用了。 2.回應模式: 2-1簡介回應模式:登入後,先點進「回應模式」,內有「1對1聊天模式」、「於自動回應模式接收訊息」、「1對1聊天可對應時間」、「自動回應訊息」、「關鍵字自動回應訊息」、以及「設為好友時的歡迎訊息」。老師們可以視需要開啟前面兩項1對1聊天模式」跟「於自動回應模式接收訊息」。 2-2「1對1聊天可對應時間」是設定家長可以傳訊給您的時間,我們先點入週日,再點右上角的「編輯」再把左邊那個綠溝溝點起來,按下刪除後儲存,回到「回應模式」的畫面你就發現,週日你就收不到訊息囉~~科科 接下老師也可以設定平常上班日可以跟家長對話的時間 2-3 自動回應:先點入「撰寫新訊息」,「編輯訊息」可以設定當家長傳訊給你時,系統會自動回覆的訊息。管理用標題是你可以設定訊息的標題。指定期間或時刻,你可以區分上下課不同時間來回應家長不同的訊息。例如在上課時間,我會打「親愛的家長您好,謝謝您傳訊給我,我知道您一定有重要的事情跟我聯絡,...

【Vibe Coding 或是Vibe Prompting?】

自去年開始,我開始嘗試教孩子一門結合 Python 與 AI 的課程。一開始叫做「AI Assisted Python Programming」,但現在或許叫做「Vibe Coding」會是更貼切的名稱。這門課的想法是運用 Python 作為基礎程並結合 AI 作為教學助力,幫助小學生學習基礎的程式學習。 在最初的設計中,我採取的是「由下而上」的教學設計。透過一個實作專案,我一步步引導學生認識變數、資料型別、if-else跟函式等基本概念。當時我們設定的目標是建構一個簡易的線上訂購網站。雖然最終並未完整實作出來,但這個過程讓學生有機會從目標出發,理解每一項功能背後所需的知識與技能,並逐步補足所需的知識。 當學生遇到困難時,我會先請他們透過 AI 尋求協助。他們可以請 AI 解釋概念,甚至產出程式碼。但我給了他們一個額外的挑戰:他們必須能向我清楚說明這段程式碼的意義與邏輯。為了完成這個挑戰,他們必須學會如何有效地與 AI 對話,從而深化對程式內容的理解。這樣的好處是學生不用花費很多時間查資料獲等待老師解決問題,只要有問題AI都可以回答。然而在實際執行的過程中,我發現即使這樣循序漸進地引導,還是有部分學生容易卡關。 因此今年我嘗試轉向「由上而下」的教學方式,靈感來自 Vercel CEO Guillermo Rauch 的訪談。我從中學到人類的價值在於抽象與高階的思考,我們應該訓練孩子更清楚地表達需求,善用 AI 將想法實現,而不是拘泥於每一行程式碼的細節。 因此這學期我決定從「品味」開始,帶領學生探索「什麼是好的作品」。我們從一塊巧克力開始討論,學習如何描述一個「好吃」的巧克力,進而將這樣的能力轉移到數位創作上。我們的主題是「貪食蛇」遊戲設計。我會讓學生先用 AI 生成一個基礎版本,再引導他們去玩網路上的不同版本,學習觀察與評比:什麼樣的遊戲更美觀?速度更流暢?玩法更有趣或更具挑戰性? 接下來,學生需要根據自己的體驗,提出對「好遊戲」的定義與規格,並運用 AI 進行修正與調整,完成屬於他們自己的版本。對我來說這樣的過程可稱為「Vibe Coding」:從描述目標開始->進行生成->再進入反覆的修改與調整。但因為課程還沒告一段落,還無法做出很精確的結論。 這樣的過程也讓我思考孩子們在這當中究竟學到的是什麼?他們學到的是「Coding」本身,還是「Prompt...