Claude Code design-system-starter 技能：为按钮建立亮暗主题令牌
EnglishClaude Code 安装步骤
- 从固定版本 GitHub 工作副本获取完整的 `cli-tool/components/skills/development/design-system-starter` 目录。
- 将目录放入目标项目的 `.claude/skills/`，确认 `.claude/skills/design-system-starter/SKILL.md` 存在，再从项目根目录启动 Claude Code 并输入 `/design-system-starter`。
中文摘要
为界面组件定义语义颜色、尺寸、状态和文档示例。技能自带令牌 JSON、React 组件示例和检查清单，适合从单个按钮做亮暗主题试点。
SKILL.md 中文导读
可复现示例
给虚构的社区活动页设计一个主按钮。两套主题采用同一个语义令牌名，设计出默认、禁用和键盘焦点状态，并给出 React 用法说明。工作步骤
- 先从原始颜色和尺寸提取语义令牌，并写出亮暗主题取值。
- 按组件状态验证默认、禁用、键盘焦点和对比度，再把用法写入文档。
验收方法
应得到一组亮暗主题令牌、按钮状态表和用法示例。可以对照模板和检查清单验证焦点可见，以及按钮文字在两套主题中都清晰。
GitHub 原文 · 更新日期
适用环境
需要 Claude Code 和固定版本的完整技能目录。接入项目时准备已有样式规范，以及待验证的 React 组件或演练页。
常见问题
组件为什么适合引用语义令牌？
语义令牌描述颜色或尺寸在界面中的角色。切换主题时可以更改令牌取值，组件继续引用同一名称。