通过 Claude Design 设计系统导入加速从设计到代码

将你现有的设计令牌和组件导入 Claude Design，让它自动生成符合你品牌规范的 UI。这消除了手动重建设计与代码的循环，并让原型从初稿起就与你的系统保持一致。

Claude Design 现在支持直接从 GitHub 导入你的整个设计系统。Claude 不再生成随意的 UI，而是学习你的组件库、配色方案、排版和间距规则--然后构建遵循你标准的原型。这一点很重要，因为它弥合了设计师想要的与开发者所实现之间的差距。

要进行设置，请在你的仓库根目录创建一个 design-system-spec.json 文件，用于映射你的设计令牌、组件文件和 SVG 资源。该文件看起来很简单：只需将 Claude 指向你的仓库 URL，指定你的框架（React、Vue 等），并列出设计资源的路径。提交一次后，每次打开 Claude Design 时都可以导入你的系统。

这是一个真实的工作流程：一位产品经理描述其 SaaS 的新设置面板：“重建我们的设置页面，包含三个标签页：个人资料、账单、团队。将通知开关移到偏好设置。”Claude Design 使用你系统中的实际组件和颜色生成原型。设计师在画布上审阅，用滑块调整间距，并直接在元素上添加实现说明。然后他们点击“发送到 Claude Code”--Claude Code 会将整个内容作为机器可读的规范接收，而不是截图，并可以将其实现。对于已经使用 Claude Pro 或 Max 的团队来说，这消除了将模型图粘贴到代码中并手动重建的痛苦步骤。

一个限制：导入是快照。如果你在导入后更新了组件库，请在 Claude Code 中运行 /design-sync 命令来刷新。把它当作系统更新后重新构建测试--同步只是一条命令，而不是手动过程。