設計體系總覽

這個專區寫給 UI 設計師和與設計師協作的前端工程師。它回答一個正在發生的問題：AI 輔助開發已經在前端團隊鋪開，設計稿到程式碼的鏈路也正被 AI 重塑——設計師這一側，如何接上這股水流？

先把立場說清楚：我們不要求任何人更換設計工具。你可以繼續用熟悉的 Figma 完成全部設計工作，只是交接方式升級；也可以推開 AI 原生設計工具的新大門——雲端的 Claude Design，或開源本機版的 Open Design（沒有 Claude 帳號也能用），在裡面用對話直接生成基於我們元件庫的設計稿。用哪個工具、怎麼組合，是設計團隊自己的選擇——本手冊的任務，是把工具、能力、方法講清楚、講仔細，讓選擇建立在了解之上。

一份設計語言，多條工具軌道

swift-web 的設計資源有一個核心特徵：唯一事實源是框架源碼。顏色、圓角、陰影、字體這些設計決策，以語意 token（CSS 變數）的形式定義在 @swift-web/framework 裡；元件的形態（按鈕、彈窗、輪播、影片卡……）就是框架元件的真實渲染結果。設計資源不是「另一份需要人工維護的稿子」，而是從程式碼自動派生出來的——程式碼更新，資源跟著更新，永遠不會出現「設計規範說一套、線上程式碼跑另一套」。

這份設計語言，透過多條工具軌道供給設計師——工具只是消費端，核心資產（設計語言）與任何工具無關，將來接入新工具也只是「新增一個派生目標」：

Figma 軌Claude Design 軌Open Design 軌
適合誰主力使用 Figma、暫時不想換工具的設計師願意嘗試 AI 原生設計工具、有 Claude 帳號的設計師想用 AI 出稿但沒有 Claude 帳號（如用 ChatGPT / GPT）、或希望稿件留在本機的設計師
設計資源形態Figma Variables（token）+ 元件庫（建設中）設計系統卡片（20 張，token + 元件真實形態）設計系統資源包（DESIGN.md + token + 元件形態，同源派生）
出稿方式照常在 Figma 裡設計用對話描述意圖，AI 在畫布上生成，可手動精修用對話描述意圖，本機 coding agent 生成，畫布批註迭代
到程式碼的路徑官方 Figma MCP，AI 直讀設計稿資料生成程式碼一鍵 handoff 交付包給 Claude Code匯出單檔案 HTML 直接交給 Claude Code
協作能力即時多人（最強）Team / Enterprise 組織共享無雲端共享，資源包分發 + 匯出成稿
遷移成本零——工具和習慣完全不變需要 Claude 帳號，上手約十分鐘需本機裝 coding agent CLI（任意模型），上手約十分鐘

所有軌道的終點是同一個：Claude Code 拿到設計稿後，用 swift-web 框架元件和語意 token 把它落成 Nuxt 程式碼。因為設計資源和程式碼共享同一套詞彙表（--primary、SwButton、SwCarousel……），落地時不存在「翻譯損耗」——這正是整套體系對協作效率的本質提升，與你在哪個工具裡畫圖無關。

為什麼值得關心

傳統的設計→前端交接，是一條有損鏈路：設計師在設計稿裡表達意圖 → 前端肉眼解讀 → 手動翻譯成程式碼 → 對不上再來回溝通。業界在 2026 年已經把這條鏈路換成了另一種形態：

  • 設計稿變成機器可讀的資料。AI 編碼工具（如 Claude Code）透過 MCP 協定直接讀取 Figma 檔案中的圖層、約束、變數，生成的程式碼引用的就是設計師定義的那些 token——不再靠肉眼量像素。
  • 程式碼也能反向回到畫布。開發中的真實介面可以一鍵送回 Figma 變成可編輯圖層，設計師在畫布上改變體、加批註，不用等開發重寫。設計與開發從「依序等待」變成「並行迭代」，實踐者回報的回饋週期從數天縮短到數小時。
  • AI 原生設計工具出現。Claude Design（Anthropic 出品）讓「用一段話描述 + AI 生成 + 畫布精修」成為新的出稿方式，而且天然遵守接入的設計系統——生成的稿子自動使用你團隊的顏色、字體、元件。

這三件事共同指向一個結論：設計資源只要以「結構化、程式碼同源」的方式存在，設計師的產出就能直通實作。swift-web 設計體系就是按這個標準建的。

本專區的閱讀路徑

按你的情況選擇入口：

相關連結