# Claude Design 还是设计系统 Skill：应该用产品、项目技能，还是先修设计规范？ > 先判断你需要的是 Claude Design 的视觉产物、Claude Code 的仓库项目 skill、社区 UI/UX skill，还是补齐设计系统本身。 - URL: https://blog.laozhang.ai/zh/posts/claude-design-system-skill - Published: 2026-04-20 - Updated: 2026-10-10 - Author: LaoZhang AI Team (https://blog.laozhang.ai/zh/about) - Topic: Claude Code - Tags: Claude Design, Claude Code, Skills, 设计系统, Anthropic --- 不要先问“有没有一个 Claude 设计系统 skill 可以装”。先判断你缺的是哪一层。到 2026 年 10 月 10 日，Claude Design 是 Anthropic 官方的视觉创作产品入口，所有套餐（含免费版）都能用；Claude Code 项目 skill 更适合让代码修改遵守仓库里的 tokens、组件、示例和检查；社区 UI/UX skill 可以帮助改善默认审美，但必须先看来源、文件和脚本；如果设计系统本身没有可靠资料，继续加 skill 只会让 Claude 更自信地猜。 | 你真正要做的事 | 先选哪条路 | |---|---| | 在 Claude 里做原型、视觉稿、单页或演示素材 | 用 Claude Design（2026 年 10 月 8 日起所有套餐可用） | | 让 Claude Code 修改仓库 UI 时遵守组件和 tokens | 做或使用 `.claude/skills/` 下的项目 skill | | 想快速改善 UI/UX 输出的默认质量 | 先审查社区 skill，再决定是否安装 | | 团队 UI 一直不一致 | 先修 tokens、组件示例、截图、无障碍规则和检查 | 停止规则很简单：如果设计系统没有可信的 tokens、组件文档、截图示例、验收标准或自动检查，新的 skill 不是解法。它最多把一个不稳定的源头包装得更正式。 ## 这其实是四个不同问题 > 事实边界：本文的产品和可用性信息来自 Anthropic 的 [Claude Design 公告](https://www.anthropic.com/news/claude-design-anthropic-labs)、Claude 的 [Skills overview](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview)、Claude Code 的 [skills 文档](https://code.claude.com/docs/en/skills) 和 Anthropic 的 [custom skills 文档](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/custom-skills)。第三方 skill 名称只能当作需要审查的例子，不能当作 Anthropic 背书。 ![Claude Design、项目 skill、社区 UI UX skill 和治理层的选择表](https://blog.laozhang.ai/posts/zh/claude-design-system-skill/img/route-board.jpg) 围绕这个话题的中文资料常把 Claude Design、Claude Code Skills、UI/UX skill、设计系统经验贴和视频混在一起。这说明需求真实存在，也说明问题容易走偏。你要解决的可能不是“装哪个包”，而是“哪一层应该负责这个输出”。 Claude Design 是产品入口。它适合从自然语言生成设计、原型、slides、one-pager 和品牌方向稿。如果你的任务是“先看起来是什么样”，它通常是第一条路。 Claude Code 项目 skill 是仓库工作流入口。它适合在一个 repo 内反复加载规则、参考资料、示例和检查。如果你的任务是“改这个界面，但必须沿用我们的组件和设计系统”，项目 skill 更合适。 社区 UI/UX skill 是可选加速器。它可能给出更好的流程、审美默认值或设计检查清单，但它不能替代你的设计系统，也不能因为出现在目录或社交媒体里就自动可信。 设计系统治理是源头。tokens、组件库、Storybook、截图、交互规则、无障碍标准和 CI 检查应该先在仓库或团队工具里清楚存在。skill 可以指向它们，但不应该成为唯一来源。 ## 需要视觉产物时，先看 Claude Design Anthropic 在 2026 年 4 月 17 日通过 Anthropic Labs 发布 Claude Design。官方说明把它定位为用 Claude 创建设计、原型、slides、one-pagers 等视觉工作的产品；发布时它由 Claude Opus 4.7 支持，是 research preview，逐步向 Claude Pro、Max、Team 和 Enterprise 开放。 这些访问限制现在已经取消。2026 年 9 月 16 日起，Claude Design 也能在每个 Claude 对话里用（在输入框选 Output > Design，或在 Artifacts 标签页选 Design 模板），Claude Code 里用 `/design`；10 月 8 日它结束测试，Free、Pro、Max、Team、Enterprise 都能用并默认开启，Enterprise 从 10 月 15 日起默认开启，所有者也可以提前在 Organization settings > Artifacts 打开。独立站 `claude.ai/design` 在 2026 年 12 月 14 日关闭，见 Anthropic 的 [Claude Design 帮助页](https://support.claude.com/zh-CN/articles/14604416)。还是看不到时，先查 Settings > Capabilities 里的“Cloud code execution and file creation”是否打开，Enterprise 找所有者。菜单里没有是设置问题，不是少装了 skill。 Claude Design 里提到的“应用团队设计系统”也要理解准确：这是产品能力，前提是 Claude Design 获得相应访问。它和 `.claude/skills/design-system/SKILL.md` 这种本地项目 skill 不是同一件事。前者帮助 Claude 在产品界面里生成视觉产物，后者帮助 Claude Code 在仓库里按规则改代码。 两者现在在一处交汇。按 Anthropic 的[设计系统设置页](https://support.claude.com/zh-CN/articles/14604397)，设计系统现在是 Claude 里的一种 artifact，Pro、Max、Team、Enterprise 可用（测试版，免费版没有）。可以在对话里用品牌素材、演示文稿、logo、字体或 Figma 文件生成；如果设计系统已经是 React 组件，在 Claude Code 里运行 `/design-sync`，它会直接读取 tokens 和组件。从独立站迁移的团队点“Migrate team design systems”。生成后，任何对话（包括 Claude Code）都能用它。我们的理解是：帮助页把设计系统描述为 Claude 套用到新设计和幻灯片上的颜色、字体、组件和版式，没有提到跑测试、CI 或仓库规则，所以改代码这件事仍然归项目 skill 和确定性检查。 所以，如果你的输出是视觉方向、概念稿或演示素材，先检查 Claude Design。若输出要落成生产代码、复用组件、跑测试或通过团队验收，就不要把 Claude Design 当成全部答案。 ## 仓库要守住设计系统时，做项目 skill 设计系统项目 skill 的价值，是让 Claude Code 在 UI 工作中反复读取正确资料，而不是每次靠你重新解释“请做得像我们产品”。好的 skill 应该把 Claude 指向已有的 tokens、组件、示例、无障碍要求和检查。 ![Claude Code 设计系统项目 skill 的组成](https://blog.laozhang.ai/posts/zh/claude-design-system-skill/img/skill-anatomy.jpg) 默认路径可以是： ```text .claude/skills/design-system/SKILL.md ``` 一个最小结构可以这样写： ```md --- name: design-system description: Use when UI work must follow this repository's tokens, components, examples, accessibility rules, and visual QA checks. --- # Design System Skill Use when: - creating or editing UI in this repository - translating a mockup into production components - reviewing visual consistency before a frontend PR Read first: - `design/tokens.json` - `src/components/ui/` - `storybook/` - `docs/design-system.md` Rules: - use existing components before creating new primitives - preserve token names instead of hard-coding colors or spacing - check responsive, keyboard, and contrast behavior - explain any component divergence before editing ``` 这个例子故意很克制。skill 不需要把整个设计系统复制进去。它应该说明什么时候使用、先读哪些真实文件、哪些规则不可破坏、哪些检查要跑。真正的设计系统仍然在 tokens、组件、文档和测试里。 如果你还没装好 Claude Code，先看 [Claude Code 安装指南](https://blog.laozhang.ai/zh/posts/claude-code-install)。如果你要的是更宽的 skill 起步路径，[Claude Code Skills 选择指南](https://blog.laozhang.ai/zh/posts/claude-code-best-skills) 会比这篇更适合。 ## 社区 UI/UX skill 先审查，再安装 社区设计类 skill 的需求很明显。中文内容里也能看到“UI/UX Pro Max”“Claude Code Skills 完全指南”“设计师必备”等说法。它们可能有用，但不能直接等同于官方能力。 ![社区 Claude UI UX skill 的审查清单](https://blog.laozhang.ai/posts/zh/claude-design-system-skill/img/trust-checklist.jpg) 安装前至少看四点。 **来源。** 谁维护，仓库在哪里，最近是否更新，作者是否说明适用场景。一个热门帖子或转载目录不够。 **内容。** 打开 `SKILL.md`、references、examples 和 scripts。只有审美口号的 skill 通常帮不了生产工作。带脚本的 skill 必须先读脚本。 **风险。** 看安装路径、shell 命令、文件访问、网络访问，以及它是否要求 Claude 执行本该由人确认的步骤。设计工具也可能带来操作风险。 **匹配度。** 一个偏 React/shadcn 的 skill 未必适合移动端或原生应用。一个风格包可以改善初稿，但不一定能守住你的组件系统。真正有价值的社区 skill 应该减少重复工作，而不是替你决定设计系统。 实际顺序是：先读文件，再安装；先在一次性分支上试，再决定是否留下。 ## 有些场景不该继续加 skill 如果规则应该一直生效，用 `CLAUDE.md`。例如命名约定、首选组件库、无障碍底线和通用项目行为，不一定适合做成按需加载的 skill。 如果问题是没有真实来源，补设计系统资料。tokens、组件 stories、截图示例、交互说明和验收标准应该进入仓库或团队知识库。skill 只能指路。 如果规则需要强制执行，用 hooks、lint、typecheck、视觉回归或 CI。Claude 可以遵守说明，但确定性检查能直接失败错误输出。 如果 Claude 缺的是外部访问，用 MCP 或专门集成。比如设计系统在私有 Figma、token 服务、issue tracker 或外部文档里，skill 可以写流程，但工具连接才提供数据。需要选这一层时，看 [Claude Code MCP server guide](https://blog.laozhang.ai/zh/posts/claude-code-best-mcp-servers)。如果你在比较 memory、skills 和 MCP，Claude Code memory vs MCP vs skills 是更宽的背景。 ## 最小落地顺序 1. 从 Output > Design 或 Artifacts 标签页打开 Claude Design，2026 年 10 月 8 日起所有套餐都有；如果任务是视觉产物，优先试产品入口。组件是 React、套餐在 Pro 及以上的话，可以在 Claude Code 里用 `/design-sync` 把它们变成 Claude Design 会套用的设计系统。 2. 盘点仓库里已有的设计系统资料：tokens、组件、示例、截图、无障碍规则和检查。 3. 只有当 Claude Code 需要在 UI 工作中反复读取这些资料时，才创建 `.claude/skills/design-system/SKILL.md`。 4. skill 只写方法：什么时候用、先读哪些文件、哪些规则不能破、要跑哪些检查。 5. 用一个小 UI 改动测试它，看组件复用、token 忠实度、无障碍、响应式和人工修正量。 6. 社区 UI/UX skill 放在后面；先在分支里比较结果，不能减少真实工作量就删掉。 如果问题不是 task-specific skill，而是项目偏好需要长期保留，先看 [Claude Code memory guide](https://blog.laozhang.ai/zh/posts/claude-code-memory)。 ## 常见问题 ### Anthropic 有官方的 Claude 设计系统 skill 吗？ 没有一个官方产品正好叫这个名字。最接近的官方部分是 Claude Design 的设计系统（Pro 及以上，测试版），可以在 Claude Code 里用 `/design-sync` 从 React 组件库生成；Claude Design 是官方视觉产品入口。Claude Code skills 是官方可复用工作流机制。`.claude/skills/` 下的设计系统 skill 是你可以为项目创建的工作流文件，第三方 UI/UX skill 则是需要审查的社区包。 ### 设计师应该先用 Claude Design 还是 Claude Code？ 如果输出是视觉产物，先用 Claude Design。如果输出要改仓库、复用组件或通过检查，先用 Claude Code 项目 skill。两者可以衔接，但不要混成同一个入口。2026 年秋天起两者可以直接衔接：Claude Code 里的 `/design` 能创建和修改设计，`/design-sync` 能把组件库变成设计系统。 ### 设计系统项目 skill 里应该放什么？ `SKILL.md` 里放流程和边界，再指向真实来源：token 文件、组件目录、Storybook、设计系统文档、截图、无障碍规则和检查。skill 是方法层，不是设计系统本体。 ### 社区 UI/UX skills 安全吗？ 不一定。安全取决于来源、文件、脚本、权限和与你项目的匹配。先读包内容，脚本不要盲跑，最好在一次性分支上试。 ### 什么时候应该跳过新的 skill？ 当真正缺的是设计系统资料、确定性检查或外部工具访问时，就先补这些。一个 skill 应该放大可靠系统，而不是掩盖源头不稳。 ## 参考来源 本文引用的外部页面，按正文出现顺序排列。最后更新于 2026-10-10。 - [Claude Design 公告](https://www.anthropic.com/news/claude-design-anthropic-labs) (anthropic.com) - [Skills overview](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview) (docs.claude.com) - [skills 文档](https://code.claude.com/docs/en/skills) (code.claude.com) - [custom skills 文档](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/custom-skills) (docs.claude.com) - [Claude Design 帮助页](https://support.claude.com/zh-CN/articles/14604416) (support.claude.com) - [设计系统设置页](https://support.claude.com/zh-CN/articles/14604397) (support.claude.com)