從這兒開始 · Vibe Coding
Vibe Coding 是什麼，新手怎麼開始
一句話：用自然語言指揮 AI 寫程式碼，你負責描述要什麼和驗收，AI 負責敲。它不是讓你不用懂，而是把你要懂的東西從語法挪到了判斷。
它擅長什麼
把一個說得清楚的小東西從零做出來：一個落地頁、一個互動動效、一個把表格轉成圖的小工具。這類任務邊界清晰，結果對不對一眼能看出來，正好是 AI 的舒適區。
改造也很擅長：把一段已有的程式碼換個風格、加個動畫、適配手機。你給它上下文，它改得比從零寫更穩。
它不擅長什麼
需要長期維護的複雜系統。AI 每次只看到你給它的那部分，專案一大，它的改動會互相打架。
還有一類坑是「看起來對」：動畫能跑但在低端手機上卡，程式碼能編譯但把無關的功能改壞了。這也是為什麼這裡每個檔案都帶著約束條件，明確寫出不許動什麼。
第一步該怎麼走
別從「幫我做一個網站」開始，那句話太大，AI 會給你一堆用不上的東西。從一個具體的效果開始：一個按鈕按下去的回饋、一段文字出現的方式。
去程式碼區挑一個，每一條都是一個能直接跑的檔案，外加一段給 AI 的完整指令，指令裡寫清了要保留什麼、不許改什麼。粘進去，看結果，再讓它按你的需求調。
怎麼判斷結果好不好
三個問題：在手機上還順嗎？關掉動畫偏好設定之後資訊還完整嗎？它有沒有順手改了你沒讓它改的地方？前兩個是品質，第三個是安全。
這三條這裡每份指令裡都寫著，所以你不用每次自己重複。
常見問題
- 不會程式設計能做 vibe coding 嗎？
- 能做出東西，但要有心理準備：AI 寫得出來，不代表寫得對。你至少要能看出結果對不對、能把報錯原樣貼回去讓它改。完全不碰程式碼也能走很遠，只是遇到問題時你只能靠描述現象。
- 該用哪個工具？
- 這裡不繫結任何工具。常見的幾種：在網頁對話方塊裡直接問，或者用能讀寫你專案檔案的編碼助手。這裡的每個檔案和指令，粘到哪一個裡都能用。
- 為什麼要給 AI 一個現成的檔案，而不是直接讓它寫？
- 直接讓它寫，你得到的是它的平均水平。給它一個已經跑通的參考實現，再說清楚要改成什麼樣，你得到的是這份實現的水平加上你的需求。差別在動效和互動這類細節上尤其明顯。
- 生成的程式碼能用在商業專案裡嗎？
- 可以，包括接的客戶專案。這裡每個實現都是為這個庫重新寫的原創程式碼，不帶別人的授權條款。
瀏覽和預覽免費，完整檔案和指令屬於 Pro。