mcpField
S
ss-tokens

ss-tokens

github.com/bitjaru设计与 UI993831 次安装1 天前更新
代码仓库

关于 ss-tokens

ss-tokens 是 StyleSeed 的设计令牌管理技能，供维护 Tailwind v4 与 CSS 变量的项目使用。它支持生成调色板及同步 JSON 源文件和 CSS 实现。

主要功能

  1. 01按关键色生成调色板
  2. 02列出当前设计令牌
  3. 03添加或更新令牌
  4. 04同步 JSON 与 CSS
  5. 05支持明暗模式颜色

适用场景

  1. 01为项目生成颜色系统
  2. 02检查现有令牌配置
  3. 03添加间距或阴影令牌
  4. 04更新组件使用的令牌

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/bitjaru/styleseed --skill ss-tokens

安装后在 Claude Code 中输入/ss-tokens确认已加载。

附带文件scripts/generate-palette.mjsscripts/generator.mjs

详细介绍

在执行此工作流之前，请完成每个会话只需执行一次的更新预检。

设计令牌管理器

注册表优先的制品边界

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

不要用于以下情况

  • 在组件中应用令牌 → 使用 /ss-component 或 /ss-pattern
  • 查找现有代码中的令牌违规 → 使用 /ss-lint
  • 用于非 CSS 令牌系统（Figma、原生 iOS/Android）——仅支持 Tailwind v4 / CSS 变量

操作：$0 | 令牌类型：$1 参数：$ARGUMENTS

令牌文件位置

类型JSON 源文件CSS 实现
颜色tokens/colors.jsoncss/theme.css 中的 :root + @theme inline
字体排版tokens/typography.jsoncss/fonts.css + css/base.css
间距tokens/spacing.jsonTailwind 工具类（无需自定义 CSS）
圆角tokens/radii.jsoncss/theme.css 中的 @theme inline
阴影tokens/shadows.jsoncss/theme.css 中的 :root

说明

generate color — 从一种关键颜色推导系统

不要凭感觉挑选第二种颜色，也不要复制预设。运行共享的 StyleSeed 生成器：

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

此生成器随此技能一同打包，可用于仅安装技能的场景；在生成仓库时，它会从规范的 engine/color 源进行确定性镜像。

支持的控制项包括 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。

list — 显示当前令牌

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

add — 添加新令牌
  1. 将令牌添加到 JSON 源文件（tokens/*.json）
  2. 在 css/theme.css 的 :root 下添加 CSS 自定义属性
  3. 如果需要 Tailwind 工具类，将其添加到 @theme inline 块中
  4. 如果有深色模式变体，将其添加到 .dark 块中
update — 修改现有令牌
  1. 更新 JSON 源文件中的值
  2. 更新 theme.css 中的 CSS 自定义属性
  3. 检查所有组件，查看是否有可能需要更新的直接用法

规则

  • 始终保持 JSON 和 CSS 同步
  • 使用语义名称，而非描述性名称（使用 --success，而非 --green-500）
  • 颜色应同时支持浅色和深色模式
  • 新令牌必须同时添加到 JSON 源文件和 CSS 实现中
  • 将预设配方视为持续维护的默认项，而非可用颜色的上限。
  • 相较于仅依赖互补色/三角配色几何关系，特征和角色分配是更有力的设计控制手段。

评论

支持 Markdown