Claude Design System
Claude 设计系统技能，输出符合 Anthropic 产品调性的 UI 组件、排版与配色，适合构建 AI 对话类产品界面。
一键安装
在终端运行以下命令安装技能到你的 AI Agent：
npx skillsadd anthropics/skills如何使用
Claude Code：将技能放入 ~/.claude/skills（个人）或项目 .claude/skills 目录，Claude 会自动识别。
Cursor / Windsurf：通过 npx skillsadd 安装后，技能目录会被放入配置路径。
Codex CLI：安装后在技能目录中自动加载，通过名称调用。
标签
Claude设计系统design-systemUI组件Anthropic界面
同类推荐
Brand Guidelines
官方
Anthropic 官方品牌规范技能，根据品牌色板、字体、Logo 与视觉语言生成符合设计规范的页面与素材。
1100.0k
Canvas Design
官方
Anthropic 官方画布设计技能，使用 HTML5 Canvas API 绘制图表、插画与交互式可视化，适合数据呈现与创意表达。
1100.0k
Frontend Design
热门
前端设计技能，结合现代 CSS、Tailwind 与组件库，打造兼具美观与可用性的界面，注重响应式与无障碍。
240.0k
Visual Design
视觉设计指导技能，涵盖配色理论、排版层级、间距系统与视觉一致性原则，帮助 Agent 输出专业级界面。
130.0k
Web Design Guidelines
Web 设计规范技能，汇总现代网页设计最佳实践，涵盖布局栅格、交互反馈、加载体验与移动端适配。
115.0k
Design an Interface
界面设计工作流技能，从需求拆解到线框图、高保真原型与组件拆分，完整覆盖交互界面设计全流程。
102.0k