design-system-tokens
Codex 设计系统技能：整理 CSS 变量和深浅主题
EnglishCodex 安装步骤
- 在临时目录用 git clone https://github.com/Eldergenix/Codex-Design.git 取得仓库，进入克隆目录后运行 git checkout --detach 99b4b08ff62b8dd3a7a112438c1460fd6a02d09c，核对本页标明的 SKILL.md。
- 把整个 skills/design-system-tokens 文件夹复制到你的项目中，路径为 .agents/skills/design-system-tokens，保留同目录的脚本、模板与参考资料。
- 从项目目录打开 Codex，在 CLI 输入 /skills 或通过 $design-system-tokens 选择技能，再用下方样例验证。列表没有更新时重新启动 Codex。
中文摘要
把页面中分散的颜色、字号、间距和圆角梳理成可复用的语义变量。适合已有组件却缺少一致主题的项目，可同时检查表面层级和交互状态。
SKILL.md 中文导读
可复现示例
在一个示例页面准备普通卡片、弹层和主按钮。它们分别硬编码了背景、边框和焦点颜色。请用 design-system-tokens 技能提议一个最小的 CSS 变量映射，并列出浅色与深色的验证项。工作步骤
- 列出重复值及其使用位置，把页面表面、弹层和操作状态区分开。
- 根据现有设计语言提出两套主题值，先替换共享组件，再检查单页样式。
- 用键盘聚焦按钮，逐一看两种主题下的文本、边框和焦点。
验收方法
输出能说明同一语义变量的两套主题值，覆盖卡片、弹层与按钮焦点。将一种主题的变量值改动一次，应影响相应组件而无需修改每个选择器。
GitHub 原文 · 更新日期
适用环境
适用于可加载项目技能的 Codex。示例可在本地项目中验证。若要采用仓库提供的默认设计语言，可同时保留 codex-design-core 的参考文档。
常见问题
什么时候要增加新的颜色变量？
先检查现有变量能否表达所需角色。如果同一语义在不同组件重复出现，可以新增一个语义变量，并为两种主题和焦点状态核对对比度。