关于 ui-tokens
这项 Skill 用于查看和修改现有 StyleSeed 项目中的设计令牌，涵盖 JSON 令牌源及其 Tailwind v4/CSS 实现，并要求保持两者同步。
主要功能
- 01以表格列出令牌
- 02在 JSON 和 CSS 中添加令牌
- 03修改令牌值
- 04管理颜色、字体、间距、圆角和阴影
- 05保持 JSON 与 CSS 同步
适用场景
- 01检查 StyleSeed 当前令牌值
- 02添加令牌及其 CSS 实现
- 03更新令牌并检查组件用法
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/ui-tokens确认已加载。
详细介绍
设计令牌管理器
适用场景
当你需要查看、添加或修改 StyleSeed 设计系统中的设计令牌时，请使用此技能。
不适用场景
- 在组件中应用令牌 → 使用
/ss-component或/ss-pattern - 查找现有代码中的令牌违规 → 使用
/ss-lint - 对尚不存在的品牌级颜色／字体进行选择——先定义皮肤，再添加令牌
- 用于非 CSS 令牌系统（Figma、原生 iOS/Android）——仅支持 Tailwind v4 / CSS 变量
操作：$0 | 令牌类型：$1 参数：$ARGUMENTS
令牌文件位置
| 类型 | JSON 源文件 | CSS 实现 |
|---|---|---|
| 颜色 | tokens/colors.json | css/theme.css 中的 :root + @theme inline |
| 排版 | tokens/typography.json | css/fonts.css + css/base.css |
| 间距 | tokens/spacing.json | Tailwind 实用类（无需自定义 CSS） |
| 圆角 | tokens/radii.json | css/theme.css 中的 @theme inline |
| 阴影 | tokens/shadows.json | css/theme.css 中的 :root |
说明
list — 显示当前令牌
读取请求的令牌文件，并以格式化表格显示。
add — 添加新令牌
- 将令牌添加到 JSON 源文件（
tokens/*.json） - 在
css/theme.css的:root下添加 CSS 自定义属性 - 如果需要 Tailwind 实用类，则添加到
@theme inline块中 - 如果有深色模式变体，则添加到
.dark块中
update — 修改现有令牌
- 更新 JSON 源文件中的值
- 更新
theme.css中的 CSS 自定义属性 - 检查所有组件中可能需要更新的直接用法
规则
- 始终保持 JSON 和 CSS 同步
- 使用语义名称，而非描述性名称（使用
--success，而非--green-500） - 颜色应同时支持浅色和深色模式
- 新令牌必须同时添加到 JSON 源文件和 CSS 实现中
示例
用户请求：
使用 @ui-tokens 审查此界面，找出影响最大的问题，并提出可直接用于实现的改进方案。
限制
- 仅当任务与其上游来源和本地项目上下文明确匹配时，才使用此技能。
- 应用更改前，先验证命令、生成的代码、依赖项、凭据和外部服务行为。
- 不要将示例视为环境专属测试、安全审查或用户批准破坏性或高成本操作的替代品。
执行边界
本指南面向现有的 StyleSeed 项目。此单文件入口未包含列出的项目路径、组件、令牌和 /ss-* 命令。编辑前，请确认实际项目根目录并验证这些前置条件；如果资源不存在，请如实说明，不要凭空编造。使用宿主环境支持的调用方式和项目现有约定。布局数值是设计系统的选择，不代表通用的可用性保证。请在实际界面中测试键盘操作、响应式溢出和减少动态效果的设置。
评论
支持 Markdown