Claude Design 十分鐘上手

跟著本頁走一遍，你會得到第一張基於 swift-web 設計系統的可互動設計稿。全程約十分鐘，不需要任何程式碼知識。

第 0 步：帳號與接入路徑

前置條件：一個 Claude 付費帳號（Pro / Max / Team / Enterprise 均可），瀏覽器開啟 claude.ai/design。

接入 swift-web 設計資源有兩條路徑，按你的帳號情況選：

	路徑 A：組織共享（建議）	路徑 B：個人匯入
適用	公司 Team / Enterprise 組織成員	個人 Pro / Max 帳號
步驟	無需任何操作——組織內已發布 swift-web 設計系統，新建專案時在選擇器裡直接選	下載資源包 → 上傳給 Claude 擷取成自己的設計系統（見下）
協作	專案可組織內共享、多人評審	單人使用，成稿經匯出分享
找誰	組織接入事宜聯絡框架維護者	自助

路徑 B 的匯入步驟：

下載 swift-web 設計資源包：swift-web-design-cards.zip（20 張卡片：色板 / 排版 / 形狀 + 17 個元件形態，全部派生自框架源碼）。
在 Claude Design 裡建立 / 進入你的組織（專案選擇器左下角），進入設計系統設定。
把解壓縮後的 HTML 檔案作為品牌資產上傳——Claude 會分析它們並擷取出一套可複用的設計系統（色板、字體、元件模式）。
建一個測試專案驗證擷取品質，滿意後開啟該設計系統的 Published 開關，之後你新建的專案都會自動使用它。

資源包裡的卡片是自說明的（每張都標註了 token 名和元件說明），擷取品質通常不錯；個別細節偏差可以用設計系統的 Remix 功能讓 AI 修正。

第 1 步：新建專案

在 Claude Design 首頁新建專案。確認專案使用的是 swift-web 設計系統（路徑 A 在建立時的 Design system 選擇器裡選；路徑 B 發布後自動套用）。此後這個專案裡 AI 生成的一切都會遵守我們的顏色、字體與元件形態。

第 2 步：用「四要素」描述你要的東西

好的首版稿來自結構清晰的描述。官方總結的 prompt 四要素——目標、佈局、內容、受眾——照著組織語言即可：

目標：一個影視內容站的首頁。佈局：頂部固定導航（logo + 分類 + 搜尋）；首屏全寬輪播 banner；下面三個樓層——「熱播推薦」橫滾卡片排、「最新上線」海報網格、「排行榜」帶序號的列表。內容：卡片含封面、片名、評分角標；導航分類用「電影 / 劇集 / 綜藝 / 動漫」。受眾：以行動裝置為主的一般觀眾，暗色調，觀感接近主流串流媒體網站。

發送後 AI 會生成完整的一版。不用追求一次說全——結構對了就是好的起點，細節留給迭代。

兩個實用小訣竅：

描述裡出現的元件名可以直接用中文意圖（「橫滾卡片排」「整屏輪播」），接入設計系統後 AI 會自動對位到對應的 swift-web 元件形態。
讓 AI 給稿子取英文檔名（如 home.dc.html），跨系統分享連結時更穩。

第 3 步：三種方式迭代

按修改的粒度選工具（詳見認識 Claude Design 的對照表）：

全域調整 → 繼續對話：「配色再暗一檔」「樓層順序對調」。
局部修改 → 行內批註：點住具體元素說事，AI 只動那一處。批註偶爾回應慢，把同樣的話貼到對話裡說即可。
微調 → 畫布直接編輯：拖曳對齊、改字級，所見即所得。

還有一招很好用：把參考圖直接拖進對話。競品截圖、手繪草圖、舊版設計都可以，AI 會對照參考修正稿子——「按這張圖的卡片密度調整第二樓層」。

第 4 步：配色（設計新品牌時）

如果你在為全新網站定調，記住一條紀律：讓 AI 在語意 token 層調色，不要逐一元素改顏色。

✅ 「把品牌主色（--primary）換成 #C8A96A 金色系，背景壓到近黑，整體奢華暗色調」 ❌ 「這個按鈕改金色」「那個標題也改金色」……（散點改色，稿內不一致，且無法交付落地）

定稿後把最終的 token 值清單（主色 / 背景 / 文字 / 語意色等十幾項）作為交付物之一——它是後續程式碼落地和生成品牌專屬設計系統的唯一輸入。完整說明見配色工作流程。

第 5 步：匯出與交接

右上角匯出選單，按去向選：

給同事 / 業務方過目：組織內直接發專案連結（Team / Enterprise）；個人帳號匯出獨立 HTML 或 PDF 發出去。
進 Canva / 做簡報：匯出 PPTX 或直接送入 Canva。
交給開發實作：使用 handoff 打包交給 Claude Code——這是與 swift-web 工程銜接的正式通道，交接細節（連同 Figma 軌的交接）統一見設計師與前端協作。

常見問題

生成的稿子沒有用我們的顏色？ 檢查專案是否真的接入了 swift-web 設計系統（專案設定裡可見）；路徑 B 需確認設計系統已 Published。
想改設計系統本身（加元件、改 token 預設值）？ 設計系統卡片由框架源碼自動派生，不要在 Claude Design 裡直接改卡片——需求提給框架維護者，程式碼側更新後資源自動跟上。理由見規範與治理。
額度用完了？ Claude Design 與聊天、Claude Code 共享訂閱額度，等額度視窗重置或聯絡管理員。