設計師與前端協作
設計稿完成後如何變成上線程式碼？本頁上半部分是 swift-web 的標準多軌流程（照著做），下半部分是業界正在實踐的前沿串聯玩法（開闊思路）。核心事實只有一個：無論稿子來自 Figma、Claude Design 還是 Open Design，終點都是 Claude Code 用框架元件把它落成 Nuxt 程式碼——因為稿與碼共享同一套設計語言，交接損耗趨近於零。
標準流程：多軌匯合
Figma 軌交接（設計師側 3 步）：
- 設計檔案盡量規範：Auto Layout、元件實例、顏色綁定 Variables——這些直接決定 AI 讀稿的準確率；
- 把檔案或具體 frame 的連結發給前端（對方需要有該檔案的檢視權限）；
- 前端在 Claude Code 裡按稿生成實作，部署預覽後回給你走查。改稿意見可以直接在 Figma 裡標註（前端會重新讀取），也可以讓前端把開發中的介面推回 Figma 畫布（code-to-canvas，見 Figma 軌說明）供你直接編輯。
Claude Design 軌交接（設計師側 3 步）：
- 稿件定稿，檔名用英文；
- 組織內共享專案給前端（或匯出交接包）；
- 前端經 handoff 把稿子交給 Claude Code 實作。Claude Design 的稿本身就是基於框架元件形態生成的，落地映射幾乎是一對一。
Open Design 軌交接（設計師側 3 步）：
- 稿件定稿（檔名用英文），從專案匯出單檔案 HTML（或直接給前端專案資料夾路徑——它本機儲存、就是一個資料夾）；
- 把 HTML 連同必要素材發給前端；
- 前端把 HTML 交給 Claude Code 實作。稿子同樣基於框架 token 與元件形態生成，落地映射幾乎一對一。Open Design 無雲端共享，評審用匯出的 HTML / 截圖進行。
共同的走查環節：前端部署預覽環境後，設計師對照原稿走查。因為雙方說的是同一套 token 語言，回饋可以非常精確——「這裡應該是 --muted-foreground 而不是內文色」比「這個灰不對」高效得多（當然，說「這個灰不對」也沒問題，只是前者一步到位）。
交付物約定
| 交付物 | 什麼時候需要 | 說明 |
|---|---|---|
| 設計稿本體 | 每次 | Figma 檔案連結 / Claude Design 專案共享 / Open Design 匯出 HTML |
| 品牌 token 清單 | 新品牌 / 換色專案 | 定稿 token 值列表（15～25 項），是程式碼 rebrand 與生成品牌設計系統的唯一輸入，詳見配色工作流程 |
| 真實素材 | 涉及素材的頁面 | logo / 封面 / 營運圖原始檔；佔位圖出的稿理解為「結構定稿」 |
| 互動說明 | 有非常規互動時 | 一兩句話即可（hover 展開、滾動吸頂等），常規互動元件已內建 |
業界前沿：把三件工具串成一條流水線
以下是 2026 年設計-開發社群正在實踐的組合玩法，供參考與選用——它們不是「必須這麼做」，而是「已經有人這麼做而且效果顯著」。我們的雙軌基礎建設讓這些玩法都可以直接嘗試。
玩法一：並行迭代環（Figma ⇄ Claude Code） 設計與開發不再依序等待：前端從 Figma 稿生成首版程式碼的同時，設計師繼續深化；開發中的真實介面隨時推回 Figma 畫布，設計師在圖層上直接探索變體，前端再取回。設計和程式碼在一條環路上同時演進，實踐團隊回報回饋週期從數天降到數小時、首版還原度顯著提升。
玩法二：三段接力（Claude Design → Figma → Claude Code） 用 Claude Design 十分鐘出三個方向 → 選定的方向匯出、在 Figma 裡精修打磨（利用 Figma 的精確控制和團隊評審生態）→ 定稿走 Figma MCP 交給 Claude Code。適合「方向未定、又要求精修品質」的專案：探索用 AI 的速度，打磨用 Figma 的精度。
玩法三：程式碼優先反哺設計（Code-first） 需求簡單明確時，前端直接讓 Claude Code 按元件庫和 token 實作首版 → 推回 Figma 由設計師調優視覺 → 改動讀回程式碼。適合營運頁、活動頁這類結構套路化的場景——設計師把時間花在「讓它好看」而不是「從零畫它」。
玩法四：元件級同源（Code Connect，規劃中）
把 Figma 元件與程式碼元件顯式掛鉤後，AI 生成程式碼時直接複用真實元件（SwButton、SwCarousel……）而非重新生成相似樣式。設計系統的一致性從「約定」升級為「機制」。依賴 Figma 方案支援，我們已列入規劃。
選型建議：從玩法一開始——它對設計師的改變最小（照常用 Figma），收益立竿見影；團隊對 AI 工具熟悉後，其餘玩法自然會長出來。
相關連結
- Figma × AI 直通程式碼 — Figma 軌的完整說明與前端接入
- Claude Design 十分鐘上手 — Claude Design 軌的出稿教學
- swift-web 設計語言 — 交付物「品牌 token 清單」的來源
- 規範與治理 — 協作中的紀律與邊界