不寫程式，用「說的」或「貼圖的」，讓 Claude 幫你做出一個完整的 App。這就是 Vibe Coding。
什麼是 Vibe Coding？
傳統寫程式：你要學語法、查文件、debug 半天。
Vibe Coding：你只要「描述你想要什麼」，AI 幫你把程式寫出來。
你負責想，Claude 負責做。不需要任何程式基礎。
方法 A：用文字描述你要什麼 → Claude 幫你做
方法 B：直接丟一張截圖或手繪草圖 → Claude 照著做出來
教學流程
| 階段 | 做什麼 | 時間 |
|---|---|---|
| 觀念 | 什麼是 Vibe Coding？兩種輸入方式介紹 | 3 分鐘 |
| 示範 A | 講師用文字 Prompt，即時生出一個 App | 5 分鐘 |
| 示範 B | 講師丟一張截圖，Claude 直接生出同樣的 App | 5 分鐘 |
| 調整 | 用中文跟 Claude 說要改什麼，示範迭代流程 | 5 分鐘 |
| 實作 | 學員選方法 A 或 B，動手做自己的 App | 15-20 分鐘 |
方法 A：用文字描述
想清楚你要什麼，用自然的中文告訴 Claude。不用管格式，講得越具體，做出來越像你要的。
Step A1｜想清楚你要什麼
回答這 3 個問題：
❶ 你日常有什麼事，希望有個 App 幫你管？
❷ 你想看到什麼畫面？（表格？圖表？Dashboard？）
❸ 誰會用這個 App？（自己？團隊？主管？）
Step A2｜用自然中文寫 Prompt
不用背公式，就像跟同事說話一樣。把你想要的功能、畫面、資料全部講出來：
我希望在我的投資組合裡面，可以記錄我購買過的股票、股數、當初購入的股價，以及它現在的現值。
請給我一個報表，讓我知道我的投資組合是有賺還是有賠，並且在我點擊的時候，可以看到歷史趨勢。
初期的投資組合請幫我隨便找一些熱門的股票，隨意填入一些數字當作 demo 就好。
Step A3｜貼進 Claude Code，等它做
把寫好的描述整段貼進 Claude Code → 等 1-3 分鐘 → 完成後自動在瀏覽器開啟你的 App。
💡 生成過程中不用動手，Claude 會自己寫完整個程式。你只要看畫面對不對。
方法 B：直接丟截圖
看到別人的 App 覺得「我也想要一個這樣的」？不用自己描述——截圖丟給 Claude，它就照著做。
你甚至不用會打字描述功能，直接把想要的畫面丟給 AI 就好。
截圖、網頁擷取、手繪草圖、甚至用紙筆畫——Claude 都看得懂。
Step B1｜找到一張你想要的畫面
來源不限：
📱 截圖：看到別人的 App、網頁、系統畫面 → 截圖存下來
✏️ 手繪：拿紙筆畫出你想要的畫面 → 拍照
🖥️ 網頁擷取：在網路上看到喜歡的介面 → 擷取畫面
Step B2｜丟圖 + 一句話
在 Claude Code 裡，把圖片拖進去（或貼上），加一句話就好：
📝 範例 Prompt（搭配截圖使用）
請幫我做出這樣的 App。
我希望在我的投資組合裡面，可以記錄我購買過的股票、股數、當初購入的股價，以及它現在的現值。
請給我一個報表，讓我知道我的投資組合是有賺還是有賠，並且在我點擊的時候，可以看到歷史趨勢。初期的投資組合請幫我隨便找一些熱門的股票，隨意填入一些數字當作 demo 就好。
Step B3｜等 Claude 做完，檢查畫面
Claude 會分析截圖裡的版面配置、配色、功能區塊，然後照著做出來。
生成時間約 2-5 分鐘（圖片越複雜、功能越多，時間越長）。
💡 不會 100% 一模一樣，但核心功能和版面會很接近。細節可以再用文字調整。
Step 3｜測試與迭代
不管用方法 A 或 B，做出來之後的調整方式都一樣——用中文跟 Claude 說要改什麼：
✅ 試功能：點每個按鈕、輸入資料，看反應對不對
✅ 看畫面：配色、字體大小、排版順不順眼
✅ 說要改：不滿意就直接講，例如：
「把背景改成白色，看起來太暗了」
「表格的字太小，放大一點」
「加一個 Dashboard，顯示總損益和報酬率」
「新增一個匯出 CSV 的按鈕」
「配色改成跟我公司 LOGO 一樣的藍色」
「加一個篩選功能，可以按日期區間查」
不用一次到位。先生出來 → 看一看 → 說要改 → 再生一次。
迭代三次，通常就有 80 分了。比你想半天再下手快 10 倍。
Step 4｜部署上線（選修）
在 Claude Code 裡輸入：please deploy to vercel
Claude 會自動幫你部署到網路上，給你一個網址，任何人都能打開使用。
💡 部署是免費的（Vercel 免費方案），但需要先有 Vercel 帳號。
更多靈感：你還能做什麼？
不知道要做什麼？以下是幾個常見場景，每個都只要一段話或一張圖：
「做一個記帳 App，可以記錄每筆收入和支出，分類統計，月底顯示圓餅圖讓我知道錢花去哪」
「做一個客戶名單管理 App，記錄公司名、聯絡人、電話、上次拜訪日期，可以篩選、搜尋、匯出」
「做一個健身記錄 App，可以記每天做了什麼運動、幾組幾下、體重變化，用折線圖顯示趨勢」
「做一個專案行程追蹤 App，有甘特圖，可以拖拉調整時間，標示逾期項目，自動計算完成率」
方法 A vs. 方法 B 怎麼選？
| 方法 A：文字描述 | 方法 B：丟截圖 | |
|---|---|---|
| 適合情境 | 腦中有明確需求，但沒有參考畫面 | 看到別人的 App 覺得「我也要」 |
| 輸入方式 | 打字描述功能和畫面 | 拖入圖片 + 一句話補充 |
| 速度 | 寫 Prompt 要 3-5 分鐘 | 截圖 + 一句話，30 秒 |
| 精準度 | 你描述越具體，結果越準 | 畫面還原度高，但功能可能需要補充 |
| 建議 | 搭配 Excel 變 App 的 6 句公式更好用 | 搭配文字補充需求，效果最好 |
小提醒
• 生成的 App 是單機版 HTML 檔案，資料存在瀏覽器（localStorage），換電腦會消失。
• 截圖的品質越高越好——模糊的截圖，Claude 可能誤判畫面元素。
• 方法 B 丟截圖時，可以加一句「請幫我做出這樣的 App」＋你額外想要的功能描述，效果最好。
• 第一次做出來不完美是正常的——迭代調整才是 Vibe Coding 的核心。
• 手繪草圖也行！用紙筆畫出大致的版面，拍照丟給 Claude，它看得懂。
你會說話、會截圖，就會做 App。
選方法 A 或 B → 丟進 Claude Code → 說要改什麼 → 完成 🎉
本教學由 FutureCorp Consulting 製作
本課程沒有啟用評論功能。