一、前言

Day27，妙筆俠客 Google Stitch 登場，
在畫布上把快問快答、吃金幣、俄羅斯方塊改了一版。

設計圖有了，接下來要照圖施工，把新門面裝進府裡！

長輩可能拿手機，也可能把平板立在桌上；
有人習慣直放、有人習慣橫放，還有人會把系統字級調到最大。

今天，俠客不只在畫布上作畫，
還要和 coding agent 搭上線，一起把設計帶回 App。

今天就讓我們看看：

Stitch 交出來的設計稿裡，有什麼可以帶回 App？
MCP、CLI、SDK、Agent Skills、DESIGN.md，各是什麼、差在哪？
AI 一起設計，跟 AI 自己改，差在哪？

二、Stitch 交出來的是什麼

（一）下載：一個 zip、三個檔

選好畫面，按 More → Download，會下載一個 zip，
解壓縮後有三個檔：

官方說明：
Stitch 的設計，有「圖片」和「HTML 程式碼」兩種輸出。

DESIGN.md 則是 跟著畫面一起放進 zip：
它是一份獨立的文件，離開 Stitch 也能用，

（二）匯出：送到其他工具

More → Export，可以把設計送到其他地方：

Export 是新功能（選單上標 NEW），官方文件還沒有說明；
標 PREVIEW 的選項還在預覽階段，這裡以介面為準（2026-10-12）。

（三）HTML：一整頁的網頁

HTML 是完整的網頁，樣式用 Tailwind CSS 寫在 class 裡。
例如作答畫面的選項按鈕：

<button class="h-[76px] rounded-xl border-[3px]
               border-outline bg-surface-container-lowest">
  <span class="w-12 h-12 rounded-lg bg-surface-variant">2</span>
  <span class="text-label-xl font-bold">綠豆</span>
</button>

從這幾行，讀得出設計的意圖：

• 按鈕高 76、圓角、3px 的外框。
• 序號放在 48 × 48 的方塊裡。
• 字級用 label-xl，DESIGN.md 裡定義是 24px、粗體（下一節）。

官方把 HTML 定位成 轉換的基礎：
LLM 拿 HTML 加上參考圖，可以轉成 React、Vue，
也可以轉成 Flutter、Jetpack Compose、SwiftUI 這類非網頁的框架。

HTML 是施工圖；變成 Flutter，要照圖再蓋一次。

（四）DESIGN.md：給 AI 讀的設計規則

官方說明：
DESIGN.md 是一份純文字的設計系統文件，人和 AI 都讀得懂、改得了。

官方拿它跟 AGENTS.md 對照：

一份 DESIGN.md 分成兩層：

• 上半部（YAML）：精確的設計 token，例如色碼、字型、間距。
• 下半部（Markdown）：為什麼這樣設計。

這兩層怎麼分工，DESIGN.md 的介紹頁 是這樣寫的：

token 給 AI 精確的數值，文字告訴它這些數值為什麼存在。

產生 DESIGN.md 有三種方式：

• ① 讓 Stitch 依描述產生
• ② 從現有的素材萃取
• ③ 自己手寫

① 依描述產生

這次的設計規則就是這樣來的：

第一個畫面產生時，Stitch 自動建了一份。
在畫布上按 Modify → DESIGN.md，就看得到它：

檔案內容節錄如下：

---
name: Warm Clarity Senior Quiz
colors:
  surface: '#f9f9fc'
  on-surface: '#1a1c1e'
  primary: '#005445'
  primary-container: '#0d6e5c'
  outline: '#6f7975'
typography:
  label-xl:
    fontFamily: Noto Sans
    fontSize: 24px
    fontWeight: '700'
---

## Colors
- Primary (#0D6E5C 深松青綠)：主要行動按鈕底色。
  搭配純白文字時對比度高達 6.3:1……

② 從現有的素材萃取

官方說明：
給它網址或圖片，它會找出配色、字型和風格，
照已經有的東西寫成 DESIGN.md。

入口在同一個面板的 Start with your design，
介面上能當素材的，比文件寫的還多：

這次實際試了一次：

上傳三張原版 App 的截圖，
補充說明寫「照現在的樣子萃取，不要重新設計」。

同樣的三張 App 截圖，分別在原本的專案、新開的專案各跑一次：

• 原本的專案：主色跟 Warm Clarity 一模一樣，原版的深色底不見了。
• 新開的專案：抓回原版的深色底、綠色和紅色。
• 原版的黃色重點色（#FFE600），兩次都沒有出現。

萃取完，要對照原本的設計再核對一次。

③ 自己手寫

官方說明：
進階使用者可以直接手寫，把想要的設計精確地寫進去。

每一段都只是 Markdown，開頭可以再加 YAML 放設計 token；
除了標準的 Markdown 和 YAML，沒有特殊語法。

段落的順序照 DESIGN.md 規格：

Overview → Colors → Typography → Layout → … → Do's and Don'ts，

用不到的段落可以省略。

（五）對到 Flutter 的主題

App 的顏色集中在 app_theme.dart，DESIGN.md 的 token 可以這樣對過去：

節錄 app_theme.dart 裡表格第一列「colors → ColorScheme」的部分，
註解標示每個值來自 DESIGN.md 的哪個 token：

ThemeData buildLightTheme() => ThemeData(
  colorScheme: ColorScheme.fromSeed(
    // primary-container: '#0d6e5c'，當作產生整組配色的種子色
    seedColor: const Color(0xFF0D6E5C),
    brightness: Brightness.light,
  ).copyWith(
    // primary: '#005445'，按鈕綠，白字 8.92:1
    primary: kPrimaryDeep,
    // surface: '#f9f9fc'，底色
    surface: kPaper,
    // on-surface: '#1a1c1e'，文字
    onSurface: kInk,
  ),
  useMaterial3: true,
);

搬的時候，有兩個地方沒有照抄：

• 按鈕綠：DESIGN.md 寫白字配 #0D6E5C「高達 6.3:1」，
  用 WCAG 公式重算是 6.17:1，沒到主要文字 7:1；
  改用同一份色票裡更深的 primary #005445（8.92:1）。
• 字型：Plus Jakarta Sans、Noto Sans 沒有中文字，
  中文會退回系統字型，所以沒有搬。

DESIGN.md 裡的數字，帶回 App 前自己再算一次。

三、讓 coding agent 操作 Stitch

Day27 是自己在網頁上點選、輸入提示詞。
整個 App 有幾十個畫面，一個一個上傳、下載、比對，會比較花時間。

Stitch 也替開發者準備了入口，讓 coding agent 直接操作 Stitch。

（一）MCP 是什麼

MCP（Model Context Protocol）是一個開放的協定，
規定 AI 應用程式怎麼接上外部的工具和資料。

MCP 官方網站 用 USB-C 比喻它：
一個標準的接口，各種工具都能接上。

Stitch 的 MCP 伺服器，
讓 Cursor、Antigravity、Gemini CLI 這些 AI 工具，
直接操作你的 Stitch 專案。

官方特別說明，它跟一般的 MCP 伺服器不一樣：

大部分的 MCP 伺服器在本機（Local），讀電腦裡的檔案、跑電腦上的指令；
Stitch 是遠端（Remote）的 MCP 伺服器，在雲端。
所以要先確認身分：代替你操作的 AI 工具，真的有權限改你的設計。

確認身分的方式有兩種：

（二）五種入口，各是什麼

MCP 是接上 Stitch 的其中一種方式。

Stitch 官方文件 列給開發者的入口，一共有五種：

它們不是五套各自獨立的東西：

• SDK 建在 MCP 上：

  官方說明 SDK 連的就是同一台 MCP 伺服器，
  工具跟 AI agent 用的一模一樣。

• Agent Skills 也透過 MCP：

  技能 是寫好的步驟說明，
  告訴 agent 該用哪些工具、照什麼順序，例如把畫面轉成 React 元件。

• CLI 是終端機版：

  另外有擷取本機網頁、比對 DESIGN.md 的工具，
  對象是網頁的開發伺服器。

• DESIGN.md 是共用的規則：

  不管從哪個入口產生畫面，都可以照同一份。

MCP 是地基；SDK、Agent Skills 蓋在上面，DESIGN.md 是大家共用的規則。

（三）這次怎麼選

這個 App 是 Flutter，不是網頁，CLI 的擷取、比對工具用不上。

需要的是：
在對話裡請 Stitch 畫、看結果、再請它改。

SDK 也能上傳圖片，但要另外寫 TypeScript；
這次只上傳幾張截圖，用 CLI 一行指令就夠。

（四）用 Claude Code 接上 Stitch MCP

1. 建立 API 金鑰

Stitch 右上角的設定 → API key → Create key，
建好之後先複製起來。

官方提醒：
金鑰不要放在公開的地方、不要 commit 到公開的程式庫。
設定頁也寫著：公開出現的金鑰，會被自動停用。

2. 加入 MCP

在專案資料夾的終端機執行（macOS 預設的 zsh）：

read -s "KEY?貼上 Stitch API 金鑰："; echo
claude mcp add-json stitch "{\"type\":\"http\",\
\"url\":\"https://stitch.googleapis.com/mcp\",\
\"headers\":{\"X-Goog-Api-Key\":\"$KEY\"},\
\"timeout\":600000}"
unset KEY
claude mcp list

• read -s：貼上的金鑰不會顯示，也不會留在指令紀錄。
• "timeout": 600000：等候上限拉長到 10 分鐘（見下方說明）。
• 看到 stitch: … ✔ Connected 就接上了；
  重開 Claude Code，對話裡才會出現 Stitch 的工具。

Stitch 產生一個畫面要一、兩分鐘，官方工具說明 也提醒不要重試；
而 Claude Code 對 HTTP 的 MCP 伺服器，預設 60 秒內沒收到回應就中斷。
Stitch 設定頁產生的 claude mcp add 指令沒有 timeout 參數，所以改用 add-json。

3. 登入 CLI，上傳參考圖

npx -y @google/stitch@0.11.1 login
npx -y @google/stitch@0.11.1 upload screen 04_quiz_home.png \
  --project <專案 ID>

• login 會打開瀏覽器，用 Google 帳號登入；
  要跟建 API 金鑰的是同一個帳號。
• 上傳之後，畫布上會多一張參考圖，有自己的畫面 ID。

（五）一次來回長什麼樣子

接上之後，Claude Code 用 MCP 的工具操作 Stitch。
這次用到四個：

以作答畫面為例，
對上傳的原版截圖呼叫 edit_screens：

edit_screens
  selectedScreenIds: ["7978104963828594464"]   原版作答畫面的截圖
  deviceType: MOBILE
  modelId: GEMINI_3_8_FLASH
  prompt: Idea……Theme……Content……Image……（Day27 的四段式）

一兩分鐘後，Stitch 回來的內容有：

• 新畫面的 ID、標題、截圖和 HTML 的下載網址。
• Stitch 改寫過的提示詞：
  例如把「內文至少 20pt」寫成「20pt（26px+）」。
• 設計說明，和下一步的建議，
  例如「設計長輩點選答案後的即時確認狀態」。

回來的不只是一張圖，還看得到 Stitch 怎麼理解你的話。

四、改版前後：三個版本對照

Day27 定好檢查表後，
我先讓 Claude Code 照同一張表，自己把 App 改成淺色；
今天的版本，則是加上 Stitch 一起做。

對比是文字和它正後方顏色的亮度比，
WCAG 的公式算出來，從 1:1（同一個顏色）到 21:1（黑配白）。
檢查表用的標準：一般文字 4.5:1 以上，主要文字 7:1 以上。

同一組畫面、同一台模擬器：

長輩常把系統字級調大，
Android 模擬器的字級設成 200%：

• 依標點分行：題目照標點分兩行，不會從詞的中間斷開。
• 放不下就整段縮小：一定完整顯示，不會被切掉。
• 圖示跟著放大：圖示的大小，跟著系統字級一起變。

各自的優點，和要注意的地方：

• Claude 單獨：

  優點：快，不用另外開工具；照檢查表改顏色，按鈕的對比到 7:1。

  要注意：版面沿用原本的，平板、橫放、題目被切掉的問題還在。

• Claude＋Stitch：

  優點：多了設計的眼光，帶來原本沒想到的版面，
  例如「← 返回」「⚙ 家人設定」圖示加字、倒數做成白底小卡、
  答錯不用紅色而是寫「正確答案是 1」、平板限寬、橫放兩欄；

  還留下一份 DESIGN.md，之後的畫面可以照同一套規則。
  要注意：它寫的數字（說 7:1，實際 6.17:1）和自己加的元素，要審稿時再修。

• 設計稿看不到的：

  系統字級調到 200% 時，畫面會變成什麼樣子，
  Stitch 的稿看不出來，只看程式碼也看不出來；
  題目被切掉、標題斷字，都是實際跑起來、截圖之後才發現的。

Stitch 出點子，Claude Code 算數字；兩邊都看過，才帶回 App。

五、小結

• Stitch 交出 HTML、截圖和 DESIGN.md；
  HTML 是施工圖，DESIGN.md 是設計規則，
  帶回 App 前，數字自己再算一次。
• 給開發者的入口有五種：MCP、CLI、SDK、Agent Skills、DESIGN.md；
  這次用 MCP 讓 Claude Code 操作 Stitch，CLI 上傳參考圖。
• 三個版本並排：Stitch 帶來版面的點子，
  數字和字級 200% 的樣子，要自己在模擬器上量。
• 檢查表之外，還要有人實際用過。

設計交給 Stitch，數字自己算；量體裁衣，最後要穿在使用者身上試過。

六、預告

今天的畫面，都是在模擬器和自己的手機上看的。
明天請幾位中高齡的使用者實際用用看：
字看得清楚嗎？按得到嗎？哪裡會卡住？

感謝有緣看到這邊的你～
希望佛菩薩也祝福你：🌟平安自在 順遂健康🌟
南無觀世音菩薩🍀 南無地藏菩薩🏠 南無阿彌陀佛☀️