技能介绍

设计系统演进中的同步难题

在维护像 StyleSeed 这样的设计系统时，设计令牌的分发往往依赖人工约定。令牌同时存在于 JSON 配置文件（如 tokens/colors.json）和 CSS 变量（如 css/theme.css 的 :root 与 @theme inline）中。手动添加一个颜色或间距变量时，极易出现 JSON 已更新但 CSS 未同步的情况。这种分散管理会导致组件渲染与设计源脱节。该技能通过标准化流程解决此问题，强制保持源数据与渲染层的一致性。

核心工作流：从定义到分发

该技能通过 Action: $0 参数驱动，支持 list、add 和 update 三种核心操作。

list 查阅：读取目标文件并以格式化表格呈现，便于快速盘点当前令牌资产。
add 新增：遵循严格的双写逻辑。首先写入 tokens/*.json 源文件，随后将自定义属性注入 css/theme.css。若变量需要被 Tailwind 工具类消费，会自动补充至 @theme inline 块；若涉及暗色模式，则同步更新 .dark 类。
update 修改：在更新数值后，会提示排查直接引用该变量的组件，确保旧值不被硬编码残留。

该技能强调语义化命名（如 --success 优于 --green-500），并要求颜色令牌必须兼顾亮色与暗色模式。

适用边界与限制

该技能仅负责设计令牌的定义与维护，不负责组件内部的令牌应用。若需在组件中消费令牌，请使用 /ss-component 或 /ss-pattern；若需审计现有代码的令牌违规情况，请使用 /ss-lint。此外，该技能仅支持基于 CSS 的实现（Tailwind v4 / CSS variables），无法处理 Figma 或原生 iOS/Android 的非 CSS 令牌系统。