Claude Code design-system：给新项目补齐设计变量和组件约定
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/design-system/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/design-system/`，把核对后的文件保存为 `.claude/skills/design-system/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/design-system`。
中文摘要
用模板记录品牌颜色、排版、间距、表单和响应式约定，方便新组件复用同一套系统。
SKILL.md 中文导读
可复现示例
模板样例 tokens-29 已有 {action: 'brand-primary', surface: 'page-canvas'}，表单里 Email 目前只有占位提示。工作步骤
- 用真实品牌变量替换模板占位，明确按钮、表单与导航的复用范围。
- 预览响应式布局及键盘操作，按照适用条款独立验证无障碍要求。
验收方法
设计约定记录 {action: 'brand-primary', surface: 'page-canvas', emailLabel: 'visible'}。核对项目真实变量，并在样式与键盘测试中检查可读名和焦点。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中打开项目，先提供已有颜色和组件库。模板里的占位值需要换成实际变量，正式无障碍判定以适用的 WCAG 条款为准。
常见问题
能把模板数字当作正式标准吗？
把模板中的字号、间距和交互尺寸当作待配置示例。需要正式核对时，查 WCAG 和目标平台中适用于当前控件的要求。