📚 离职知识库

Claude Design 前端 UI 设计方法论

整理自 2026-07-24 X（Twitter）上 @dotey / @lemomo_ai / @LinearUncle 的讨论，并结合 Claude 官方文档核实。

#核心心智模型

不再是"每次让 AI 现场画一个 UI"，而是先沉淀一套可复用的 Design System（颜色/字体/间距 tokens + 真实 React 组件库），之后所有设计产出都基于这套系统生成，代码和设计之间靠 CLI 双向同步，避免"AI 生成的 UI 各自为政、硬编码样式"的问题。

#第一步：搭建 Design System（只做一次，官方四步流程）

  1. 打开 claude.ai/design（或 Claude 桌面端 Design 侧边栏），在项目选择器左下角切换/新建组织。
  2. 上传品牌资产，支持多种源材料：
    • 直接链接/上传代码仓库（推荐——已有 React 组件库、tokens.css）
    • 原型图、截图、设计文件
    • PPT / PDF 等设计文档
    • 独立资产：logo、调色板、字体样本
  3. 审核生成结果：Claude 会自动提取色彩系统（主色/辅助色/强调色）、排版规范、可复用组件（按钮/卡片/导航等）、布局模式（间距/栅格），建议先拿一个测试项目验证准确度。
  4. 确认无误后开启 Published，组织内此后新建的项目会自动继承这套设计系统。

#第二步：日常做 UI，全部推到 Claude Design

  • 新建项目会自动继承已发布的 Design System。
  • 用自然语言描述需求（例如"做一个用户仪表盘…用我们的 Primary Button 和 spacing tokens"），或直接贴截图/线框图要求"按 design system 重做"。
  • 迭代方式：聊天框改整体结构 / 画布上对单个组件加 inline comment / 直接拖拽调整位置和尺寸。
  • 完成后可导出 HTML 原型，也可 Handoff to Claude Code，或 /push-to-figma 把变量集和组件推回 Figma。

#第三步：CLI 端 push/pull React 组件（最关键的一环）

在 Claude Code 里：

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
  • /design-login 登录
  • /design-sync 把 Claude Design 画布里的布局和组件同步为代码（自动建文件结构、正确 import 组件），此后 Claude 生成代码时会优先复用真实 React 组件和 CSS tokens，而不是现场硬编码样式
  • 日常直接说"根据刚才 Design 里那个页面生成对应组件，放到 src/components/，复用我们的 tokens"，或反向"把当前这个组件 push 回 Design 更新 design system"，实现双向同步

⚠️ 需注意的局限（社区已反馈的 issue）：design-sync 目前只支持 React 组件库，Svelte 等其他框架的 design system 暂时无法导入。

#补充：不想上官网操作的替代方案

宝玉（@dotey）提到有对应的 Skill 可以在本地直接跑这套流程，不用打开网站，且可以换用非 Claude 模型（据说国产模型效果也不错）。具体仓库待后续查找确认。

#参考来源

来源：沉淀/02-AI与API/Claude Design 前端UI设计方法论.md（整理于 2026-08-18）

相关笔记