Claude Code export-css：把设计变量导出成 CSS 自定义属性
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/export-css/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/export-css/`，把核对后的文件保存为 `.claude/skills/export-css/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/export-css`。
中文摘要
从现有代码提取颜色、字号、间距、阴影和圆角，整理为带深色覆盖的 CSS 自定义属性。
SKILL.md 中文导读
可复现示例
样例 token-18 的主题配置定义 {surface: '#FFFFFF', darkSurface: '#111827', spacing: '8px'}。这些值已经使用在页面上。工作步骤
- 按主题和变量类别定位当前代码里的值。
- 输出分组后的自定义属性以及深色覆盖，复查它们是否匹配原始配置。
验收方法
在 :root 输出 {surface: '#FFFFFF', spacing: '8px'} 对应的颜色和间距自定义属性。把深色 surface 的 #111827 放入单独的 @media 覆盖块。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中准备已有设计变量及深色主题覆盖来源。该技能需要能读取实际代码。
常见问题
导出时可以重选颜色吗？
先提取当前实现的值，保持设计系统的一致性。主题覆盖单独输出，使默认和深色来源容易核对。