[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-claude-design-assets-to-design-system-zh":3,"article-related-claude-design-assets-to-design-system-zh":30,"series-tools-b8a08645-4041-4124-a44d-c5b3336bbd65":75},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":22,"views":26,"created_at":27,"published_at":28,"topic_cluster_id":29},"b8a08645-4041-4124-a44d-c5b3336bbd65","claude-design-assets-to-design-system-zh","Claude Design 把素材變成系統","\u003Cp data-speakable=\"summary\">\u003Ca href=\"\u002Ftag\u002Fclaude-design\">Claude Design\u003C\u002Fa> 把品牌素材變成可重複使用的團隊設計系統。\u003C\u002Fp>\u003Cp>我用設計系統一陣子了，越用越知道哪裡不對勁。很多工具嘴上說是「幫你建立品牌系統」，實際上就是叫你丟一堆素材進去，然後給你一個看起來很整齊、但根本不敢直接上線的半成品。顏色像、字體像、按鈕也像，但一到真實頁面就開始走鐘，最後還是回到每個人各做各的。我最煩的就是這種假簡單流程，因為它看起來省事，實際上只是把混亂延後。\u003C\u002Fp>\u003Cp>這次讓我停下來看的，是 \u003Ca href=\"https:\u002F\u002Fsupport.claude.com\u002Fen\u002Farticles\u002F14604397-set-up-your-design-system-in-claude-design\">Claude Help Center 的設定教學\u003C\u002Fa>。它不是在跟我講什麼宏大理論，而是很直接地說：把你真的有的資產丟進去，讓 Claude 抽出可重用的元素，再慢慢修到符合品牌。Claude Design 目前在 beta，支援 Pro、Max、Team、Enterprise 方案，而且是給會真正擁有這套系統的人來做。這點很重要，因為設計系統死掉，通常不是工具不行，是沒人願意管那段最煩的中間流程。\u003C\u002Fp>\u003Ch2>先丟資產，不要先丟幻想\u003C\u002Fh2>\u003Cblockquote>“It extracts reusable components, colors, typography, and patterns from the assets you provide—codebases, slide decks, or other design references—and uses them as the foundation for every project created within your account.”\u003C\u002Fblockquote>\u003Cp>翻譯一下就是：\u003Ca href=\"\u002Ftag\u002Fclaude\">Claude\u003C\u002Fa> Design 不是要你憑空發明一套系統，它要的是證據。真實畫面、真實元件、真實品牌素材。你給它 React component library，它可以讀結構；你給它簡報，它可以看出視覺語言；你給它 logo 跟配色檔，它至少能先抓出基本 \u003Ca href=\"\u002Ftag\u002Ftoken\">token\u003C\u002Fa>。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781946199259-wjwr.png\" alt=\"Claude Design 把素材變成系統\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>我以前最常看到的爛局，就是團隊還沒決定 source of truth，就先開始寫「完美設計系統規格」。結果最後變成 \u003Ca href=\"\u002Ftag\u002Ffigma\">Figma\u003C\u002Fa>、行銷網站、前端實作三方互打，誰都說自己才是對的。Claude 這種做法比較務實：先把現有的東西餵進去，再讓模型去整理出穩定模式。\u003C\u002Fp>\u003Cp>實操上我會這樣做：先選一個主要來源。產品 UI 在 \u003Ca href=\"\u002Fnews\u002Fvs-code-turns-folder-into-workspace-zh\">code\u003C\u002Fa> 裡，就先用 code；品牌感最強的是行銷頁，就先用成熟頁面或 deck；如果兩個都有，那更好。重點不是完美，而是降低猜測。Claude 只能從你給的東西裡抽特徵，所以來源越乾淨，後面你要修的就越少。\u003C\u002Fp>\u003Cul>\u003Cli>產品團隊最適合：component library 或 design system repo\u003C\u002Fli>\u003Cli>品牌團隊最適合：完成度高的 deck、PDF、landing page\u003C\u002Fli>\u003Cli>混合團隊最適合：code、截圖、品牌素材一起上\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>先定組織，再談系統，不然只是在重複做白工\u003C\u002Fh2>\u003Cp>文件裡有一句我覺得很實在：先建立或切換到你的 organization，再完成 onboarding。聽起來像小事，但這其實就是整個流程的核心。這不是每個專案各自試一次的玩具，它是 organization 層級的\u003Ca href=\"\u002Fnews\u002Fset-up-memetoro-ai-crypto-presale-screening-zh\">設定\u003C\u002Fa>，之後 Team 和 Enterprise 的新專案會直接沿用。\u003C\u002Fp>\u003Cp>這件事會直接改變我的思考方式。以前我會問：「怎麼讓這張 mockup 看起來好看？」現在我會問：「什麼東西應該讓每個新專案自動繼承？」這才是正確問題。如果你的目標是減少 style drift，你就不能讓每個人都從空白開始。空白最容易養出各種自以為是的設計。\u003C\u002Fp>\u003Cp>我自己做內部工具時就踩過這坑：每個新專案都從不同的 button radius 開始、不同的灰階開始、不同的 heading 口味開始。沒人故意亂搞，只是大家都從空白出發。Claude Design 的 organization flow，就是在拆掉這個空白起點。\u003C\u002Fp>\u003Cp>實操上，我會先決定誰是 owner，再上傳素材。小團隊可能是 lead designer 或 frontend lead；企業環境通常是 brand owner 加上有權限的 admin。不要讓五個人一起「幫忙」，不然最後通常只會得到五套半成品。\u003C\u002Fp>\u003Cul>\u003Cli>先確認 admin 權限\u003C\u002Fli>\u003Cli>只指定一個編輯與發布 owner\u003C\u002Fli>\u003Cli>organization 名稱要跟實際使用團隊一致\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>不要只上傳規範，給它看真的例子\u003C\u002Fh2>\u003Cp>教學裡有一句很直白：要放 real examples，不要只放 spec。這句很關鍵。色票只能告訴 Claude 什麼是藍色；完成的 landing page 才會告訴它藍色在真實版面裡怎麼工作，旁邊配什麼字級、什麼間距、什麼層級。這就是 token list 跟可用系統的差別。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781946193647-2qst.png\" alt=\"Claude Design 把素材變成系統\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>Claude 建議的素材類型很廣：codebase、prototype、slide deck、document、logo、typography specimen 都可以。這點我很喜歡，因為它比較像真實團隊的樣子。不是每家公司都有乾淨到發亮的 design system repo。很多公司只有一份 rebrand PDF、一個 Figma export、跟一個「大致上還可以」的前端 app。沒關係，先餵最好的證據。\u003C\u002Fp>\u003Cp>我會把重點放在 coverage，不是 perfection。單一來源可以起步，但多種來源更容易讓 Claude 比對出穩定部分。尤其是你的品牌常常卡在「官方品牌」跟「產品團隊實際在用的東西」不一致時，多一點素材比較容易把那條界線拉出來。\u003C\u002Fp>\u003Cp>我一直偏好能撐住不完美輸入的系統，因為現實就是這樣。沒人真的有一個永遠最新、每個元件都完整記錄的資料庫。就算有，你也是少數。對大多數人來說，做法就是先丟最強的證據，再看生成出來的 kit 能不能像你要的品牌。\u003C\u002Fp>\u003Cp>實操上，我會建一個小而多樣的 asset bundle。不要丟十張幾乎一樣的截圖。放一個首頁、一個 dashboard、一張簡報頁、再加品牌色票。如果 codebase 裡有 component library，也一起放。你是在教系統品牌的形狀，不是在教它單一畫面。\u003C\u002Fp>\u003Ch2>用會露餡的 prompt 測，不要拿 demo 騙自己\u003C\u002Fh2>\u003Cp>上傳完之後，Claude 會產生一個 design system UI kit。文件說通常會包含 colors、typography、components、layout patterns。這些都不差，但真正的測試，是你丟一個具體、而且有點刁的需求，看它會不會露餡。\u003C\u002Fp>\u003Cp>教學建議的測試 prompt 像是：「為 [你的產品] 做一個 landing page。」、「設計一個顯示 [相關指標] 的 dashboard。」、「做一份關於 [團隊常做主題] 的簡報。」我覺得這方向很對，因為太泛的 prompt 會把問題藏起來。landing page 可以看層級對不對；dashboard 會暴露 spacing 和 component 重用有沒有正常；簡報則會直接測到字體系統能不能扛長內容。\u003C\u002Fp>\u003Cp>也就是說，你要測的是你團隊真的會做的工作，不是拿一張 demo 截圖交差。如果你們主要交付 dashboard，就不要只拿 marketing hero section 來驗證。若你們常做 sales deck 或 executive deck，就直接拿投影片測。系統要在真實使用情境裡拿到信任，不是在漂亮畫面裡自嗨。\u003C\u002Fp>\u003Cp>我自己看這類系統時，通常會盯三件事：顏色有沒有一致、標題與內文是不是同一個家族、元件有沒有一直重複而不是每次都變形。只要其中一項開始漂，通常不是模型壞掉，而是輸入不夠，或 source 本身就不穩。\u003C\u002Fp>\u003Cp>實操上，我會先做一份很短的驗證清單，而且每次更新都用同一組 prompt。這樣你才看得出來是系統真的變好了，還是只是換了另一種長相。\u003C\u002Fp>\u003Cul>\u003Cli>輸出有沒有維持正確的色彩層級\u003C\u002Fli>\u003Cli>標題、內文、標籤的字級關係是否一致\u003C\u002Fli>\u003Cli>重複元件有沒有維持重複，而不是到處變形\u003C\u002Fli>\u003Cli>版面是否符合團隊實際交付的工作型態\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>發布不是按按鈕，是把預設值交出去\u003C\u002Fh2>\u003Cp>Claude Design 不只是讓系統留在建立者自己手上。當你打開 \u003Cstrong>Published\u003C\u002Fstrong> 開關之後，organization 裡從 homescreen 建立的新專案，會直接使用這套 design system，而不是 default。這一刻很重要，因為流程從草稿變成會影響大家的預設行為。\u003C\u002Fp>\u003Cp>所以我對那些急著發布的團隊都會有點懷疑。系統如果只有八成對，太早發布只是把痛苦擴散出去；但如果它夠穩、夠一致，發布就能省掉大量重複設定。新專案一開始就有正常的起點，這在任何內部設計流程裡都很值錢。\u003C\u002Fp>\u003Cp>文件裡最重要的細節之一，是發布綁的是 organization，不只是單一專案。這代表這個決定有營運層級的重量。你不是在核准一個檔案，你是在改變未來工作的預設行為。\u003C\u002Fp>\u003Cp>實操上，我會把發布當成 release 來看。先 review 生成的 kit，再用真實 prompt 驗證，最後才把開關打開。如果你在 Team 或 Enterprise，還要先跟團隊說明變更，不然大家會以為 Claude 突然變怪了。不是，它只是開始照你的預設跑。\u003C\u002Fp>\u003Cp>再補一個很實際的點：Enterprise 預設是關閉的。不要以為你帳號能用 Claude，就代表這個功能已經開好。先檢查 organization settings 和 permissions，不然你只是在找一個根本沒啟用的 toggle。\u003C\u002Fp>\u003Ch2>更新不要重做，直接 remix 就好\u003C\u002Fh2>\u003Cp>我最喜歡這篇教學的地方，是它的更新路徑。你可以到 organization settings 裡，點你要改的 design system 旁邊的 \u003Cstrong>\u003Ca href=\"\u002Fnews\u002Fopenai-sora-shutdown-unit-economics-zh\">Open\u003C\u002Fa>\u003C\u002Fstrong>，再按右上角的 \u003Cstrong>Remix\u003C\u002Fstrong>，把 chat interface 打開。這個心智模型比「刪掉重來」好太多了。\u003C\u002Fp>\u003Cp>翻譯一下就是：你的設計系統不是一次寫死，它是可以透過對話慢慢演進的。品牌會變、產品會長大、字體會收斂、色彩會微調。如果唯一的更新方式是整套重做，大家只會拖到系統明顯爛掉才肯動。這就是老系統會發霉的原因。\u003C\u002Fp>\u003Cp>我以前接手過那種老系統，每次改一個地方都像在做 migration。沒人想碰，因為一動就會牽到十個下游假設。remix flow 的好處，就是把修正成本壓低。你可以直接叫 Claude 改系統，然後看結果，不用整包丟掉。\u003C\u002Fp>\u003Cp>實操上，我會把 remix 用在小幅修正，不是拿來做緊急大翻修。如果 button style 稍微不對，就修；如果 typography scale 太鬆，就修；如果品牌方向整個換掉，那才可能需要比較大的 reset，但多數更新其實沒那麼戲劇化。\u003C\u002Fp>\u003Cp>這裡又回到 ownership。沒人知道誰能 remix，更新就會卡住。指定一個人負責，並且讓他有足夠 context 判斷什麼叫「差不多可以」。設計系統最怕的不是不完美，是沒人敢決定。\u003C\u002Fp>\u003Ch2>可抄的模板\u003C\u002Fh2>\u003Cpre>\u003Ccode># Claude Design 團隊設計系統流程模板\n\n## 1) 先定 owner\n- 指定一位 designer、brand owner 或 frontend lead\n- 確認 organization admin 權限可用\n- 決定誰負責 review 與發布\n\n## 2) 收集素材\n至少準備一種，最好多種：\n- 含元件庫的 codebase\n- 能代表品牌的 slide deck 或 PDF\n- 現有產品截圖或 prototype\n- 品牌素材：logo、palette、typography 規格\n\n## 3) 建立或切換 organization\n- 打開 Claude Design\n- 在左下角 project picker 選對 organization\n- 完成 onboarding\n\n## 4) 上傳 assets\n- 優先放真實案例，不要只放規格\n- 放完成頁面或畫面，不要只有 token\n- 品牌同時存在於產品與行銷時，兩邊素材都放\n\n## 5) 檢查生成結果\n重點看這幾項：\n- 色彩層級是否一致\n- 字體層級是否合理\n- 元件是否可重複使用\n- 版面與 spacing 是否穩定\n\n## 6) 用真實 prompt 驗證\n每次都用同一組測試：\n- 為 [產品] 做 landing page\n- 設計一個顯示 [指標] 的 dashboard\n- 做一份關於 [主題] 的 presentation\n\n## 7) 確認後再發布\n- 只有 review 完才打開 Published\n- 確認 organization 新專案會套用這套系統\n- 跟團隊說明這次變更\n\n## 8) 後續更新用 Remix\n- 到 organization settings\n- 點 design system 旁的 Open\n- 點 Remix 打開 chat\n- 直接叫 Claude 調整，不要重建\n\n## 9) 快速驗證清單\n- 視覺是否符合品牌語氣\n- 顏色、字體、間距是否一致\n- 元件是否持續重複而不是漂移\n- 系統是否支援團隊真正在交付的工作\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>這就是我會直接丟給團隊用的版本。它的目的不是做一份漂亮文件，而是讓你真的開始動：先定 owner，再餵真實素材，接著用真實工作驗證，最後才發布，之後靠 remix 持續修。\u003C\u002Fp>\u003Cp>原始來源是 \u003Ca href=\"https:\u002F\u002Fsupport.claude.com\u002Fen\u002Farticles\u002F14604397-set-up-your-design-system-in-claude-design\">Claude Help Center\u003C\u002Fa>。上面這篇的步驟骨架來自官方文件，我的整理方式、操作順序和實戰提醒是我自己重新拆過的版本。你如果要看最原始的說法，就直接回到官方教學。","我拆 Claude Design 的設計系統流程，整理成可直接複製的團隊版模板，讓你用真實素材建立、驗證、發布與更新系統。","support.claude.com","https:\u002F\u002Fsupport.claude.com\u002Fen\u002Farticles\u002F14604397-set-up-your-design-system-in-claude-design",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781946199259-wjwr.png","tools","zh","dd6fa1a4-f821-4b06-b0f9-f48cada0bfb7",[17,18,19,20,21],"Claude Design","design system","brand assets","prompt workflow","team UI kit",[23,24,25],"先用真實素材當 source of truth，不要空談規範","把設計系統當 organization 層級的預設值來管理","用真實工作 prompt 驗證，再用 Remix 持續更新",0,"2026-06-20T09:02:46.505161+00:00","2026-06-20T09:02:46.479+00:00","c3c88dd2-a940-438a-b359-0e5a24562273",{"tags":31,"relatedLang":34,"relatedPosts":38},[32],{"name":17,"slug":33},"claude-design",{"id":15,"slug":35,"title":36,"language":37},"claude-design-assets-to-design-system-en","Claude Design turns assets into a team design system","en",[39,45,51,57,63,69],{"id":40,"slug":41,"title":42,"cover_image":43,"image_url":43,"created_at":44,"category":13},"7beaabe3-5421-4e2b-a42a-d1a7b669be12","deploy-minimax-m3-with-vllm-openai-api-zh","用 vLLM 部署 MiniMax M3 並開啟 OpenAI API","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781954276176-k5fw.png","2026-06-20T11:17:30.019598+00:00",{"id":46,"slug":47,"title":48,"cover_image":49,"image_url":49,"created_at":50,"category":13},"fe9fecba-d6ae-4293-af38-e68e6c2c111b","namastack-turns-outbox-pain-into-reliable-events-zh","Namastack 把 outbox 變穩定事件流","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781949794069-sfg2.png","2026-06-20T10:02:49.479466+00:00",{"id":52,"slug":53,"title":54,"cover_image":55,"image_url":55,"created_at":56,"category":13},"f2fadb5a-41e2-4095-9467-d120f9acee99","vs-code-turns-folder-into-workspace-zh","VS Code 把資料夾變工作區","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781938995715-bygi.png","2026-06-20T07:02:52.407399+00:00",{"id":58,"slug":59,"title":60,"cover_image":61,"image_url":61,"created_at":62,"category":13},"95d2b100-b1b0-43ae-af46-7f9c85d93d00","midjourney-medical-turns-scans-into-spa-zh","Midjourney Medical把掃描變成Spa","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781909284807-n67y.png","2026-06-19T22:47:40.551779+00:00",{"id":64,"slug":65,"title":66,"cover_image":67,"image_url":67,"created_at":68,"category":13},"563c146c-b078-4610-93fa-af399a02c89a","three-multimodal-models-work-in-claude-code-zh","Claude Code 現在能接三個多模態模型","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781892161193-9rla.png","2026-06-19T18:02:15.364369+00:00",{"id":70,"slug":71,"title":72,"cover_image":73,"image_url":73,"created_at":74,"category":13},"86316fab-2e99-4958-b79f-8c54ce44d5c4","ollama-turns-local-llms-into-copyable-setup-zh","Ollama 讓本地 LLM 變可抄配置","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781885006324-jvvo.png","2026-06-19T16:02:56.601682+00:00",[76,81,86,91,96,101,106,111,116,121],{"id":77,"slug":78,"title":79,"created_at":80},"855cd52f-6fab-46cc-a7c1-42195e8a0de4","surepath-real-time-mcp-policy-controls-zh","SurePath 推出即時 MCP 政策控管","2026-03-26T07:57:40.77233+00:00",{"id":82,"slug":83,"title":84,"created_at":85},"9b19ab54-edef-4dbd-9ce4-a51e4bae4ebb","mcp-in-2026-the-ai-tool-layer-teams-use-zh","2026 年 MCP：團隊真的在用的 AI 工具層","2026-03-26T08:01:46.589694+00:00",{"id":87,"slug":88,"title":89,"created_at":90},"af9c46c3-7a28-410b-9f04-32b3de30a68c","prompting-in-2026-what-actually-works-zh","2026 提示工程，真正有用的是什麼","2026-03-26T08:08:12.453028+00:00",{"id":92,"slug":93,"title":94,"created_at":95},"05553086-6ed0-4758-81fd-6cab24b575e0","garry-tan-open-sources-claude-code-toolkit-zh","Garry Tan 開源 Claude Code 工具包","2026-03-26T08:26:20.068737+00:00",{"id":97,"slug":98,"title":99,"created_at":100},"042a73a2-18a2-433d-9e8f-9802b9559aac","github-ai-projects-to-watch-in-2026-zh","2026 必看 20 個 GitHub AI 專案","2026-03-26T08:28:09.619964+00:00",{"id":102,"slug":103,"title":104,"created_at":105},"a5f94120-ac0d-4483-9a8b-63590071ac6a","claude-code-vs-cursor-2026-zh","Claude Code 與 Cursor 深度對比：202…","2026-03-26T13:27:14.279193+00:00",{"id":107,"slug":108,"title":109,"created_at":110},"0975afa1-e0c7-4130-a20d-d890eaed995e","practical-github-guide-learning-ml-2026-zh","2026 機器學習入門 GitHub 實用指南","2026-03-27T01:16:49.712576+00:00",{"id":112,"slug":113,"title":114,"created_at":115},"bfdb467a-290f-4a80-b3a9-6f081afb6dff","aiml-2026-student-ai-ml-lab-repo-review-zh","AIML-2026：像課綱的學生實驗 Repo","2026-03-27T01:21:51.467798+00:00",{"id":117,"slug":118,"title":119,"created_at":120},"80cabc3e-09fc-4ff5-8f07-b8d68f5ae545","ai-trending-github-repos-and-research-feeds-zh","AI Trending：把 AI 資源收成一張表","2026-03-27T01:31:35.262183+00:00",{"id":122,"slug":123,"title":124,"created_at":125},"3ce6e6e2-bac5-463e-9f8d-45caabcc61f7","awesome-ai-for-science-research-tools-map-zh","AI 科研工具清單，開始像地圖了","2026-03-27T01:46:50.521945+00:00"]