學 Vibe Coding,要選什麼題目開始 – 1

上週 Reddit 上有個美國人私訊我,說他看到我做的 presentation.stingtao.info,覺得很驚艷,想學怎麼像我這樣用 AI 快速做出產品。

我給他一個小時的線上英文教學。他是做研究的工程師,平常會寫些 Python,但沒寫過網站。他說他想做一個比 Gamma 更好用的工具,秀給我看他做的非常漂亮的前端畫面。

聽完他的背景和目標後,我給了他建議:

不要一開始就挑戰巨頭題目,要從最簡單的開始。

以下是我給他的 roadmap,也就是我自學的步驟,是我建議的一個從零學會 Vibe Coding ,而且能有效挑戰自己的夢想的實戰練習順序,大概要兩個月:


Step 1: 從興趣出發的小專案

找一個你自己覺得有趣的小題目,例如:

  • 簡單的算命網站
  • 自己日常會用的小工具

目標:用aistudio做,focus在簡單畫面流程,按下某按鈕後跳到另一頁。做三個這樣的專案。

時間:一週


Step 2: 部署

再做 2-3 個小專案,每個都要完成部署:

目標:部署到Cloudflare,搞不懂怎麼部署的沒關係,都請Cursor幫忙。

時間:一週


Step 3: 加入資料庫

做些可以存取資料的功能:

  • 做個備忘錄
  • 使用 Cloudflare的 D1資料庫 / R2儲存

時間:一週


Step 4: 接上 Google Login

練習 OAuth 流程:

  • 登入 Google Developer Console
  • 建立基本帳號系統

時間:一週


Step 5: 用 Git 管理版本

  • 註冊 GitHub
  • commit、push、pull
  • 在不同電腦上開發
  • 出狀況學會 rollback
  • 都請Cursor幫忙
  • 前面做的每個專案都放到github上

時間:一週


Step 6: 整合外部 API

做 5 個不同類型的功能的專案,使用API,例如:

  • 發信(Mailgun)
  • 爬網站(Firecrawl)
  • 使用 AI API(Gemini)

時間:一週


Step 7: UI/UX + 多國語系

  • 做 responsive 設計
  • Refactor theme 和頁面
  • 支援多國語系(i18n)
  • 做三隻app

時間:一週


Step 8: 學會維運與迭代

  • 專案上線後持續更新
  • 看前端log、Server log、Debug、Refactor、加新功能
  • 帶著Cursor優雅地改版五個功能,commit到github

時間:兩週


Step 9: 延伸技術領域

  • 練習做 10 支 mobile app,一樣由簡單到終南
  • or 練習桌面應用
  • 依需求選擇要深入的方向

時間:兩週


Step 10: 思考產品品質

這時候,你應該已經做過 20 個Vibe Coding學習 專案,學會帶著AI:

  • 快速驗證想法 POC
  • 接各種 API
  • 管理code
  • 實際部署上線
  • 反覆修改,掌握了不會修爛的帶領AI的技巧
  • 跟兩個月前比,你應該蠻懂軟體開發了!

這時候才適合開始思考更高階的問題,遇到問題時不是趕快深入學習,就是趕快找專家外包:

  • 資安(Security)
  • 效能(Performance)
  • UI 美觀 / UX 優化

結語:Vibe Coding 是實戰 + 行動 學習,不是空想 與 幻想

一開始就想打倒市值 20 億美金的 Gamma,是不切實際的。

比較好的方式,是先做一個:

  • 你自己會用的小工具
  • 幾個同事會用的內部服務
  • 部署你想要創業的想法,但做MVP,無謂的功能都不要做,例如收款。

動作要快,要鍛鍊,判斷!先練熟開發、部署、維護,然後才有機會談創新創業然後賺大錢。

如果你的目標是寫出一個嚴肅的產品,例如電商平台,按照標準流程公司都會花上幾十萬甚至幾千萬請資安公司來測試安全性。沒有這個概念的話,這種題目根本不該是初學者前幾個產出專案的選項。

Vibe Coding 是一種迭代思維: 用最短時間完成有用的東西,然後從中學習。

發佈留言