
关于
列出、添加和更新 StyleSeed 设计令牌,同时保持 JSON 源、CSS 变量和暗色模式值同步。
name: ui-tokens description: "列出、添加和更新 StyleSeed 设计令牌,同时保持 JSON 源文件、CSS 变量和暗色模式值同步。" category: design risk: safe source: community source_repo: bitjaru/styleseed source_type: community date_added: "2026-04-08" author: bitjaru tags: [ui, tokens, design-system, theming, styleseed] tools: [claude, cursor, codex, gemini]
UI 令牌
概述
作为 StyleSeed 的一部分,此技能管理设计令牌,防止真实来源文件之间产生偏差。适用于同时使用 Toss seed 的 JSON 令牌文件和 CSS 实现的团队。
何时使用
- 需要检查当前令牌集时使用
- 想要添加新的颜色、阴影、圆角、间距或排版令牌时使用
- 需要更新令牌并安全传播更改时使用
- 项目同时拥有必须保持对齐的 JSON 令牌文件和 CSS 变量时使用
工作原理
支持的操作
list:以人类可读形式显示当前令牌add:引入新令牌并将其连接到实现中update:更改现有令牌值并审计下游使用
典型的真实来源分割
对于 Toss seed:
- JSON 位于
tokens/下 - CSS 变量和主题连接位于
css/theme.css下 - 排版支持位于字体和基础 CSS 文件中
规则
- 保持 JSON 和 CSS 同步
- 优先使用语义名称而非描述性名称
- 在相关处提供暗色模式支持
- 更新令牌实现,而不仅仅是源清单
- 检查可能已过时的直接组件使用
输出
返回:
- 请求的令牌清单或更改摘要
- 所有涉及的文件
- 应审查的受影响组件或工具
- 如果新令牌需要更广泛采用的后续操作
最佳实践
- 添加语义意图,而非一次性品牌色调
- 通过扩展现有比例来避免令牌膨胀
- 保持命名与系统其余部分一致
- 引入新颜色时审查对比度和无障碍性
其他资源
限制
- 仅在任务明确匹配上述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少必需的输入、权限、安全边界或成功标准,请停下来要求澄清。
兼容工具
Claude CodeCursor
标签
前端开发