mcpField
S
ss-dial

ss-dial

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

关于 ss-dial

ss-dial 是用于调整单一视觉轴的 StyleSeed 技能,适合对某项样式属性作有边界的变化。它按支持的级别调整指定轴,保留其他轴与项目令牌,并重新编译和检查受影响部分。

主要功能

  1. 01每次调整一个视觉轴
  2. 02按受限级别调整数值
  3. 03限定变更范围并保留其他轴
  4. 04更新配置并重新编译
  5. 05运行受影响的代码与渲染检查

适用场景

  1. 01调整界面密度或空间节奏
  2. 02改变层级对比、圆角或表面深度
  3. 03调整配色饱和度、字体粗细或动效
  4. 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,然后重新推导。
  • 既没有有效注册表,也没有旧版锁定配置 → 先建立配置再调整;注册表出错时不要重新开始配置流程。

调整机制(适用于每个轴)

  1. 确定上述产物边界。如果任一注册表文件存在,就必须要求注册表完整有效。从 .styleseed/project.json 和目标产物配置中读取项目 DNA;绝不能把创建或更新 STYLESEED.md 作为注册表回退方案。若没有注册表,则读取旧版锁定配置。
  2. 识别调整轴及其支持的当前值。“更多 / 更少”时移动一个受支持的步长;明确指定的目标值必须通过验证。如果已达到边界,就说明这一点,不要臆造新值。
  3. 仅在所请求的产物或组件范围内应用更改。只有当请求范围覆盖整个项目时,才适合更改项目级 token;并且要解析所有受影响的产物。
  4. 保留不相关的轴和已批准的项目 token。下表仅为上下文示例,并不代表可以覆盖已批准的设计系统或强行使用注册表不支持的值。
  5. 将受支持的值写入权威项目 / 产物配置,然后重新编译。对于旧版项目,更新相应的锁定配置和实现 token。如果某个轴无法表示,就说明这一限制,不要写入臆造的枚举值或悄悄映射为其他值。
  6. 在获准的更改期间,运行受影响代码的检查和渲染检查。报告准确的范围、更改前后的值、取舍和剩余问题;评分不等于视觉或人工验收。

各调整轴

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:1600-0.01em
balanced~2.5:1700-0.02em
strong~3.2:1700–800-0.02em
dramatic~4:1800-0.03em

约束: 仅从字体大小表中选择字号(不要臆造);无论如何,正文都不得低于表面层级的最低标准;保持数字与单位的 2:1 配对;仍只保留一个视觉焦点(提高对比度不得造成两个相互竞争的主视觉)。

3. 圆角——角部风格(分类替换,不是滑块)

阶梯:sharp ↔ soft ↔ pill。将整张映射表作为一个整体替换,绝不单独替换某个组件。

位置控件(btn/input/chip)卡片内层面板
sharp2–4px6–8px4–6px
soft8–10px12–16px10–12px
pill完全圆角(9999px)20–24px14–16px

约束: 所有位置必须采用同一种风格(锐角卡片搭配胶囊按钮,正是我们禁止的混搭风格);嵌套元素仍遵循 inner = outer − padding。

4. 高度/深度 — 表面如何区分

渐变:flat → subtle → layered → lifted。浅色和深色使用不同的语言——根据主题选择相符的方式。

位置浅色(阴影,≤8% 不透明度)深色(色调 + 细边框)
flat无阴影;1px 细边框页面 = 卡片色调;仅使用细边框
subtle0 1px 3px /4%一个表面色阶 + 细边框
layered0 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。将整个字重比例整体上移/下移一个档位,同时保持跨度(这样层级关系得以保留)。

位置正文标签/导航标题/指标
light400400–500600
regular400500700
bold500600700–800

**护栏:**保持各层级之间的对比度(不要让所有内容都使用相同字重——这会削弱层级);为保证长篇阅读的可读性,正文 ≤ 500;CJK 字体的字重可以弥补字距调整无法实现的效果。

7. 动效强度 — 种子 + 时长

渐变:still → calm → lively → energetic。替换动效种子并全局缩放时长。

位置种子时长特征
still无即时/仅颜色变化无进入动效
calmSilk / Snap100–200ms,缓出平滑、克制
livelySpring200–350ms,轻微过冲响应灵敏、充满活力
energeticSpring / Pulse250–400ms,可见弹簧效果活泼、有趣

**护栏:**数字、余额和金额绝不添加动效;始终遵循 prefers-reduced-motion;与滚动联动/视差/3D 的使用范围受限(§43——禁止用于应用/数据表面,可作为 Cinematic 层级用于营销/落地页;所有页面均禁止劫持滚动);动效绝不延迟内容或阻碍操作。


规则

  • 每次调用只调整一个轴。“高级”等氛围词是组合 → 使用 /ss-restyle,而非此项。
  • **明确指定范围。**在授权范围内应用所有变更后令牌的用法;不要将某项调整带来的效果传播到无关屏幕。
  • **到达边界即停止。**渐变有界,不是无限的“更多”——如果已经处于 spacious/sharp/bold,请说明并停止。
  • **护栏优先于调节项。**保留任务适用性和适用的无障碍要求;上下文中的视觉选择以当前产物包和已批准的项目令牌为准。
  • **持久化并重新过门禁。**更新权威注册表配置;仅在不存在注册表时更新旧版锁定文件;随后重新编译并运行受影响代码和渲染门禁。报告 axis: old → new、范围和实际证据;不要将评分视为视觉验收。

评论

支持 Markdown