08-開發前的準備：品味，用 Google Stitch 讓你的產品，看起來不像 AI 做的
上一篇的結尾，我留了一個微妙的問題給你：產品做出來了、也安全了，但看起來就是有一股說不上來的「AI 味」。
你一定看過那種網站。功能都對，排版也沒錯，但就是……平。配色是最安全的藍色、按鈕是最標準的圓角、字體是預設的那一套。看一眼就知道：喔，AI 做的。
這一篇要解決的就是這件事。而且我要先講一個你可能沒想過的觀點：
在 AI 時代，品味比以前更值錢了，而不是更不值錢。
邏輯很簡單：當人人都能在一個下午做出「能跑的產品」，「能跑」就不再是差異化了。還記得我在 Co-founder 那篇說過的嗎？AI 幫你過的是及格線，不是贏的線。當所有人的及格線都一樣高，決定誰被記住的，就是那些及格線以上的東西。品味，就是其中最顯眼的一個。
好消息是：你不需要是設計師。你需要的是一個對的工具，加上一條對的工作流。
認識 Google Stitch：你的 AI 設計師
先介紹今天的主角：Google Stitch（stitch.withgoogle.com）。
這是 Google 推出的 AI 設計工具，用 Google 帳號登入就能用，免費額度對個人開發者來說相當夠用。它做的事情很純粹：你用文字描述你要的畫面，它直接生出網頁設計稿，而且是那種有完整配色、字體、排版邏輯的設計稿，一次還會給你好幾個版本讓你挑。
你可能會問：Codex 不是也會做網頁嗎？為什麼還要多一個工具？
因為它們是兩種人。Codex 是工程師，Stitch 是設計師。 工程師做出來的介面能用，但美感是「不出錯」等級的；Stitch 是 Google 專門為「設計」這件事訓練的工具，它吐出來的東西，有設計師的那種講究：留白、層次、配色的膽識。
我自己的產品，設計稿幾乎都是這樣來的。而接下來要教你的，是我把這兩個工具串起來的完整工作流，這條流程目前中文圈幾乎沒有人講過。
我的工作流：讓工程師幫你寫「給設計師的需求單」
大部分人用 Stitch 的方式，是自己打開網站、自己想一段描述、自己貼上去。
可以，但你會浪費它八成的實力。
想想看：你自己憑空寫的描述，會漏掉多少東西？目標用戶是誰、產品的氛圍該是什麼、有哪些畫面、每個畫面上有哪些元件、資訊的優先順序……這些你的腦袋裡都有個模糊的印象，但要在一段提示詞裡寫齊，非常難。
可是，有一個「人」對這些東西瞭若指掌——你的 Codex。 它讀過你的 PRD、讀過你的產品設計文件，整個產品它比誰都熟。
所以我的做法是：不要自己寫給 Stitch 的提示詞，叫 Codex 幫你寫。
用一句話總結這條工作流：誘導 Codex，去誘導 Stitch，讓它把設計師的本分做好。
實際的指令長這樣：
@PRD.md @產品設計文件.md
我要用 Google Stitch 幫這個產品生成網頁設計稿。
你的任務：替我寫一段要貼給 Stitch 的設計提示詞。
目標是讓 Stitch 一次就抓到重點，產出讓人驚艷的設計。
提示詞裡要涵蓋：這個產品是什麼、做給誰用、
整體該有的氛圍與情緒、主要畫面有哪些、
每個畫面的資訊優先順序，以及任何你認為
一個資深設計師開工前會想知道的事。
注意這段指令的寫法：我沒有教它「提示詞該有哪幾段、每段幾個字」。我給它的是目標：「讓 Stitch 一次就抓到重點，產出讓人驚艷的設計」。現在的 AI 已經夠聰明，你把目標講清楚，它自己會想辦法；你管得越細，反而把它限制得越死。這個心法先記住，下一篇我們還會大量用到。
幾秒鐘後，Codex 會給你一段完整的設計提示詞，這些內容全是從你的文件裡消化出來的。你自己寫，十之八九會漏。
實際跑一遍：從一句話，到一整套設計
概念講完，直接看畫面。我這邊隨手拿一個資產管理 App 當例子，把整條流程實際跑一遍給你看。
第一步，開一個新專案，把提示詞貼進去。 Stitch 首頁就是一個輸入框，把 Codex 幫你寫好的設計描述貼上去，上方選「應用程式」（要做網頁就選網頁），送出。我這次下的是一段「幫我設計一個資產管理錢包 App，展示持股比例、單獨顯示每一隻股票的歷史波動，首頁保持乾淨」的描述。
第二步，等幾十秒，看它一次生出什麼。 這是 Stitch 真正強的地方：它不是只給你一張圖，而是一整套。左邊是一份完整的設計系統，右邊是好幾個已經套用這套系統的手機畫面（股票詳情、資產首頁、持股比例）。整個產品的骨架，一次到位。
第三步，看懂那份設計系統，它才是重點。 把左邊那份設計系統放大來看：Stitch 幫你定好了主色（Primary #0066FF）、次色（Secondary #10B981）、第三色、中性色，還有三種字體階層（標題、內文、標籤），連按鈕、輸入框、圖示的樣式都一起定義好了。
這一步就是「不像 AI 做的」的技術核心。 一般人用 AI 做產品，每個頁面是分開生的，所以 A 頁一個藍、B 頁另一個藍，字體也各長各的，拼起來就廉價。Stitch 幫你把整個產品統一在同一套主色、次色、字體上，你的每一個畫面都從同一份設計系統長出來，才不會翻一頁就像換了一個產品。
第四步，哪裡不滿意，選起來，直接用講的改。 點任何一個畫面，它會被選取，輸入框上就會掛著那個畫面的名字，接著你把想改的地方用白話講出來就好，跟一個設計師溝通沒兩樣。
第五步，看它改的時候「整套一起變」。 我直接叫它「將整體風格改為極簡淺色模式」，它就把所有畫面連同那份設計系統一起換成白底淺色版。注意這裡：改的不是單一頁，是整套同步變，一致性它自己幫你維持住。這就是有設計系統跟沒有設計系統的差別。
把整套設計帶回專案：匯出成 ZIP，拖進 Codex
設計滿意了，先別急著關掉。接下來這步，是整條流程真正的關鍵：把設計帶回你的專案，變成產品真正的畫面。
第一步，批量選取你最後要輸出的畫面。 框選你這次確定要用的那幾個畫面，它們會被藍框標起來。
第二步，點右上角「匯出」，格式選 .zip。 匯出面板裡其實有一排選項：直接送 Figma、MCP、Netlify、Lovable、Bolt 都行，但我們要的是把整包拿回本地交給 Codex，選 .zip 最單純。
第三步，把這包 ZIP 直接拖進 Codex。 這包壓縮檔裡除了每個畫面的前端程式碼，還附了一份 DESIGN.md（設計系統的完整規則）。拖進去之後，我下的指令是這樣：
這份壓縮檔包含完整的介面設計參考與 DESIGN.md。
我希望你可以：
1. 幫我修改所有設計，使目前的頁面跟該檔案中的設計一致
2. 把 DESIGN.md 拷貝進本專案中，並且永久記憶、
提醒未來做前端設計時都要遵守 DESIGN.md 的設計準則
看到指令的第 2 點了嗎？那句「永久記憶、以後都遵守 DESIGN.md」，就是這整篇文章最重要的一句話。為什麼？下一段講。
為什麼這一步最關鍵：把品味存成文件
Stitch 讓你帶走的兩樣東西裡，網頁模板只是起點，那份 DESIGN.md 才是寶貝。 它把整套設計的規則寫成一份文件：用了哪些顏色、什麼字體、間距的規律、按鈕跟卡片長什麼樣、滑鼠移上去該有什麼反應。
看到 .md 結尾，你應該條件反射了吧？沒錯，又是文件。永遠、永遠要存成文件。
把 DESIGN.md 留在你的專案資料夾，跟 PRD、產品設計文件排在一起。到這裡，你的產品已經有三份核心文件了，各管一件事：
| 文件 | 它回答的問題 |
|---|---|
| PRD.md | 這個產品做什麼、為誰做、做到哪為止 |
| 產品設計文件.md | 每個畫面怎麼驗收、每個操作該發生什麼 |
| DESIGN.md | 整個產品長什麼樣：配色、字體、間距的法律 |
從此之後，你叫 Codex 開發任何新頁面，開頭都帶上一句：
@DESIGN.md
幫我做設定頁。所有視覺，嚴格遵守 DESIGN.md 的設計系統。
這就是消滅「AI 味」的真正答案。AI 味的來源，從來不是 AI 不會設計。問題出在每個頁面都在自由發揮：A 頁一個風格、B 頁另一個風格，拼起來就是一股廉價感。一份 DESIGN.md，讓每一個新頁面都長在同一套規則上。你的產品開始有了「一致性」。而一致性，就是普通人感知到「這東西很專業」的真正來源。
還記得文件化那篇的核心嗎？AI 每開一個新對話就失憶。你的品味也一樣——不存成文件，它就只活在這一輪對話裡。 DESIGN.md 就是你的品味的 SSOT。
品味不是天賦，是紀律。挑一次、選一次、存一次文件，然後讓每一個新畫面都遵守它。
補充：把 Stitch 的技能也裝進 Codex
上面這套流程，是「你手動開 Stitch、手動貼、手動匯出」。跑順了之後，還能再進一步。
Google 官方出了一套 stitch-skills（google-labs-code/stitch-skills），是一組給 AI Coding 工具用的技能包，搭配 Stitch 的 MCP server，讓 Codex、Claude Code、Cursor 這些工具直接學會怎麼跟 Stitch 協作。裝好之後，前面那套「叫 Codex 寫提示詞、你再手動貼進 Stitch」的來回，有機會進一步收斂成「Codex 直接驅動 Stitch」。
安裝很簡單，一句話丟給 Codex：
幫我全域安裝 google-labs-code/stitch-skills 這個 Skill
這步是進階補充，不裝也能跑完上面整條流程。但如果你打算長期把 Stitch 排進工作流，裝一次，之後 Codex 跟 Stitch 之間的橋會更穩。
收尾
回顧這一篇，一條龍走下來是這樣：
- 叫 Codex 讀你的文件，替你寫給 Stitch 的設計提示詞：工程師最懂你的產品，讓它去跟設計師對接
- 貼進 Stitch，看它一次生出設計系統 + 多個畫面：整個產品統一在同一套主色、次色、字體上
- 選畫面、用講的改：當個挑剔的甲方，來回迭代到「哇」為止
- 批量選取、匯出成 ZIP、拖回 Codex：叫它對齊設計、並把 DESIGN.md 永久記住
- 從此每個新頁面都
@DESIGN.md：一致性，就是專業感的來源
到這裡，你的產品不只能跑、夠安全，還長得像一個你敢驕傲展示的東西了。
但一人公司要的視覺，遠不只產品介面。你的講義、簡報、部落格文章、社群貼文，到處都需要圖，而且要好看、要成套、要快。下一篇是這一章的最後一個補充：我會把我批量生產插圖與資訊圖解的整套方法交給你，包括我睡前排隊、早上收圖的那套流程。我們下個單元見。