SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场ss-tokens

ss-tokens

设计与创作

查看项目

更新于 10-15 14:29

技能介绍

用途

ss-tokens 是 StyleSeed 工作流中的设计令牌管理器，主要解决两类任务：一是从单一品牌主色（key color）推导出一套可访问的语义调色板；二是查看、添加和修改项目中的设计令牌。当用户提供品牌色，或需要浅色/深色模式令牌时使用本技能。

主要能力

  • 生成颜色（generate color）：从单一主色推导整套系统，不靠肉眼挑选第二个颜色，也不复制预设。通过内置的共享 StyleSeed 生成器完成。
  • 列出令牌（list）：读取并以格式化表格显示所请求的令牌文件。
  • 添加令牌（add）：将令牌加入 JSON 源文件，并在 CSS 中补充对应自定义属性。
  • 更新令牌（update）：修改 JSON 源文件中的值，同步更新 theme.css 中的 CSS 自定义属性，并检查所有组件中可能受影响的直接使用处。

令牌文件位置

类型 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

使用方式

生成调色板

运行共享的 StyleSeed 生成器：

node <installed-ss-tokens>/scripts/generate-palette.mjs \
  --key-color "#276B5E" \
  --mode light \
  --character calm \
  --harmony auto \
  --temperature neutral \
  --out .styleseed/palette.json

生成器内置于本技能中，供仅安装技能的安装方式使用，并在仓库生成期间从规范引擎/颜色源确定性镜像而来。

支持的控制项包括：

  • 模式：light | dark
  • 风格：calm | balanced | vivid | deep
  • 和声：auto | tonal | adjacent | contrast
  • 表面温度：neutral | warm | cool

生成器会保留主色相，将色度映射进 sRGB 而不发生通道裁剪，构建 11 级 OKLCH 主色/强调色色阶，对强调色与主色及保留的状态色相进行评分，将原始色映射到语义角色，并调整填充亮度直到文本/操作/焦点配对通过对比度要求。

使用 --format css 输出 CSS 变量，或使用 JSON 获得可审计的结果。只有当 valid 为 true 且 contrast 中每一项都通过时，才可将调色板标记为有效。在 STYLESEED.md 中持久化 Key color、Palette character、Palette mode、Palette harmony 和 Surface temperature，然后运行 $ss-resolve；解析器会输出相同的 .styleseed/palette.json 和 palette.css。

列出令牌

读取并显示所请求的令牌文件，以格式化表格呈现。

添加令牌

  1. 将令牌加入 JSON 源文件（tokens/*.json）
  2. 在 css/theme.css 的 :root 下添加 CSS 自定义属性
  3. 若需要 Tailwind 工具类，加入 @theme inline 块
  4. 若有深色模式变体，加入 .dark 块

更新令牌

  1. 更新 JSON 源文件中的值
  2. 更新 theme.css 中的 CSS 自定义属性
  3. 检查所有组件中可能需要更新的直接使用处

适用场景

  • 用户提供品牌主色，需要生成语义化调色板
  • 需要浅色/深色模式的设计令牌
  • 需要查看、添加或修改颜色、排版、间距、圆角、阴影等令牌
  • 使用 Tailwind v4 / CSS 变量的令牌系统

限制与边界

  • 不适用于在组件中应用令牌 → 应使用 /ss-component 或 /ss-pattern
  • 不适用于在现有代码中查找令牌违规 → 应使用 /ss-lint
  • 不适用于非 CSS 令牌系统（Figma、原生 iOS/Android）——仅支持 Tailwind v4 / CSS 变量
  • 使用前需遵循每会话一次的更新预检（update preflight）

注册表优先的工件边界

当 .styleseed/project.json 和 .styleseed/artifacts/index.json 存在时，先解析所请求的工件 ID，然后只读取 .styleseed/bundles/<artifact-id>.md 和 .styleseed/manifests/<artifact-id>.json。对于注册表项目，绝不回退到全局旧版 bundle。旧版项目仅在没有注册表时，才可使用 .styleseed/effective-rules.md。

规则

  • 始终保持 JSON 与 CSS 同步
  • 使用语义名称，而非描述性名称（用 --success 而非 --green-500）
  • 颜色应同时支持浅色和深色模式
  • 新令牌必须同时加入 JSON 源和 CSS 实现
  • 将预设配方视为维护的默认值，而非可用颜色的上限
  • 风格与角色分配是比单纯的互补/三角几何更强的设计控制手段

参数

Action: $0 | Token type: $1 Arguments: $ARGUMENTS