Vibe Coding 實作紀錄:用 AI 做網頁的進化,從 Demo 到 Taste-Skill
繼上一次分享剛開始接觸 Vibe Code 網頁,我花了一點點時間幫人做了一些網站,兩個 demo 跟一個簡單的社團頁面:
Collab17 | Spatial Design - demo
Collab17 | Spatial Design - demo2
上面兩個 demo 都沒做什麼修改
才沒隔多久,新的方式出來了,之前的方式其實也可以不用了,直接把這個skill套進去:
然後配著這服用
下一次來做動畫式網頁了...
我現在看到朋友都直接問,你有想要做網站嗎? 給我材料,我幫你做一個試試。
------
簡易教學
安裝 antigravity > 登入帳號 > 選擇一個空的資料夾 > 跟著我念一次咒語
https://github.com/Leonxlnx/taste-skill
請用這個 skill 幫我設計一個網站,這是一個叫「花樣」的花店,有美麗的老闆娘,喜歡手作感,在台北中山區,要用台灣中文。理想的販售對象是結婚場合,我們有各種花卉,需要提前15天預訂,起定量不限。
網站要有 首頁 商品 關於 聯絡方式
做完之後幫我打開dev mode讓我看然後就一直按 "run"/"accept" 確認執行,喝杯咖啡,看個 YouTube 等他詠唱結束。

等到網站打開來之後,再羞辱他說你哪裡的不夠好:
請把圖片補齊 要有美麗的老闆娘 還有花 跟婚禮 先幫我生成照片並放上去 請修復手機版本 設計格式不好看有時候他會耍呆,要酸酸的對他說:
你自己檢查一下網頁 我看不到照片 手機版本的格式不好看 你是不會調整喔有時候用講的很麻煩,請善用截圖貼上功能,直接指出哪裡不好,或是用顏色畫一圈,指出你要的位置。
他如果把網站玩壞了(絕對不是你玩壞的),你就要說:
快點修復網站 我在dev看不到(如果真的不行,請默默切換到 Claude 系列的模型再講一次)

記得打開右上角的 chrome 讓他保持這個頁面

他會自己去看網站實際上的效果然後截圖/反省/修正,有時候會斷掉,要整個把chrome關掉再點開一次那個小按鈕。
這樣來來回回幾次的情緒虐待之後,如果成果滿意了,再冷冷的對他說:
幫我 build to production然後這是成果
作者:W