[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-claude-design-synced-prototypes-setup-zh":3,"article-related-claude-design-synced-prototypes-setup-zh":30,"series-tools-abe21472-cda7-491d-9d7b-f9f64e3154b3":79},{"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},"abe21472-cda7-491d-9d7b-f9f64e3154b3","claude-design-synced-prototypes-setup-zh","Claude Design 同步原型設定指南","\u003Cp data-speakable=\"summary\">這篇教你在 \u003Ca href=\"\u002Ftag\u002Fclaude-design\">Claude Design\u003C\u002Fa> 建立專案、同步設計系統、反覆修正並匯出可交付的同步原型。\u003C\u002Fp>\u003Cp>這篇給產品團隊、設計師與開發者看，目標是把既有設計系統接進 Claude Design，做出可同步的原型，再順利交給 \u003Ca href=\"\u002Ftag\u002Fclaude-code\">Claude Code\u003C\u002Fa> 或其他交付\u003Ca href=\"\u002Fnews\u002Fevaluation-protocols-fine-tuned-llms-2026-zh\">流程\u003C\u002Fa>。\u003C\u002Fp>\u003Cp>照著做完，你會得到一個可編輯的第一個專案、已同步的元件來源、可重複檢查的修改流程，以及可分享或匯出的成品版本。\u003C\u002Fp>\u003Cp>\u003Ca href=\"\u002Ftag\u002Fclaude\">Claude\u003C\u002Fa> Design 目前支援 Pro、Max、Team、Enterprise 方案，介面可在網頁版 claude.ai\u002Fdesign 或 Claude Desktop 使用。\u003C\u002Fp>\u003Ch2>開始之前\u003C\u002Fh2>\u003Cul>\u003Cli>Claude Pro、Max、Team 或 Enterprise 帳號\u003C\u002Fli>\u003Cli>工作區已啟用 Claude Design；Enterprise 可能需要管理員開關\u003C\u002Fli>\u003Cli>Claude Desktop，或可開啟 claude.ai\u002Fdesign 的現代瀏覽器\u003C\u002Fli>\u003Cli>已存在的設計系統，包含顏色、字型與元件規範\u003C\u002Fli>\u003Cli>可選但建議：GitHub repo、螢幕截圖、程式碼庫或設計檔\u003C\u002Fli>\u003Cli>若要做本機同步與交接，需先安裝 Claude Code\u003C\u002Fli>\u003Cli>若要在本機使用 MCP 指令，請準備 Node 20+\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Step 1: 建立 Claude Design 專案\u003C\u002Fh2>\u003Cp>目的：先建立一個新的工作區，讓 Claude 以你的組織設計系統為基礎開始產圖，不必從空白畫布慢慢摸索。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783191770382-4zms.png\" alt=\"Claude Design 同步原型設定指南\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>前往 \u003Ca href=\"https:\u002F\u002Fsupport.claude.com\u002Fen\u002Farticles\u002F14604416-get-started-with-claude-design\">Claude Design 官方說明\u003C\u002Fa>，或直接開啟 \u003Ca href=\"https:\u002F\u002Fclaude.ai\u002Fdesign\">claude.ai\u002Fdesign\u003C\u002Fa> 與 Claude Desktop，從側邊欄進入 Claude Design，建立新專案並命名為你要做的產品或頁面。\u003C\u002Fp>\u003Cp>你應該看到左側是聊天區，右側是空白畫布，且專案名稱已出現在頂部，這代表第一個專案已建立完成。\u003C\u002Fp>\u003Ch2>Step 2: 同步設計系統元件\u003C\u002Fh2>\u003Cp>目的：把你們團隊已經在用的元件接進來，避免 Claude 自行發明按鈕、卡片或表單樣式。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783191772177-zs68.png\" alt=\"Claude Design 同步原型設定指南\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>若你要從 Claude Code 做同步，先安裝並登入，再把 Claude Design \u003Ca href=\"\u002Ftag\u002Fmcp\">MCP\u003C\u002Fa> 連上去：\u003C\u002Fp>\u003Cpre>\u003Ccode>claude mcp add --scope user --transport http claude-design https:\u002F\u002Fapi.anthropic.com\u002Fv1\u002Fdesign\u002Fmcp\n\u002Fdesign-login\n\u002Fdesign-sync\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>如果設計系統在 \u003Ca href=\"\u002Ftag\u002Fgithub\">GitHub\u003C\u002Fa>、地端程式碼庫，或設計檔裡，請把來源指給 Claude。同步後，Claude 會用這些元件比對輸出內容，並修正不一致的地方。\u003C\u002Fp>\u003Cp>你應該看到元件名稱、樣式與你的設計系統一致，而不是一組通用的預設介面。\u003C\u002Fp>\u003Ch2>Step 3: 提供情境並寫出精準提示詞\u003C\u002Fh2>\u003Cp>目的：讓第一版原型直接貼近真實需求，而不是只生成一個看起來像 UI 的草圖。\u003C\u002Fp>\u003Cp>上傳截圖、線框稿、簡報或程式碼庫，補足畫面脈絡。接著用明確提示詞寫出目標、版面、內容與受眾，例如：「建立一個 API 產品首頁，包含 hero 區、程式碼範例與價格區塊。」\u003C\u002Fp>\u003Cp>你應該看到 Claude 只在必要時追問細節，然後產出符合結構與用途的畫面草案。\u003C\u002Fp>\u003Ch2>Step 4: 用聊天與註解修正畫布\u003C\u002Fh2>\u003Cp>目的：把粗略草稿逐步改\u003Ca href=\"\u002Fnews\u002Fbooz-allen-openai-secure-ai-deployable-zh\">成可\u003C\u002Fa>檢視、可評審的同步原型。\u003C\u002Fp>\u003Cp>用聊天處理大方向修改，例如版面順序、層級或替代方案；用內嵌註解修正元件細節，例如間距、按鈕型態或控制項。需要快速\u003Ca href=\"\u002Fnews\u002Fgpu-vram-needed-llm-fine-tuning-2026-zh\">微調\u003C\u002Fa>時，也可以直接拖曳、縮放與對齊畫布上的元素。\u003C\u002Fp>\u003Cp>你應該看到每次修改後畫布即時更新，註解對應到實際變更，版面也逐步變得更完整。\u003C\u002Fp>\u003Ch2>Step 5: 保存版本並匯出交付\u003C\u002Fh2>\u003Cp>目的：把可用成果固定下來，方便給主管、設計夥伴、工程師或其他工具接手。\u003C\u002Fp>\u003Cp>在嘗試新方向前，先請 Claude 保存目前版本，再用 Export 匯出 .zip、PDF、PPTX 或獨立 HTML。你也可以分享唯讀、可註解或可編輯連結，或把專案送到 Canva、Miro、Replit、Vercel 或 Claude Code。\u003C\u002Fp>\u003Cp>你應該看到一個保存過的修訂版本，以及一個可被他人開啟的匯出檔或分享連結。\u003C\u002Fp>\u003Ch2>常見錯誤\u003C\u002Fh2>\u003Cul>\u003Cli>提示詞太模糊。修法：補上目標、受眾、版面與內容，讓 Claude 有足夠資訊生成正確畫面。\u003C\u002Fli>\u003Cli>沒有先同步設計系統。修法：先執行 \u002Fdesign-sync，或直接匯入元件來源，讓輸出對齊真實規範。\u003C\u002Fli>\u003Cli>只依賴註解卻沒有反應。修法：把同樣回饋貼到聊天區，因為內嵌註解有時可能在 Claude 讀取前消失。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>接下來可以看什麼\u003C\u002Fh2>\u003Cp>當你完成第一個同步原型後，可以進一步看 Claude Design 的管理設定，或深入 Claude Code，把既有程式碼與同一套設計系統串起來，做更完整的交接流程。\u003C\u002Fp>","這篇教你在 Claude Design 建立專案、同步設計系統、反覆修正並匯出可交付的同步原型。","support.claude.com","https:\u002F\u002Fsupport.claude.com\u002Fen\u002Farticles\u002F14604416-get-started-with-claude-design",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783191770382-4zms.png","tools","zh","fcbbb173-58d2-4218-a111-452a7238377e",[17,18,19,20,21],"Claude Design","Claude Code","design system","MCP","prototype",[23,24,25],"先建立專案，再同步設計系統，避免產出脫離品牌規範。","用具體提示詞、聊天與註解三種方式迭代，能更快收斂到可交付原型。","保存版本與匯出連結是交付關鍵，能讓設計、產品與工程接續工作。",0,"2026-07-04T19:02:21.637665+00:00","2026-07-04T19:02:21.631+00:00","4278d06b-fe84-418f-a189-27780b8c0b87",{"tags":31,"relatedLang":38,"relatedPosts":42},[32,34,36],{"name":20,"slug":33},"mcp",{"name":18,"slug":35},"claude-code",{"name":17,"slug":37},"claude-design",{"id":15,"slug":39,"title":40,"language":41},"claude-design-synced-prototypes-setup-en","Claude Design setup for synced prototypes","en",[43,49,55,61,67,73],{"id":44,"slug":45,"title":46,"cover_image":47,"image_url":47,"created_at":48,"category":13},"38959780-e00f-4a9f-afd1-a75f24732cd1","rustrover-2026-1-4-right-default-ide-rust-zh","RustRover 2026.1.4 是 Rust 團隊的正確預設 IDE","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783211564090-s3ei.png","2026-07-05T00:32:19.50775+00:00",{"id":50,"slug":51,"title":52,"cover_image":53,"image_url":53,"created_at":54,"category":13},"29e9abee-1972-4b0f-8994-ce27c006a5f3","rust-196-turns-ranges-into-safer-copies-zh","Rust 1.96 讓 range 變可複製","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783189995404-zbpf.png","2026-07-04T18:32:53.059717+00:00",{"id":56,"slug":57,"title":58,"cover_image":59,"image_url":59,"created_at":60,"category":13},"081e378e-a0d9-408b-95ab-003b476c67a5","ai-data-operations-vs-mlops-what-each-owns-zh","AI Data Ops 與 MLOps 的分工","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783168367881-i1cl.png","2026-07-04T12:32:19.522726+00:00",{"id":62,"slug":63,"title":64,"cover_image":65,"image_url":65,"created_at":66,"category":13},"351f5aa9-e7da-4676-a7f3-893336f79a92","opentag-turns-slack-threads-into-actions-zh","OpenTag 讓 Slack 對話變動作","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783148607976-8g9n.png","2026-07-04T07:02:50.017949+00:00",{"id":68,"slug":69,"title":70,"cover_image":71,"image_url":71,"created_at":72,"category":13},"5358fb05-efb5-4238-abc5-fb3933da13e7","gpu-vram-needed-llm-fine-tuning-2026-zh","2026 年 LLM 微調要多少 VRAM","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783128777725-3n1p.png","2026-07-04T01:32:33.595421+00:00",{"id":74,"slug":75,"title":76,"cover_image":77,"image_url":77,"created_at":78,"category":13},"9568ce15-1e27-450b-8c62-c6c97a94372d","claude-sonnet-5-shangshou-bushu-yu-pinggu-zh","Claude Sonnet 5 上手部署与评估","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783125163927-v143.png","2026-07-04T00:32:19.271862+00:00",[80,85,90,95,100,105,110,115,120,125],{"id":81,"slug":82,"title":83,"created_at":84},"855cd52f-6fab-46cc-a7c1-42195e8a0de4","surepath-real-time-mcp-policy-controls-zh","SurePath 推出即時 MCP 政策控管","2026-03-26T07:57:40.77233+00:00",{"id":86,"slug":87,"title":88,"created_at":89},"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":91,"slug":92,"title":93,"created_at":94},"af9c46c3-7a28-410b-9f04-32b3de30a68c","prompting-in-2026-what-actually-works-zh","2026 提示工程，真正有用的是什麼","2026-03-26T08:08:12.453028+00:00",{"id":96,"slug":97,"title":98,"created_at":99},"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":101,"slug":102,"title":103,"created_at":104},"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":106,"slug":107,"title":108,"created_at":109},"a5f94120-ac0d-4483-9a8b-63590071ac6a","claude-code-vs-cursor-2026-zh","Claude Code 與 Cursor 深度對比：202…","2026-03-26T13:27:14.279193+00:00",{"id":111,"slug":112,"title":113,"created_at":114},"0975afa1-e0c7-4130-a20d-d890eaed995e","practical-github-guide-learning-ml-2026-zh","2026 機器學習入門 GitHub 實用指南","2026-03-27T01:16:49.712576+00:00",{"id":116,"slug":117,"title":118,"created_at":119},"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":121,"slug":122,"title":123,"created_at":124},"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":126,"slug":127,"title":128,"created_at":129},"3ce6e6e2-bac5-463e-9f8d-45caabcc61f7","awesome-ai-for-science-research-tools-map-zh","AI 科研工具清單，開始像地圖了","2026-03-27T01:46:50.521945+00:00"]