[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-claude-design-synced-prototypes-setup-en":3,"article-related-claude-design-synced-prototypes-setup-en":30,"series-tools-fcbbb173-58d2-4218-a111-452a7238377e":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},"fcbbb173-58d2-4218-a111-452a7238377e","claude-design-synced-prototypes-setup-en","Claude Design setup for synced prototypes","\u003Cp data-speakable=\"summary\">Set up \u003Ca href=\"\u002Ftag\u002Fclaude-design\">Claude Design\u003C\u002Fa> to build synced prototypes from your design system.\u003C\u002Fp>\u003Cp>This guide is for product teams, designers, and developers who want to create UI concepts in \u003Ca href=\"https:\u002F\u002Fsupport.claude.com\u002Fen\u002Farticles\u002F14604416-get-started-with-claude-design\">Claude Design\u003C\u002Fa> and hand them off cleanly to \u003Ca href=\"https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code\">Claude Code\u003C\u002Fa>. After following the steps, you will have a first project, synced design-system components, a usable review loop, and export paths for sharing or implementation.\u003C\u002Fp>\u003Cp>\u003Ca href=\"\u002Ftag\u002Fclaude\">Claude\u003C\u002Fa> Design is in beta for Pro, Max, Team, and Enterprise plans, and it works on the web at claude.ai\u002Fdesign or in Claude Desktop. The flow is conversational: describe the UI, review the canvas, refine it, and move the result into code when it is ready.\u003C\u002Fp>\u003Ch2>Before you start\u003C\u002Fh2>\u003Cul>\u003Cli>A Claude Pro, Max, Team, or Enterprise account\u003C\u002Fli>\u003Cli>Claude Design enabled for your workspace; Enterprise defaults may be off\u003C\u002Fli>\u003Cli>Claude Desktop or a modern browser for claude.ai\u002Fdesign\u003C\u002Fli>\u003Cli>A design system already set up in your organization\u003C\u002Fli>\u003Cli>Optional but useful: a GitHub repo, screenshots, a codebase, or design files\u003C\u002Fli>\u003Cli>Claude Code installed if you want terminal-based sync and handoff\u003C\u002Fli>\u003Cli>Node 20+ if you plan to use the Claude Code MCP commands locally\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Step 1: Open Claude Design and create a project\u003C\u002Fh2>\u003Cp>Your first outcome is a fresh project that inherits your organization’s design system automatically, so you can start with brand colors, typography, and components already in place.\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783191767986-jvz3.png\" alt=\"Claude Design setup for synced prototypes\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>Go to \u003Ca href=\"https:\u002F\u002Fclaude.ai\u002Fdesign\">claude.ai\u002Fdesign\u003C\u002Fa> or open Claude Desktop and select Claude Design from the sidebar. Create a new project, then name it around the product or screen you want to build.\u003C\u002Fp>\u003Cp>Verification: you should see a blank canvas on the right and a chat panel on the left, with your project ready to accept prompts.\u003C\u002Fp>\u003Ch2>Step 2: Sync your design system from Claude Code\u003C\u002Fh2>\u003Cp>Your second outcome is a live connection to the components your team already uses, which keeps Claude from inventing one-off UI patterns.\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783191771446-k2uc.png\" alt=\"Claude Design setup for synced prototypes\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>In \u003Ca href=\"\u002Ftag\u002Fclaude-code\">Claude Code\u003C\u002Fa>, run the sync command and sign in when prompted:\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>If your system lives in \u003Ca href=\"\u002Ftag\u002Fgithub\">GitHub\u003C\u002Fa>, a local codebase, or uploaded design files, point Claude at the source you want it to use. Claude will pull in the system, compare its output against those components, and correct mismatches before you see them.\u003C\u002Fp>\u003Cp>Verification: you should see the design system imported and reflected in generated components instead of generic placeholders.\u003C\u002Fp>\u003Ch2>Step 3: Add context and write a specific prompt\u003C\u002Fh2>\u003Cp>Your third outcome is a first draft that matches the screen, audience, and content you actually need, not just a generic mockup.\u003C\u002Fp>\u003Cp>Attach screenshots, wireframes, a slide deck, or a repository if they help explain the target experience. Then write a prompt that includes the goal, layout, content, and audience. For example: “Build a landing page for our \u003Ca href=\"\u002Ftag\u002Fapi\">API\u003C\u002Fa> product with a hero section, code examples, and pricing.”\u003C\u002Fp>\u003Cp>Verification: you should see Claude ask clarifying questions only when needed, then generate a design that matches the requested structure and purpose.\u003C\u002Fp>\u003Ch2>Step 4: Refine the canvas with chat, comments, and direct edits\u003C\u002Fh2>\u003Cp>Your fourth outcome is an improved design that moves from rough draft to usable prototype through targeted iteration.\u003C\u002Fp>\u003Cp>Use chat for broad changes like layout, hierarchy, or alternate directions. Use inline comments for component-level fixes such as spacing, button style, or control type. Drag, resize, and align elements directly on the canvas when you want quick visual adjustments.\u003C\u002Fp>\u003Cp>Verification: you should see the canvas update after each change, with comments resolving into visible edits and the layout becoming more polished.\u003C\u002Fp>\u003Ch2>Step 5: Save versions, export, and hand off\u003C\u002Fh2>\u003Cp>Your fifth outcome is a shareable design that can move to stakeholders, another tool, or Claude Code without losing earlier work.\u003C\u002Fp>\u003Cp>Ask Claude to save the current direction before trying a new one, then use the Export button to download a .zip, PDF, PPTX, or standalone HTML. You can also share a link with view-only, comment, or edit access, or send the project to tools like Canva, Miro, Replit, Vercel, or Claude Code.\u003C\u002Fp>\u003Cp>Verification: you should see a saved revision plus an export or share link that another person can open.\u003C\u002Fp>\u003Cp>Claude Design and Claude Code share the same usage pool, so heavy projects and many iterations can consume limits faster. If you reach your quota, wait for the reset or use usage credits if your plan supports them.\u003C\u002Fp>\u003Ch2>Common mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Using a vague prompt. Fix: specify the goal, audience, layout, and content so Claude has enough detail to generate the right screen.\u003C\u002Fli>\u003Cli>Skipping the design system sync. Fix: run \u002Fdesign-sync or import the system source so the output matches your real components.\u003C\u002Fli>\u003Cli>Relying on comments that do not appear. Fix: paste the same feedback into chat, since inline comments can occasionally disappear before Claude reads them.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>What's next\u003C\u002Fh2>\u003Cp>Once you have a working first project, explore the Claude Design admin guide for team controls, or move deeper into Claude Code to automate handoff, import existing code, and build live prototypes from the same synced system.\u003C\u002Fp>","Set up Claude Design to build synced prototypes from your design system.","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-1783191767986-jvz3.png","tools","en","abe21472-cda7-491d-9d7b-f9f64e3154b3",[17,18,19,20,21],"Claude Design","Claude Code","design system","MCP","prototyping",[23,24,25],"Claude Design starts from your organization’s design system, so new projects stay on brand.","Use \u002Fdesign-sync in Claude Code to keep components and handoff synced across design and code.","Refine with chat, inline comments, and canvas edits, then export or share when the design is ready.",0,"2026-07-04T19:02:22.032457+00:00","2026-07-04T19:02:22.023+00:00","a7343b93-37cc-4634-a2bc-707f6275bdb6",{"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-zh","Claude Design 同步原型設定指南","zh",[43,49,55,61,67,73],{"id":44,"slug":45,"title":46,"cover_image":47,"image_url":47,"created_at":48,"category":13},"730d012d-2979-4f5e-b881-545cfa17aa52","rustrover-2026-1-4-right-default-ide-rust-en","RustRover 2026.1.4 is the right default IDE for Rust teams","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783211563197-9rof.png","2026-07-05T00:32:20.046071+00:00",{"id":50,"slug":51,"title":52,"cover_image":53,"image_url":53,"created_at":54,"category":13},"a3df178b-7492-4b4b-8ab6-1de524c2fbdd","rust-196-turns-ranges-into-safer-copies-en","Rust 1.96 turns ranges into safer copies","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783190002602-30jh.png","2026-07-04T18:32:53.529817+00:00",{"id":56,"slug":57,"title":58,"cover_image":59,"image_url":59,"created_at":60,"category":13},"b55fbd0c-846b-4592-953e-e581e1dd4918","ai-data-operations-vs-mlops-what-each-owns-en","AI Data Operations vs MLOps: what each owns","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783168368731-aeq1.png","2026-07-04T12:32:19.952613+00:00",{"id":62,"slug":63,"title":64,"cover_image":65,"image_url":65,"created_at":66,"category":13},"6f72b385-bc6c-47cf-b466-8eb40fed86a7","opentag-turns-slack-threads-into-actions-en","OpenTag turns Slack threads into actions","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783148604415-put0.png","2026-07-04T07:02:50.733486+00:00",{"id":68,"slug":69,"title":70,"cover_image":71,"image_url":71,"created_at":72,"category":13},"fa7e59ac-8216-4826-84a1-3ae5a7fc4f57","gpu-vram-needed-llm-fine-tuning-2026-en","GPU VRAM Needed for LLM Fine-Tuning in 2026","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783128777001-pdg7.png","2026-07-04T01:32:34.039474+00:00",{"id":74,"slug":75,"title":76,"cover_image":77,"image_url":77,"created_at":78,"category":13},"f8c5ce9b-047c-42ee-bc74-66efa81c4177","claude-sonnet-5-shangshou-bushu-yu-pinggu-en","Claude Sonnet 5 上手部署与评估","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783125166441-691z.png","2026-07-04T00:32:19.725711+00:00",[80,85,90,95,100,105,110,115,120,125],{"id":81,"slug":82,"title":83,"created_at":84},"8008f1a9-7a00-4bad-88c9-3eedc9c6b4b1","surepath-ai-mcp-policy-controls-en","SurePath AI's New MCP Policy Controls Enhance AI Security","2026-03-26T01:26:52.222015+00:00",{"id":86,"slug":87,"title":88,"created_at":89},"27e39a8f-b65d-4f7b-a875-859e2b210156","mcp-standard-ai-tools-2026-en","MCP Standard in 2026: Integrating AI Tools","2026-03-26T01:27:43.127519+00:00",{"id":91,"slug":92,"title":93,"created_at":94},"165f9a19-c92d-46ba-b3f0-7125f662921d","rag-2026-transforming-enterprise-ai-en","How RAG in 2026 is Transforming Enterprise AI","2026-03-26T01:28:11.485236+00:00",{"id":96,"slug":97,"title":98,"created_at":99},"6a2a8e6e-b956-49d8-be12-cc47bdc132b2","mastering-ai-prompts-2026-guide-en","Mastering AI Prompts: A 2026 Guide for Developers","2026-03-26T01:29:07.835148+00:00",{"id":101,"slug":102,"title":103,"created_at":104},"3ab2c67e-4664-4c67-a013-687a2f605814","garry-tan-open-sources-claude-code-toolkit-en","Garry Tan Open-Sources a Claude Code Toolkit","2026-03-26T08:26:20.245934+00:00",{"id":106,"slug":107,"title":108,"created_at":109},"66a7cbf8-7e76-41d4-9bbf-eaca9761bf69","github-ai-projects-to-watch-in-2026-en","20 GitHub AI Projects to Watch in 2026","2026-03-26T08:28:09.752027+00:00",{"id":111,"slug":112,"title":113,"created_at":114},"9f332fda-eace-448a-a292-2283951eee71","practical-github-guide-learning-ml-2026-en","A Practical GitHub Guide to Learning ML in 2026","2026-03-27T01:16:50.125678+00:00",{"id":116,"slug":117,"title":118,"created_at":119},"1b1f637d-0f4d-42bd-974b-07b53829144d","aiml-2026-student-ai-ml-lab-repo-review-en","AIML-2026 Is a Bare-Bones Student Lab Repo","2026-03-27T01:21:51.661231+00:00",{"id":121,"slug":122,"title":123,"created_at":124},"6d1bf3f6-e191-4d30-b55b-8a0722fa6afe","ai-trending-github-repos-and-research-feeds-en","AI Trending Tracks Repos and Research Feeds","2026-03-27T01:31:35.709532+00:00",{"id":126,"slug":127,"title":128,"created_at":129},"010539a1-4c3a-4bd3-937a-26616422ee0d","awesome-ai-for-science-research-tools-map-en","Awesome AI for Science Is Becoming a Real Research Map","2026-03-27T01:46:50.89513+00:00"]