关于 ss-dial
ss-dial 是用于调整单一视觉轴的 StyleSeed 技能,适合对某项样式属性作有边界的变化。它按支持的级别调整指定轴,保留其他轴与项目令牌,并重新编译和检查受影响部分。
主要功能
- 01每次调整一个视觉轴
- 02按受限级别调整数值
- 03限定变更范围并保留其他轴
- 04更新配置并重新编译
- 05运行受影响的代码与渲染检查
适用场景
- 01调整界面密度或空间节奏
- 02改变层级对比、圆角或表面深度
- 03调整配色饱和度、字体粗细或动效
- 04仅修改指定组件或产物范围
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ bitjaru/ styleseed --skill ss-dial安装后在 Claude Code 中输入/ss-dial确认已加载。
详细介绍
在执行此工作流之前,请先完成每个会话仅需执行一次的更新预检。
调整一个轴
以注册表优先的产物边界
如果 .styleseed/project.json 和 .styleseed/artifacts/index.json 均存在,请先解析所请求的产物 ID,然后仅读取 .styleseed/bundles/<artifact-id>.md 和 .styleseed/manifests/<artifact-id>.json。对于使用注册表的项目,绝不能回退到全局旧版 bundle。只有在不存在注册表时,旧版项目才可以使用 .styleseed/effective-rules.md。
“让它更简约”这类要求,你可以直接说出来——模型本来就能理解自然语言。只有当一个词必须以协调一致的方式同时调整多个 token,且不违反规则,并且手动操作会导致结果不一致(有些 token 改了,有些没改、网格被破坏、还引入了第二种强调色)时,技能才有用。这就是 /ss-dial 的作用:不是解读,而是确定性的渐变 + 护栏 + 重新验收。
如果请求是一个氛围词(“更显高端”“更具编辑感”“更活泼”),那就不是单一轴,而是多个轴上不同位置的组合。对于这类请求,请使用 /ss-restyle <preset>。/ss-dial 只调整一个轴。
不适用场景
- 模型仅凭文字就能应用的模糊风格倾向(“更简洁”“更好看”)→ 不要用技能包装,直接说出来。
- 指定的美学风格(瑞士风 / 编辑风 / 粗野主义)→ 使用
/ss-restyle(由多个调整位置组成的预设)。 - 更改强调色本身的色相(品牌重塑)→ 直接编辑锁定配置中的 Key color,然后重新推导。
- 既没有有效注册表,也没有旧版锁定配置 → 先建立配置再调整;注册表出错时不要重新开始配置流程。
调整机制(适用于每个轴)
- 确定上述产物边界。如果任一注册表文件存在,就必须要求注册表完整有效。从
.styleseed/project.json和目标产物配置中读取项目 DNA;绝不能把创建或更新STYLESEED.md作为注册表回退方案。若没有注册表,则读取旧版锁定配置。 - 识别调整轴及其支持的当前值。“更多 / 更少”时移动一个受支持的步长;明确指定的目标值必须通过验证。如果已达到边界,就说明这一点,不要臆造新值。
- 仅在所请求的产物或组件范围内应用更改。只有当请求范围覆盖整个项目时,才适合更改项目级 token;并且要解析所有受影响的产物。
- 保留不相关的轴和已批准的项目 token。下表仅为上下文示例,并不代表可以覆盖已批准的设计系统或强行使用注册表不支持的值。
- 将受支持的值写入权威项目 / 产物配置,然后重新编译。对于旧版项目,更新相应的锁定配置和实现 token。如果某个轴无法表示,就说明这一限制,不要写入臆造的枚举值或悄悄映射为其他值。
- 在获准的更改期间,运行受影响代码的检查和渲染检查。报告准确的范围、更改前后的值、取舍和剩余问题;评分不等于视觉或人工验收。
各调整轴
1. 密度与空间节奏
注册表和此工作流都支持 compact → comfortable → spacious 密度阶梯。“宽松”或“密集”等词属于描述,而不是额外的注册表值。密度是起始设定;不要自动更改字号、行高或所有间距令牌。
对于“让各个区块间距更大”“减少卡片内边距”或“在移动设备上留出更多空间”,请使用已安装解析器的空间角色指南。该指南定义了六种彼此独立的角色、项目默认值、产物覆盖项,以及基础/宽屏值。即使没有改变定性的密度枚举,调整角色也仍然是单轴操作。
- 根据任务和分组提出建议,并先检查现有令牌。只读命令
ss-resolve/scripts/recommend-spacing.mjs --project-root . --artifact <id>可为注册表产品 UI 提供尚未应用的起始建议;其值并非经过测量的诊断结果。使用指南检查当前绑定,并附加--measurement,以在更改数值前获取有针对性的诊断建议。在嵌套产物边界处保留原生回退令牌。 - 仅将请求的角色写入
artifact.spacing.roles;只有获准进行全项目更改时,才使用项目级spacing。被覆盖的角色会同时替换其两个响应式值。 - 重新编译,并将包中作用域 CSS 变量映射到实现中。保留未声明的角色,并在移除某个角色时删除过时的复制映射。
- 让标签/帮助文本/控件彼此关联、对比行保持规律、独立区块彼此区分。营销叙事和操作表格需要不同的节奏。
- 间距会根据项目和视口调整;不存在通用的
px-6或强制 8px 网格。保留易读文本和适用的无障碍最低标准。减少留白时,不得缩小点击目标。 - 遗留/非 Web 项目应保留其原生令牌;不要臆造注册表间距支持,也不要仅为完成局部调整而触发迁移。
2. 层级对比度——不同层级之间的尺寸/字重差距
阶梯:subtle → balanced → strong → dramatic。调整主视觉与正文之间的比例,以及展示文字的字距。
| 位置 | 主视觉 : 正文字号比例 | 展示文字字重 | 展示文字字距 |
|---|---|---|---|
| subtle | ~2:1 | 600 | -0.01em |
| balanced | ~2.5:1 | 700 | -0.02em |
| strong | ~3.2:1 | 700–800 | -0.02em |
| dramatic | ~4:1 | 800 | -0.03em |
约束: 仅从字体大小表中选择字号(不要臆造);无论如何,正文都不得低于表面层级的最低标准;保持数字与单位的 2:1 配对;仍只保留一个视觉焦点(提高对比度不得造成两个相互竞争的主视觉)。
3. 圆角——角部风格(分类替换,不是滑块)
阶梯:sharp ↔ soft ↔ pill。将整张映射表作为一个整体替换,绝不单独替换某个组件。
| 位置 | 控件(btn/input/chip) | 卡片 | 内层面板 |
|---|---|---|---|
| sharp | 2–4px | 6–8px | 4–6px |
| soft | 8–10px | 12–16px | 10–12px |
| pill | 完全圆角(9999px) | 20–24px | 14–16px |
约束: 所有位置必须采用同一种风格(锐角卡片搭配胶囊按钮,正是我们禁止的混搭风格);嵌套元素仍遵循 inner = outer − padding。
4. 高度/深度 — 表面如何区分
渐变:flat → subtle → layered → lifted。浅色和深色使用不同的语言——根据主题选择相符的方式。
| 位置 | 浅色(阴影,≤8% 不透明度) | 深色(色调 + 细边框) |
|---|---|---|
| flat | 无阴影;1px 细边框 | 页面 = 卡片色调;仅使用细边框 |
| subtle | 0 1px 3px /4% | 一个表面色阶 + 细边框 |
| layered | 0 1px 3px /4% + 0 4px 12px /8% | 两个表面色阶 + 细边框 |
| lifted | 在凸起表面上添加 0 8px 24px /8% | 三个色阶;最亮 = 最高 |
护栏:浅色主题的阴影不透明度绝不超过约 8%;深色主题绝不使用投影(使用色调表面渐变 + 细边框);整个 UI 统一使用一种阴影语言/一种光照方向。
5. 颜色 — 饱和度与色温(两个子调节项,强调色保持单一)
saturation: muted ↔ balanced ↔ vivid · temperature: cooler ↔ neutral ↔ warmer。在 HSL 中调整唯一的强调色并重新推导其色调;可以微调中性色灰的色度。不会添加新的色相。
| 子调节项 | 调整 | 应用于 |
|---|---|---|
| more-muted | 强调色饱和度 −10–15%(HSL S) | --brand + 以 10–14% 不透明度重新推导 bg-*-tint |
| more-vivid | 强调色饱和度 +10–15% | 同上 |
| warmer | 色相朝 20–40° 调整(琥珀色/赤陶色) | --brand;可选:灰色增加 +2–4% 暖色度 |
| cooler | 色相朝 200–220° 调整(蓝色/青绿色) | --brand;灰色朝冷色调整 |
护栏:仍然只用一种强调色——这会调整现有色相,而不会引入第二种;色调遵循 10–14% 不透明度叠加在卡片上的公式(浅色 + 深色);强调色用于文本时保持 ≥4.5:1 的对比度;暖/冷灰色调整必须保持近中性(色度 ≤ 约 6%),不能变成色调色。
6. 字重 — 字重渐变
渐变:light → regular → bold。将整个字重比例整体上移/下移一个档位,同时保持跨度(这样层级关系得以保留)。
| 位置 | 正文 | 标签/导航 | 标题/指标 |
|---|---|---|---|
| light | 400 | 400–500 | 600 |
| regular | 400 | 500 | 700 |
| bold | 500 | 600 | 700–800 |
**护栏:**保持各层级之间的对比度(不要让所有内容都使用相同字重——这会削弱层级);为保证长篇阅读的可读性,正文 ≤ 500;CJK 字体的字重可以弥补字距调整无法实现的效果。
7. 动效强度 — 种子 + 时长
渐变:still → calm → lively → energetic。替换动效种子并全局缩放时长。
| 位置 | 种子 | 时长 | 特征 |
|---|---|---|---|
| still | 无 | 即时/仅颜色变化 | 无进入动效 |
| calm | Silk / Snap | 100–200ms,缓出 | 平滑、克制 |
| lively | Spring | 200–350ms,轻微过冲 | 响应灵敏、充满活力 |
| energetic | Spring / Pulse | 250–400ms,可见弹簧效果 | 活泼、有趣 |
**护栏:**数字、余额和金额绝不添加动效;始终遵循 prefers-reduced-motion;与滚动联动/视差/3D 的使用范围受限(§43——禁止用于应用/数据表面,可作为 Cinematic 层级用于营销/落地页;所有页面均禁止劫持滚动);动效绝不延迟内容或阻碍操作。
规则
- 每次调用只调整一个轴。“高级”等氛围词是组合 → 使用
/ss-restyle,而非此项。 - **明确指定范围。**在授权范围内应用所有变更后令牌的用法;不要将某项调整带来的效果传播到无关屏幕。
- **到达边界即停止。**渐变有界,不是无限的“更多”——如果已经处于
spacious/sharp/bold,请说明并停止。 - **护栏优先于调节项。**保留任务适用性和适用的无障碍要求;上下文中的视觉选择以当前产物包和已批准的项目令牌为准。
- **持久化并重新过门禁。**更新权威注册表配置;仅在不存在注册表时更新旧版锁定文件;随后重新编译并运行受影响代码和渲染门禁。报告
axis: old → new、范围和实际证据;不要将评分视为视觉验收。