你用 AI 做出來的網站,是不是功能都能跑,但看起來就是很「AI」?
不是說 AI 做得差。而是所有人都在用同一種方式跟 AI 溝通設計,出來的東西當然長一樣。上禮拜 Google 正式提出「Vibe Design」這個概念,同時發了 Stitch 的大更新——這件事讓我認真想了很久。 1️⃣ 為什麼 AI 做的設計都長一樣? 老實說,這問題我卡了很久。 我之前做網站,都是打一段 prompt 說「我要現代簡約風,用白底黑字,按鈕要圓角」,然後等 AI 吐出設計。每次看到成果,覺得…可以用,但就是少了什麼。 後來我發現問題不在 AI,在我。 當我用「文字」描述設計,AI 只能靠自己的訓練資料去「想像」我說的那個畫面。而訓練資料裡最多的「現代簡約風」長什麼樣?就是那個樣。同色調、同排版節奏、同圓角大小。換一百個工具、換一百個 prompt,出來的差異其實不大——因為大家都在餵 AI 同樣的文字描述。 這就是「AI 味」的根源:不是 AI 懶,是我們給的輸入太抽象。 2️⃣ Vibe Design 是什麼?為什麼 Figma 股價當天跌了 8.8%? Google 3/18 正式提出「Vibe Design」這個概念,核心很簡單: ❌ 舊方式:用文字告訴 AI 你要什麼風格 ✅ 新方式:用視覺參考讓 AI 照著做 就這樣。但這個差異,真的超大。 文字是抽象的,「溫暖」「專業」「俐落」每個人腦海裡的畫面不一樣。但視覺是具體的,你截一張你喜歡的網站截圖丟進去,AI 看到的跟你看到的是同一件事。 這件事讓 Figma 股價當天跌了 8.8%。市場的解讀很直接:如果不懂設計的人也能做出有個性的設計,Figma 的護城河變窄了。 3️⃣ Stitch 這次更新了什麼?五個功能逐一拆解 我把五個功能都試過一遍,說說實際感受。 🎨 無限畫布(Canvas) 以前用 Stitch 是:輸入一句話 → 等它吐設計 → 不滿意再輸入一句話修改。其實很像跟聊天機器人在磨。 現在有了無限畫布,整個工作方式完全不同。你可以把參考截圖、文字說明、甚至某段程式碼片段,全部丟到同一個畫布上。AI 看的是整體上下文,不是單一指令。這個感覺真的比較像在跟設計師合作,而不是在下指令。 🧠 設計 Agent 這個功能我覺得最實用。 以前每次打開 Stitch 修改,它不記得你上次改了什麼、為什麼改、你的整體風格在哪裡。每次都要重新說一遍背景。現在 Agent 會記住整個專案的修改歷史,你說「把上次那個配色再試一次」它真的知道你在說哪個。 更厲害的是可以並行嘗試。想同時跑三種首頁風格比較?它同時幫你跑三個版本,互不干擾。 🎙️ 語音輸入(Voice) 老實說一開始我覺得這個花俏大於實用。 試過之後改觀了。邊看設計稿邊說「按鈕大一點」「配色換暖色調」「導覽列改深色」,比停下來打字流暢超多。特別是在做細節微調的時候,手不用離開滑鼠,說就行了。 ⚡ 即時原型(Prototyping) 設計稿點一下直接變可點選的互動原型,按鈕該跳哪個頁面自動算好。不用手動在 Figma 連線。 這個省了我超多時間,尤其是需要快速驗證使用者流程的時候。 📐 DESIGN.md 這個功能最低調,但我認為長期來說最重要。 DESIGN.md 是把你的設計規格——配色系統、字體規範、間距邏輯、風格設定——全部整理成一個標準格式的文件。然後 Claude Code、Cursor、任何 AI 寫程式工具都讀得懂這份文件。 以前設計規範鎖死在 Figma 裡,工程師要看、AI 要理解,都要額外轉一道。現在一份 DESIGN.md 可以直接跨工具使用,設計到開發的落差大幅縮短。 全部功能免費。Stitch 目前每日有 15 次免費 redesign 額度。 4️⃣ 我的實際工作流程:三步從截圖到上線 我現在的流程是這樣: 第一步,找一個我喜歡的網站截圖,丟進 stitch.withgoogle.com,讓 Stitch 照著那個視覺風格重新設計我的頁面。這一步解決的是「個性問題」——我給 AI 一個真人的參考,而不是一段抽象描述。 第二步,在畫布上調整細節,調到滿意為止,然後讓 Stitch 產出 DESIGN.md。這份文件就是我的設計藍圖,記錄了所有視覺決策。 第三步,把 DESIGN.md 丟給 Claude Code,讓它按照藍圖寫前端代碼,直接部署上線。 整個流程不需要會 Figma,不需要懂設計理論。 5️⃣ 真正的轉變不是工具,是輸入方式 AI 做的東西不醜,只是沒有個性。 這句話我想多說一點。「AI 味」不是因為 AI 能力不夠,是因為我們一直用文字當輸入,文字太抽象,AI 只能往平均值靠。你想要突破平均值,就要給 AI 一個明確的錨點——一個視覺參考,一個真實存在的設計,告訴它「往這個方向走,不是那個方向」。