從程式碼庫匯入

你的程式碼庫早就有一套設計語言——色彩散落在各個樣式表、間距模式埋在元件檔案裡、字體排印選擇鎖在 Tailwind 設定中。一份 DESIGN.md 能把這一切集中到一處，讓 Stitch 產生的螢幕看起來像你的產品，而不是白紙般的預設值。

達成這個目標有兩種方式：一段可貼進任何程式碼代理程式的快速提示詞，或一項能自動化整條流程的專用技能。

快速提示詞

在專案目錄中，把這段提示詞複製到任何程式碼代理程式（Gemini、Claude Code、Cursor、Antigravity）。不需要技能或外掛——代理程式會讀取你的原始碼檔案，並根據找到的內容寫出一份 DESIGN.md。

PROMPT

Context — optionalAdd specifics about your codebase’s purpose, critical files, and goals.

InstructionsRead the codebase and/or website before designing. The repo and/or website are the source of truth. Start with real content. Pull product names, taglines, and copy from the README. Pull labels, values, and terminology from config files, CLI help text, schemas, and error messages. Nothing invented, nothing placeholder — if the repo doesn’t contain it, the design doesn’t show it. Look at existing code for visual identity: color values, type scales, spacing tokens, component patterns. If a design system exists, inherit it. If values are scattered across files, collect them — they reveal visual intent even when undocumented. Read the core logic and data structures, not just the docs. They tell you the product’s native shape — a timeline, a graph, a catalog, a pipeline. Let that shape organize the page instead of a section template. Find what the README leads with. That feature dominates the page. Establish its weight before placing anything else — what matters before what measures.

這段提示詞做了什麼

這段提示詞要求代理程式從你的程式碼往回推導，而不是從範本往前套用。它會擷取三個層次：

內容——直接從原始碼取得的產品名稱、標籤與文案。沒有填充文字，也沒有 lorem ipsum。
視覺識別——從樣式表、主題檔案與 Tailwind 設定蒐集而來的色彩、字型、間距與元件模式。
資訊架構——產品資料的自然形狀，這決定了頁面該如何組織。

產出結果是一份 DESIGN.md，你可以直接放進 .stitch/DESIGN.md，立刻用於產生螢幕。

獲得更好結果的訣竅

把代理程式指向特定目錄。 在脈絡區塊加入類似「專注於 src/styles/、tailwind.config.ts 與 src/components/」的句子。
說出你的技術堆疊。 告訴代理程式「這是一個 React + Tailwind + shadcn/ui 專案」，能幫助它在正確的地方尋找。
反覆迭代。 第一次擷取會捕捉到大致輪廓。接著細修它：「強調色應該是導覽列上的藍綠色，而不是頁尾的藍色。」

使用 Stitch Design Skills 自動擷取

上面那段提示詞在任何地方都能運作，但依賴的是代理程式的一般推理能力。Stitch Design Skills 是專門打造的代理程式指令，清楚知道在每個主流框架中該去哪裡尋找設計 token——React、Vue、Svelte、Angular、純 CSS 與 Tailwind。

什麼是 Stitch Design Skills？

Stitch Design Skills 是一套開源集合，包含 13 項代理程式技能，分成三個外掛：

外掛	它的功能
stitch-design	建立與擷取設計——從程式碼擷取 token、快照執行中的應用程式、上傳到 Stitch
stitch-build	把設計轉成程式碼——React 元件、導覽影片、shadcn/ui 整合
stitch-utilities	提升品質——提示詞最佳化、高質感設計系統、自主多頁面產生

技能遵循 Agent Skills 開放標準，可搭配任何相容的程式碼代理程式使用。

安裝外掛套件

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

依照你使用的代理程式，把 claude-code 替換成 cursor、gemini-cli 或 antigravity。

從原始碼擷取 DESIGN.md

extract-design-md 技能會掃描你的原始碼樹，不需要建置或執行應用程式：

PROMPT

Extract the design system from ./src and write it to .stitch/DESIGN.md

該技能會自動偵測你的技術堆疊（Tailwind 設定、CSS 自訂屬性、主題檔案、styled-components），並逐一處理每個設計面向：

視覺氛圍——整體調性、留白哲學、色溫
色彩調色盤——每個獨特色彩，去除重複並指派功能角色
字體排印——字型家族、字級階層、字重與間距模式
元件樣式——按鈕、卡片、導覽、輸入欄位與特定領域元素
版面配置原則——格線系統、回應式斷點、間距策略

產出內容同時包含 YAML frontmatter（機器可讀的 token）與 Markdown 文字說明（人類可讀的設計理念）。正是這種雙模態格式，讓 DESIGN.md 同時適用於工具與 AI 代理程式。

上傳到 Stitch

取得 DESIGN.md 後，把它推送進 Stitch 專案，讓之後產生的每張螢幕都遵循你的設計系統：

PROMPT

Upload .stitch/DESIGN.md to Stitch and create a design system from it.

manage-design-system 技能會處理上傳，並在專案層級註冊設計系統。之後所有的螢幕都會自動繼承你的 token。

完整的程式碼轉設計流程

若想一次完成完整匯入——擷取設計系統、快照靜態 HTML，並上傳到 Stitch——請使用協調器技能：

PROMPT

Upload the frontend at ./my-app into a Stitch project called “My App Migration”.

code-to-design 技能會串連三個步驟：從執行中的應用程式擷取靜態 HTML、從原始碼反向推導設計系統，並將所有內容上傳到 Stitch。

我該使用哪種方法？

情境	建議做法
快速擷取、不想設定	把上面的提示詞複製到任何代理程式
徹底且具框架感知的擷取	安裝技能，使用 `extract-design-md`
完整遷移到 Stitch	安裝技能，使用 `code-to-design`
從零開始撰寫 DESIGN.md	格式說明請參閱什麼是 DESIGN.md？