程式碼與設計的往返

往返工作流程讓你的程式碼庫與 Stitch 雙向互通。從 React 應用程式出發，把它的設計系統與螢幕擷取進 Stitch，在雲端進行視覺編輯，再把更新後的設計匯出成乾淨的 React 元件。

你會建構出什麼

從既有的 React + Vite 應用程式開始，你會擷取設計 token、把螢幕快照成靜態 HTML、將所有內容上傳到 Stitch、編輯設計，再把它轉換回 React 元件。

事前準備

• 已完成開始使用技能（技能已安裝、MCP 已連接）
• 一個可正常執行開發伺服器的既有 React 應用程式
• 已安裝 Node.js 18+ 與 puppeteer

步驟 1：從原始碼擷取設計 token

掃描你的原始碼檔案，反向推導出一份設計系統文件——不需要建置步驟。

extract-design-md 技能會讀取你的元件、樣式表、Tailwind 設定與主題檔案。它會辨識色彩、字體排印、間距與元件模式。

開啟產生的 .stitch/DESIGN.md，你會看到：

• YAML frontmatter，包含機器可讀的色彩 token
• Markdown 章節，描述視覺氛圍、調色盤、字體排印與版面配置
• 描述性名稱，例如「Deep Ocean Blue (#1a365d)」，而非原始 hex 色碼

步驟 2：快照靜態 HTML

啟動你的開發伺服器，然後把執行中的應用程式快照成自帶完整內容的 HTML：

該技能會啟動無頭 Chrome、擷取完整轉譯的 DOM、將所有 CSS 內嵌，並把圖像轉換成 base64 data URI。每個輸出檔案都完全自帶內容——沒有外部相依。

若有多個頁面，請為每條路由重複操作：

步驟 3：上傳到 Stitch

用一個命令把所有內容推送進新的 Stitch 專案：

該技能會建立專案、把 DESIGN.md 上傳為設計系統，並將每個 HTML 檔案匯入為一張螢幕。開啟 Stitch，即可看到你的專案與所有已上傳的螢幕，並依照你的設計系統套用樣式。

步驟 4：編輯設計

在不碰程式碼的情況下進行有針對性的視覺變更：

該技能會帶著你的指令呼叫 edit_screens，同時保留既有的設計系統。一次做一項變更效果最好——用多次編輯逐步迭代，而不是把所有事都塞進一段提示詞。

步驟 5：匯出回 React

把更新後的 Stitch 螢幕轉換回元件程式碼：

react-components 技能會下載最新的螢幕 HTML、擷取 Tailwind 主題值、把設計拆解成模組化元件、建立型別安全的介面、將靜態資料移到 src/data/mockData.ts，並透過 AST 驗證所有內容。

啟動你的開發伺服器——React 元件現在已反映你在 Stitch 中所做的設計變更，包括新的客戶見證區塊。

完整往返流程

以下是你剛剛完成的流程：

步驟	方向	發生了什麼事
擷取 token	程式碼 → DESIGN.md	從原始碼反向推導出設計系統
快照 HTML	程式碼 → 靜態檔案	把執行中的應用程式快照成自帶內容的 HTML
上傳	檔案 → Stitch	把素材與設計系統匯入雲端
編輯	Stitch → 更新後的設計	進行有針對性的視覺變更
匯出	Stitch → React	從設計產生更新後的元件

接下來

• 從你的程式碼庫匯入——更多擷取設計系統的選項，包括不需要技能就能使用的快速提示詞
• 建立高質感設計系統——產生一套以反千篇一律標準精心策劃的設計系統
• 為什麼要用語意化 token？——了解為什麼描述性設計語言比原始 CSS 更適合 AI