不會設計也能做站：我用 OpenClaw + Stitch 2.0 半小時出了整套設計稿和代碼

大家好，我係孟健。

我用 Google Stitch 2.0 + OpenClaw，30分鐘整咗一套完整嘅 Landing Page 設計稿——連 HTML/CSS 代碼，可以直接交畀開發。

唔需要 Figma，唔需要設計基礎，唔需要請設計師。你只要一段文字描述，Stitch 就可以生成高保真設計 + Tailwind 代碼。

今日完整拆解：點樣接入 Stitch、點樣寫 prompt 先出到好設計、點樣避免「一眼 AI 味」、同埋整套設計流程嘅每一步具體操作。

01 Stitch 2.0 係乜：唔係 Figma 插件，而係獨立嘅 AI 設計平台

Google 今年推出嘅免費 AI 設計工具。核心能力：

• 你用文字描述想要嘅頁面 → 佢生成高保真設計（唔係線框圖，係真實網站效果）
• 同時輸出完整 HTML/CSS 代碼（Tailwind），可以直接用
• 支援多屏原型、Design System 自動生成、一鍵導出 Astro 項目

同其他 AI 設計工具嘅分別：

Stitch 嘅差異化在於：佢係 Google 做嘅，設計審美比同類工具高一個檔次，而且完全免費。

02 接入 Stitch：兩種方式

方式一：網頁版（最簡單，適合手動操作）

1. 打開 stitch.withgoogle.com
2. 用 Google 賬號登入
3. 建立項目，輸入描述，等 2 分鐘
4. 拎到設計稿 + 代碼

方式二：MCP 命令行（適合自動化，OpenClaw 用呢種）

# 安裝 stitch-mcp CLI
npm install -g @_davideast/stitch-mcp

# 認證（需要 Google Cloud 賬號）
gcloud auth application-default login
# 或者用 Stitch API Key（從 Stitch 設置頁獲取）
export STITCH_API_KEY="your_key"

MCP 核心命令：

# 創建項目
npx @_davideast/stitch-mcp tool create_project \
  -d '{"title": "CharGen.ai"}'

# 從文本生成設計稿
npx @_davideast/stitch-mcp tool generate_screen_from_text \
  -d '{"projectId": "xxx", "prompt": "你的描述", "deviceType": "DESKTOP"}'

# 獲取 HTML/CSS 代碼
npx @_davideast/stitch-mcp tool get_screen_code \
  -d '{"projectId": "xxx", "screenId": "yyy"}'

# 導出完整 Astro 項目
npx @_davideast/stitch-mcp tool build_site \
  -d '{"projectId": "xxx"}'

喺 OpenClaw 裏面，墨影（設計 Agent）直接叫呢啲命令，全自動。

03 Prompt 點樣寫：8 個字段，缺一不可

Stitch 嘅輸出質量 90% 取決於你嘅 prompt。亂咁寫一句「幫我做一個 AI 工具嘅落地頁」，出嚟嘅就係千篇一律嘅 AI 味模板。

一個好嘅 Stitch prompt 包含 8 個字段：

1. 產品名 + 一句話定位
   CharGen.ai — AI 角色生成器，一鍵生成角色頭像+完整人設卡

2. 目標用戶
   DnD 玩家、小說創作者、獨立遊戲開發者

3. 配色要求
   深色底（#0A0F1C）+ 賽博青（#00E5CC）強調 + 琥珀金輔助

4. 頁面結構（逐 section 描述）
   Hero：暗色背景 + 發光輸入框 + 右側浮現角色卡預覽
   Gallery：3 個不同類型角色卡（戰士/動漫/科幻）
   How It Works：3 步流程（描述→生成→導出）
   Use Cases：DnD / 小說 / 遊戲 / Anime 四張卡片
   Features：高對比特性網格
   Pricing：Pro 用賽博青發光邊框
   FAQ：暗色手風琴
   Footer：簡潔連結

5. 消息層級
   主標題：Generate Characters Instantly
   副標題：Portrait + backstory + stats in 30 seconds
   CTA：Create My Character — Free

6. 定價信息
   Free：3/天 | Pro $9/月（200次）| Lifetime $199

7. 設計調性關鍵詞
   Gaming、Fantasy、Premium、Dark Mode

8. 反 AI 味要求（重要！）
   不要紫藍漸變、不要對稱 3 列、不要 emoji 做 icon、
   不要每個 section 背景色交替白/灰

點解要寫「反 AI 味要求」？

因為 AI 生成嘅設計有啲典型特徵——紫藍漸變、完美對稱三列佈局、抽象 3D 球體、大量 emoji 做 icon。用戶一眼就睇得出「呢個係 AI 做嘅」。

喺 prompt 裏面明確話「唔要呢啲」，輸出質量會好好多。

04 實戰：chargen.ai 嘅設計係點樣出嚟嘅

我哋用上面嘅 8 字段 prompt，畀 Stitch 生成了 chargen.ai 嘅 Landing Page。

2分鐘後，Stitch 返回咗一個完整嘅頁面設計。下面係實際產出，1440px 寬度實際解像度截圖：

Hero 區：深色背景 + 賽博青強調 + 右側浮現角色卡（帶屬性值 STR/DEX/INT），左側輸入框 placeholder "Describe a cybernetic knight in neon armor..."

角色畫廊：3個唔同風格嘅示例角色（戰士、動漫少女、魔法師），展示生成能力嘅多樣性。

How It Works + 場景展示：3步流程 + 使用場景說明。

Features Grid：6大功能——圖片+人設一鍵生成、多風格模板、結構化導出、DnD 模式、Anime 風格、快速生成。每個功能配獨立場景配圖。

Pricing 區（截圖裏面仲有 FAQ 部分）：

同時自動生成咗 Design System 「Aether Forge」：

• 字體：Space Grotesk
• 主色：深色 #0A0F1C 底 + 賽博青 #00E5CC
• 琥珀金輔助色
• 圓角、陰影、間距全部定義好

而且輸出咗完整嘅 HTML/CSS 代碼——13KB+ 嘅 Tailwind 代碼，直接用得。

05 設計審查：出嚟之後仲要檢查啲乜

Stitch 嘅輸出質量好高，但唔係拎嚟就可以直接上線。有 7 項必須檢查：

Stitch 專屬檢查清單：

• 配色係咪同你想要嘅一致
  （有時 Stitch 會微調色值）
• 文案係咪用咗佔位符
  （Stitch 成日用 Lorem ipsum 或自己編嘅文案）→ 必須換成你嘅定稿文案
• 圖片係咪用咗 Google CDN 臨時圖
  （src 指向 Google 伺服器）→ 必須換成你自己嘅圖
• 有冇 emoji 做 icon
  （有嘅話叫開發換成 SVG）
• 手機端響應式係咪合理
  （大部分時候 Tailwind 處理得唔錯，但複雜佈局要檢查）
• 字體係咪同品牌要求一致
  （Stitch 可能用預設字體）
• 定價數字係咪用咗審查後嘅版本
  （唔係 PRD 原始數字）

反 AI 味二次檢查：

❌ 紫藍漸變 + 白色大標題 + 居中佈局

❌ 所有 icon 同一套線性圖標 + 完美對稱 3 列

❌ Hero 區放抽象 3D 渲染球體

❌ 每個 section 背景色交替白/灰

❌ 「Revolutionize」 / 「Empower」 / 「Seamless」 呢類 AI 味文案

06 精修同迭代：唔滿意就改

Stitch 支援喺已有設計上迭代。唔需要從頭嚟過。

# 修改已有設計
npx @_davideast/stitch-mcp tool edit_screens -d '{
  "projectId": "xxx",
  "prompt": "把 Hero 區的輸入框改成圓角更大的樣式，CTA 按鈕換成琥珀金色",
  "screenIds": ["yyy"]
}'

常見精修：

• 調整配色細節
• 改 section 順序
• 換 Hero 模式（Tool-First / Demo-First / Split）
• 補返缺少嘅 section

精修一次 2 分鐘。傳統設計改稿要半日。

07 SEO 矩陣頁：批量生成子頁面

工具站唔止一個首頁。PRD 裏面定義咗 6 個子場景頁（anime / dnd / fantasy / game / oc / random），每個有獨立嘅目標關鍵詞。

傳統方式：每個頁面單獨設計 → 20 分鐘/頁 × 6 = 120 分鐘

Stitch 方式：基於已有設計改 prompt → 2 分鐘/頁 × 6 = 12 分鐘

npx @_davideast/stitch-mcp tool generate_screen_from_text -d '{
  "projectId": "xxx",
  "prompt": "基於已有 Landing Page 風格，為 anime character generator 
  生成專屬頁面。Hero 標題改為 AI Anime Character Generator。
  Demo 示例換成動漫角色。Use Cases 聚焦動漫創作者。
  保持相同 Design System。",
  "deviceType": "DESKTOP"
}'

同一套 Design System，唔同嘅內容同側重，批量出曬。

08 代碼導出：拎走就可以開發

最後一步：將設計稿嘅代碼導出嚟。

# 導出單個頁面的 HTML/CSS
npx @_davideast/stitch-mcp tool get_screen_code \
  -d '{"projectId": "xxx", "screenId": "yyy"}'

# 導出完整 Astro 項目（所有頁面打包）
npx @_davideast/stitch-mcp tool build_site \
  -d '{"projectId": "xxx"}'

開發拎到之後做啲乜：

09 完整流程同時間對比

傳統流程：

1. 睇競品 → 10 分鐘
2. 畫線框圖 → 30 分鐘
3. Figma 出高保真 → 2-4 小時
4. 開發還原設計 → 1-2 日
5. 改稿 × 3 輪 → 半日
6. 總計：2-3 日

Stitch 流程：

1. 睇競品 → 10 分鐘
2. 寫 8 字段 prompt → 5 分鐘
3. Stitch 生成 3 個方向 → 6 分鐘（2 分鐘 × 3）
4. 揀方向 + 精修 → 5 分鐘
5. 檢查 + 導出代碼 → 5 分鐘
6. SEO 矩陣頁（6 個）→ 12 分鐘
7. 總計：~45 分鐘

由 2-3 日壓縮到 45 分鐘。而且輸出嘅唔係設計圖，而係可以直接用嘅代碼。

10 你自己動手需要啲乜

1. Google 帳號
   （Stitch 完全免費）
2. PRD 或者至少知道頁面要有邊啲 section
   （冇結構就開始做設計 = 返工）
3. 文案定稿
   （冇文案就開始做設計 = 返工 × 2）
4. 競品 URL 2-3 個
   （唔睇競品就開始做 = 同人哋一模一樣）

如果要自動化（OpenClaw 方式）：
5. 安裝 stitch-mcp CLI
6. 設定 gcloud 認證或 Stitch API Key
7. 畀設計 Agent 寫一個 playbook（包含 8 字段 prompt 模板 + 7 項檢查清單）

📍 最後講一句。

以前獨立開發者做站最頭痛嘅就係設計。代碼你會寫，文案你想得到，但設計——一係俾錢請人，一係自己整出一個「技術人審美」嘅頁面。

Stitch 2.0 將呢個門檻徹底拉平咗。免費、唔使設計基礎、輸出質量高、仲帶埋代碼。

你而家唯一需要嘅能力係寫一段好嘅 prompt。而好嘅 prompt 就係上面嗰 8 個字段——產品定位、目標用戶、配色、頁面結構、消息層級、定價、調性、反 AI 味。

工具就擺喺度。30 分鐘，出一套以前要設計師花三日嘅頁面。

你打算做乜嘢站？留言區傾，我每條都睇。

🚀 想同更多 AI 愛好者交流，一齊成長嗎？

同一班志同道合嘅人，持續精進 AI 嘅每日

大家好，我是孟健。

我用 Google Stitch 2.0 + OpenClaw，30 分鐘出了一套完整的 Landing Page 設計稿——帶 HTML/CSS 代碼，可以直接交給開發。

不需要 Figma，不需要設計基礎，不需要請設計師。你只需要一段文字描述，Stitch 就能生成高保真設計 + Tailwind 代碼。

今天完整拆解：怎麼接入 Stitch、怎麼寫 prompt 才能出好設計、怎麼避免"一眼 AI 味"、以及整套設計流程的每一步具體操作。

01 Stitch 2.0 是什麼：不是 Figma 插件，是獨立的 AI 設計平台

Google 今年推出的免費 AI 設計工具。核心能力：

• 你用文字描述想要的頁面 → 它生成高保真設計（不是線框圖，是真實網站效果）
• 同時輸出完整 HTML/CSS 代碼（Tailwind），可以直接用
• 支持多屏原型、Design System 自動生成、一鍵導出 Astro 項目

跟其他 AI 設計工具的區別：

Stitch 的差異化在於：它是 Google 做的，設計審美比同類工具高一個檔次，而且完全免費。

02 接入 Stitch：兩種方式

方式一：網頁版（最簡單，適合手動操作）

1. 打開 stitch.withgoogle.com
2. Google 賬號登錄
3. 創建項目，輸入描述，等 2 分鐘
4. 拿到設計稿 + 代碼

方式二：MCP 命令行（適合自動化，OpenClaw 用這種）

# 安裝 stitch-mcp CLI
npm install -g @_davideast/stitch-mcp

# 認證（需要 Google Cloud 賬號）
gcloud auth application-default login
# 或者用 Stitch API Key（從 Stitch 設置頁獲取）
export STITCH_API_KEY="your_key"

MCP 核心命令：

# 創建項目
npx @_davideast/stitch-mcp tool create_project \
  -d '{"title": "CharGen.ai"}'

# 從文本生成設計稿
npx @_davideast/stitch-mcp tool generate_screen_from_text \
  -d '{"projectId": "xxx", "prompt": "你的描述", "deviceType": "DESKTOP"}'

# 獲取 HTML/CSS 代碼
npx @_davideast/stitch-mcp tool get_screen_code \
  -d '{"projectId": "xxx", "screenId": "yyy"}'

# 導出完整 Astro 項目
npx @_davideast/stitch-mcp tool build_site \
  -d '{"projectId": "xxx"}'

在 OpenClaw 裏，墨影（設計 Agent）直接調這些命令，全自動。

03 Prompt 怎麼寫：8 個字段，缺一不可

Stitch 的輸出質量 90% 取決於你的 prompt。亂寫一句"幫我做一個 AI 工具的落地頁"，出來的就是千篇一律的 AI 味模板。

一個好的 Stitch prompt 包含 8 個字段：

1. 產品名 + 一句話定位
   CharGen.ai — AI 角色生成器，一鍵生成角色頭像+完整人設卡

2. 目標用戶
   DnD 玩家、小說創作者、獨立遊戲開發者

3. 配色要求
   深色底（#0A0F1C）+ 賽博青（#00E5CC）強調 + 琥珀金輔助

4. 頁面結構（逐 section 描述）
   Hero：暗色背景 + 發光輸入框 + 右側浮現角色卡預覽
   Gallery：3 個不同類型角色卡（戰士/動漫/科幻）
   How It Works：3 步流程（描述→生成→導出）
   Use Cases：DnD / 小說 / 遊戲 / Anime 四張卡片
   Features：高對比特性網格
   Pricing：Pro 用賽博青發光邊框
   FAQ：暗色手風琴
   Footer：簡潔連結

5. 消息層級
   主標題：Generate Characters Instantly
   副標題：Portrait + backstory + stats in 30 seconds
   CTA：Create My Character — Free

6. 定價信息
   Free：3/天 | Pro $9/月（200次）| Lifetime $199

7. 設計調性關鍵詞
   Gaming、Fantasy、Premium、Dark Mode

8. 反 AI 味要求（重要！）
   不要紫藍漸變、不要對稱 3 列、不要 emoji 做 icon、
   不要每個 section 背景色交替白/灰

為什麼要寫"反 AI 味要求"？

因為 AI 生成的設計有一些典型特徵——紫藍漸變、完美對稱三列布局、抽象 3D 球體、大量 emoji 做 icon。用戶一眼就能看出來"這是 AI 做的"。

在 prompt 裏明確說"不要這些"，輸出質量會好很多。

04 實戰：chargen.ai 的設計是怎麼出來的

我們用上面的 8 字段 prompt，給 Stitch 生成了 chargen.ai 的 Landing Page。

2 分鐘後，Stitch 返回了一個完整的頁面設計。下面是實際產出，1440px 寬度實際分辨率截圖：

Hero 區：深色背景 + 賽博青強調 + 右側浮現角色卡（帶屬性值 STR/DEX/INT），左側輸入框 placeholder "Describe a cybernetic knight in neon armor..."

角色畫廊：3 個不同風格的示例角色（戰士、動漫少女、魔法師），展示生成能力的多樣性。

How It Works + 場景展示：3 步流程 + 使用場景說明。

Features Grid：6 大功能——圖片+人設一鍵生成、多風格模板、結構化導出、DnD 模式、Anime 風格、快速生成。每個功能配獨立場景配圖。

Pricing 區（截圖裏還有 FAQ 部分）：

同時自動生成了 Design System "Aether Forge"：

• 字體：Space Grotesk
• 主色：深色 #0A0F1C 底 + 賽博青 #00E5CC
• 琥珀金輔助色
• 圓角、陰影、間距全部定義好

並且輸出了完整的 HTML/CSS 代碼——13KB+ 的 Tailwind 代碼，直接可用。

05 設計審查：出來後還要檢查什麼

Stitch 的輸出質量很高，但不是拿來就能直接上線。有 7 項必須檢查：

Stitch 專屬檢查清單：

• 配色是否和你要的一致
  （有時 Stitch 會微調色值）
• 文案是否用了佔位符
  （Stitch 經常用 Lorem ipsum 或自己編的文案）→ 必須替換成你的定稿文案
• 圖片是否用了 Google CDN 臨時圖
  （src 指向 Google 服務器）→ 必須替換成你自己的圖
• 有沒有 emoji 做 icon
  （有的話讓開發替換成 SVG）
• 移動端響應式是否合理
  （大部分時候 Tailwind 處理得不錯，但複雜佈局要檢查）
• 字體是否和品牌要求一致
  （Stitch 可能用默認字體）
• 定價數字是否用了審查後的版本
  （不是 PRD 原始數字）

反 AI 味二次檢查：

❌ 紫藍漸變 + 白色大標題 + 居中佈局

❌ 所有 icon 同一套線性圖標 + 完美對稱 3 列

❌ Hero 區放抽象 3D 渲染球體

❌ 每個 section 背景色交替白/灰

❌ "Revolutionize" / "Empower" / "Seamless" 這類 AI 味文案

06 精修和迭代：不滿意就改

Stitch 支持在已有設計上迭代。不需要從頭重來。

# 修改已有設計
npx @_davideast/stitch-mcp tool edit_screens -d '{
  "projectId": "xxx",
  "prompt": "把 Hero 區的輸入框改成圓角更大的樣式，CTA 按鈕換成琥珀金色",
  "screenIds": ["yyy"]
}'

常見精修：

• 調配色細節
• 改 section 順序
• 換 Hero 模式（Tool-First / Demo-First / Split）
• 補缺少的 section

精修一次 2 分鐘。傳統設計改稿要半天。

07 SEO 矩陣頁：批量生成子頁面

工具站不只有一個首頁。PRD 裏定義了 6 個子場景頁（anime / dnd / fantasy / game / oc / random），每個有獨立的目標關鍵詞。

傳統方式：每個頁面單獨設計 → 20 分鐘/頁 × 6 = 120 分鐘

Stitch 方式：基於已有設計改 prompt → 2 分鐘/頁 × 6 = 12 分鐘

npx @_davideast/stitch-mcp tool generate_screen_from_text -d '{
  "projectId": "xxx",
  "prompt": "基於已有 Landing Page 風格，為 anime character generator 
  生成專屬頁面。Hero 標題改為 AI Anime Character Generator。
  Demo 示例換成動漫角色。Use Cases 聚焦動漫創作者。
  保持相同 Design System。",
  "deviceType": "DESKTOP"
}'

同一套 Design System，不同的內容和側重，批量出完。

08 代碼導出：拿走就能開發

最後一步：把設計稿的代碼導出來。

# 導出單個頁面的 HTML/CSS
npx @_davideast/stitch-mcp tool get_screen_code \
  -d '{"projectId": "xxx", "screenId": "yyy"}'

# 導出完整 Astro 項目（所有頁面打包）
npx @_davideast/stitch-mcp tool build_site \
  -d '{"projectId": "xxx"}'

開發拿到後做什麼：

09 完整流程和時間對比

傳統流程：

1. 看競品 → 10 分鐘
2. 畫線框圖 → 30 分鐘
3. Figma 出高保真 → 2-4 小時
4. 開發還原設計 → 1-2 天
5. 改稿 × 3 輪 → 半天
6. 總計：2-3 天

Stitch 流程：

1. 看競品 → 10 分鐘
2. 寫 8 字段 prompt → 5 分鐘
3. Stitch 生成 3 個方向 → 6 分鐘（2 分鐘 × 3）
4. 選方向 + 精修 → 5 分鐘
5. 檢查 + 導出代碼 → 5 分鐘
6. SEO 矩陣頁（6 個）→ 12 分鐘
7. 總計：~45 分鐘

從 2-3 天壓縮到 45 分鐘。而且輸出的不是設計圖，是可直接使用的代碼。

10 你自己動手需要什麼

1. Google 賬號
   （Stitch 完全免費）
2. PRD 或至少知道頁面要有哪些 section
   （沒有結構就開始做設計 = 返工）
3. 文案定稿
   （沒有文案就開始做設計 = 返工 × 2）
4. 競品 URL 2-3 個
   （不看競品就開始做 = 跟別人長一樣）

如果要自動化（OpenClaw 方式）：
5. 安裝 stitch-mcp CLI
6. 配置 gcloud 認證或 Stitch API Key
7. 給設計 Agent 寫一個 playbook（包含 8 字段 prompt 模板 + 7 項檢查清單）

📍 最後說一句。

以前獨立開發者做站最頭疼的就是設計。代碼你會寫，文案你能想，但設計——要麼花錢請人，要麼自己做出一個"技術人審美"的頁面。

Stitch 2.0 把這個門檻徹底拉平了。免費、無需設計基礎、輸出質量高、還帶代碼。

你現在唯一需要的能力是寫一段好的 prompt。而好的 prompt 就是上面那 8 個字段——產品定位、目標用戶、配色、頁面結構、消息層級、定價、調性、反 AI 味。

工具就擺在那裏。30 分鐘，出一套以前需要設計師花三天的頁面。

你打算做什麼站？評論區聊，我每條都看。

🚀 想要與更多AI愛好者交流，共同成長嗎？

和一羣志同道合的人，持續精進 AI 的每一天