Back to Details

ss-dial

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Dial an axis

调整设计轴

"Make it more minimal" is something you can just say — the model already reads plain language. A skill only earns its place where one word must move many tokens at once, in a coordinated way, without breaking a rule — and where doing it by hand gives an inconsistent result (some tokens changed, the grid broken, a second accent introduced). That's what 
/ss-dial
is: not interpretation, but a deterministic ramp + guardrails + re-gate.
If the request is a mood word ("more premium", "more editorial", "more playful"), that's not one axis — it's a combination of positions across several axes. Use 
/ss-restyle <preset>
 for those. 
/ss-dial
moves exactly one axis.
“让它更简约”这类需求你直接说就行——模型已经能理解自然语言。只有当一个指令需要同步调整多个tokens，且遵循规则，人工操作会导致结果不一致（比如部分tokens被修改、栅格被破坏、引入第二种强调色）时，技能才有存在的价值。
/ss-dial
就是这样的工具：不是风格解读，而是确定性渐变阶梯+约束规则+重新校验。
如果需求是风格词汇（“更高级”“更具编辑感”“更活泼”），这不是单一设计轴的调整——而是多个设计轴的组合调整。此时应使用**
/ss-restyle <preset>
**。
/ss-dial
仅调整单一设计轴。

When NOT to use

不适用场景

  • A vague vibe the model can just apply from words ("cleaner", "nicer") → don't wrap it in a skill; say it.
  • A named aesthetic (Swiss / editorial / brutalist) → 
    /ss-restyle
    (a preset of dial positions).
  • Changing the accent hue itself (rebrand) → edit the lock's Key color directly, then re-derive.
  • No 
    STYLESEED.md
    lock yet → run 
    /ss-build
    or 
    /ss-setup
    first; there's nothing to dial from.
  • 模型可直接通过文字理解的模糊风格（“更干净”“更好看”）→ 无需使用技能，直接描述即可。
  • 命名式美学风格（瑞士风/编辑风/粗野主义）→ 使用
    /ss-restyle
    （预设的多轴调整组合）。
  • 修改强调色的色相本身（品牌重塑）→ 直接编辑锁定配置中的Key颜色，然后重新生成。
  • 尚未生成
    STYLESEED.md
    锁定配置→ 先运行
    /ss-build
    或
    /ss-setup
    ；没有基准配置就无法进行轴调整。

The mechanic (every axis)

运行机制（所有设计轴通用）

  1. Read 
    STYLESEED.md
     — find the axis's current position (Mood/Density/Radius/Elevation/ Type scale/Font weight/Motion fields). If the lock doesn't record it, infer it from the code.
  2. Move ONE position in the requested direction on that axis's ramp (below). "more X" = one step; an explicit target ("density: dense") jumps straight there. Clamp at the ends — you cannot dial past 
    dense
    or below 
    airy
    . If already at the end, say so and stop (this is why "each use makes it more" is bounded, not runaway).
  3. Apply the whole coordinated token set for the new position across every file that uses those tokens — not just the one component in view. This is the point: system-wide, consistent.
  4. Respect the guardrails (each axis lists its own). Never break a Golden Rule to satisfy a dial — if "denser" would push a touch control below 44px, stop at the floor and note it.
  5. Update 
    STYLESEED.md
     with the new position (so it persists and the next prompt obeys it).
  6. Re-run the Quality Gate (
    /ss-score
    , loop to ≥ 80). A dial that drops the score below 80 is reverted or fixed, not shipped. Report: axis, old → new position, score.
  1. 读取
    STYLESEED.md
    ——找到目标轴的当前位置（风格氛围/紧凑度/圆角/层级/字体比例/字重/动效）。如果锁定配置中未记录，则从代码中推断。
  2. 沿指定方向移动一个档位（如下方的渐变阶梯）。“更X”代表移动一个档位；明确目标（“紧凑度：紧凑”）则直接跳转到对应档位。在阶梯两端停止——无法超过“紧凑”或低于“宽松”。如果已经处于端点，告知用户并停止操作（这就是“每次调整都会更X”有边界，不会无限变化的原因）。
  3. 应用整套协调的token集合——将新位置对应的所有tokens应用到项目中所有使用这些tokens的文件，而不仅仅是当前视图中的单个组件。这正是该工具的核心：全系统一致的调整。
  4. 遵循约束规则（每个设计轴都有专属规则）。绝不为了满足轴调整而打破黄金规则——如果“更紧凑”会导致触控控件尺寸低于44px，则在最低标准处停止并告知用户。
  5. 更新
    STYLESEED.md
    ——记录新的位置（以便配置持久化，后续指令遵循此配置）。
  6. 重新运行质量校验（
    /ss-score
    ，循环直到得分≥80）。如果轴调整导致得分低于80，则回退或修复，不发布。报告内容：设计轴、旧位置→新位置、得分。

The axes

设计轴详情

1. Density — spacing rhythm + internal padding + type/line-height, together

1. 紧凑度——间距节奏+内部边距+字体/行高同步调整

Ramp: 
airy → comfortable → compact → dense
. The page gutter stays 
px-6
/
mx-6
always (fixed rule); density moves the vertical rhythm, card interior, and reading scale.
PositionSection 
space-y
Card paddingGrid 
gap
Body line-heightType scale
airy
space-y-10
p-8
gap-8
leading-relaxed
one step up (desktop-larger)
comfortable
space-y-6
p-6
gap-6
leading-normal
surface default
compact
space-y-4
p-4
gap-4
leading-normal
surface default, tighter headings
dense
space-y-4
p-4
gap-3
(12px half-step)
leading-snug
on data		data-table scale
Guardrails: stay on the 8px grid (only 
p-2/4/6/8
, 
gap-*
on grid or the 4px half-step — never invent 
p-5
/
gap-2.5
); touch controls stay ≥ 44px even at 
dense
 (shrink padding, not tap targets); body never drops below the surface floor (desktop 16px). Dense is for data-heavy surfaces; don't dense-ify a marketing landing.
渐变阶梯：
宽松 → 舒适 → 紧凑 → 超紧凑
。页面 gutter 始终保持
px-6
/
mx-6
（固定规则）；紧凑度调整的是垂直节奏、卡片内部边距和阅读字体比例。
档位区块
space-y
卡片边距栅格
gap
正文行高字体比例
宽松
space-y-10
p-8
gap-8
leading-relaxed
升一档（桌面端更大）
舒适
space-y-6
p-6
gap-6
leading-normal
页面默认
紧凑
space-y-4
p-4
gap-4
leading-normal
页面默认，标题更紧凑
超紧凑
space-y-4
p-4
gap-3
（12px半档）		数据类内容使用
leading-snug
数据表格比例
约束规则： 遵循8px栅格（仅使用
p-2/4/6/8
，栅格
gap-*
使用8px或4px半档——绝不使用
p-5
/
gap-2.5
这类自定义值）；即使在超紧凑档位，触控控件尺寸仍需≥44px（缩小边距，而非点击目标）；正文字体绝不低于页面最低标准（桌面端16px）。超紧凑档位适用于数据密集型页面；不要将营销落地页调整为超紧凑。

2. Hierarchy contrast — the size/weight gap between levels

2. 层级对比度——不同层级间的尺寸/字重差距

Ramp: 
subtle → balanced → strong → dramatic
. Moves the ratio between the hero and the body, plus display tracking.
PositionHero : body size ratioDisplay weightDisplay tracking
subtle~2:1600
-0.01em
balanced~2.5:1700
-0.02em
strong~3.2:1700–800
-0.02em
dramatic~4:1800
-0.03em
Guardrails: pick sizes from the Font Size table only (don't invent); body stays at the surface floor regardless; keep the number-to-unit 2:1 pairing intact; one focal element still dominates (dialing contrast up must not create two competing heroes).
渐变阶梯：
柔和 → 平衡 → 强烈 → 夸张
。调整主标题与正文的比例，以及标题字间距。
档位主标题:正文字体尺寸比例标题字重标题字间距
柔和~2:1600
-0.01em
平衡~2.5:1700
-0.02em
强烈~3.2:1700–800
-0.02em
夸张~4:1800
-0.03em
约束规则： 仅使用字体尺寸表中的尺寸（不得自定义）；正文字体始终保持页面最低标准；保持尺寸与单位的2:1配对；仍需有一个核心焦点元素（提高对比度不得导致出现两个竞争的主视觉）。

3. Radius — the corner personality (categorical swap, not a slider)

3. 圆角——边角风格（分类切换，而非滑块调整）

Ramp: 
sharp ↔ soft ↔ pill
. Swaps the whole mapping table as one set, never one component.
PositionControls (btn/input/chip)CardsInner panels
sharp2–4px6–8px4–6px
soft8–10px12–16px10–12px
pillfull (9999px)20–24px14–16px
Guardrails: one personality everywhere (sharp cards + pill buttons is the exact mixed-personality tell we ban); nested elements still follow 
inner = outer − padding
.
渐变阶梯：
锐利 ↔ 柔和 ↔ 胶囊形
。一次性切换整套映射表，绝不单独调整单个组件。
档位控件（按钮/输入框/标签）卡片内部面板
锐利2–4px6–8px4–6px
柔和8–10px12–16px10–12px
胶囊形全圆角（9999px）20–24px14–16px
约束规则： 全局统一风格（锐利卡片+胶囊按钮是明确禁止的混合风格）；嵌套元素仍遵循
内部圆角 = 外部圆角 - 边距
规则。

4. Elevation / depth — how surfaces separate

4. 层级/深度——页面元素的区分方式

Ramp: 
flat → subtle → layered → lifted
. Light and dark speak different languages — apply the one that matches the theme.
PositionLight (shadow, ≤8% opacity)Dark (tonal + hairline)
flatno shadow; 1px hairline borderpage = card tone; hairline only
subtle
0 1px 3px /4%
one surface step + hairline
layered
0 1px 3px /4%
+ 
0 4px 12px /8%
two surface steps + hairline
liftedadd 
0 8px 24px /8%
on raised		three steps; brightest = highest
Guardrails: never exceed ~8% shadow opacity in light; never a drop shadow in dark (use the tonal surface ramp + hairline borders); one shadow language / one light direction across the whole UI.
渐变阶梯：
扁平化 → 柔和 → 分层 → 悬浮
。浅色和深色主题规则不同——应用与当前主题匹配的规则。
档位浅色主题（阴影，透明度≤8%）深色主题（色调+细边框）
扁平化无阴影；1px细边框页面与卡片色调一致；仅保留细边框
柔和
0 1px 3px /4%
一个色调层级+细边框
分层
0 1px 3px /4%
+ 
0 4px 12px /8%
两个色调层级+细边框
悬浮为悬浮元素添加
0 8px 24px /8%
三个色调层级；最亮的元素层级最高
约束规则： 浅色主题中阴影透明度绝不超过8%；深色主题中绝不使用投影（使用色调渐变+细边框）；全局统一阴影风格/光源方向。

5. Color — saturation and temperature (two sub-dials, accent stays single)

5. 颜色——饱和度和色温（两个子轴，强调色始终唯一）

saturation: muted ↔ balanced ↔ vivid
· 
temperature: cooler ↔ neutral ↔ warmer
. Shifts the one accent in HSL and re-derives its tints; may nudge the neutral greys' chroma. Does NOT add a hue.
Sub-dialMoveApplies to
more-mutedaccent saturation −10–15% (HSL S)
--brand
+ re-derive 
bg-*-tint
at 10–14% alpha
more-vividaccent saturation +10–15%same
warmerhue toward 20–40° (amber/terracotta)
--brand
; optionally greys +2–4% warm chroma
coolerhue toward 200–220° (blue/teal)
--brand
; greys toward cool
Guardrails: still one accent — this shifts the existing hue, never introduces a second; tints follow the 10–14%-alpha-over-card formula (light + dark); accent keeps ≥4.5:1 where it carries text; a warm/cool grey shift must stay near-neutral (chroma ≤ ~6%), not become a tint.
饱和度：柔和 ↔ 平衡 ↔ 鲜明
· 
色温：偏冷 ↔ 中性 ↔ 偏暖
。调整唯一强调色的HSL值并重新生成其色调变体；可略微调整中性灰色的色度。绝不添加新色相。
子轴调整方式应用范围
更柔和强调色饱和度降低10–15%（HSL S值）
--brand
+ 重新生成
bg-*-tint
，透明度10–14%
更鲜明强调色饱和度提高10–15%同上
偏暖色相向20–40°（琥珀色/赤陶色）调整
--brand
；可选择性将灰色调暖2–4%
偏冷色相向200–220°（蓝色/蓝绿色）调整
--brand
；灰色调冷
约束规则： 仍保持单一强调色——仅调整现有色相，绝不引入第二种强调色；色调变体遵循“卡片上透明度10–14%”的规则（浅色+深色主题通用）；带有文字的强调色对比度需≥4.5:1；灰色调的冷暖调整需接近中性（色度≤~6%），不得变为色调变体。

6. Font weight — the weight ramp

6. 字重——字重阶梯

Ramp: 
light → regular → bold
. Shifts the whole weight scale up/down by one notch, keeping the spread (so hierarchy survives).
PositionBodyLabels / navHeadings / metrics
light400400–500600
regular400500700
bold500600700–800
Guardrails: keep contrast between levels (don't make everything one weight — that flattens hierarchy); body ≤ 500 for readability at length; CJK weight does the work tracking can't.
渐变阶梯：
轻量 → 常规 → 粗体
。将整套字重阶梯向上/向下移动一个档位，保持层级差距（确保层级关系不变）。
档位正文标签/导航标题/指标
轻量400400–500600
常规400500700
粗体500600700–800
约束规则： 保持层级间的对比度（不得所有内容使用同一字重——这会扁平化层级）；正文字重≤500以保证长文本可读性；CJK字体字重替代字间距的作用。

7. Motion energy — seed + durations

7. 动效活力——动效种子+时长

Ramp: 
still → calm → lively → energetic
. Swaps the motion seed and scales durations globally.
PositionSeedDurationsCharacter
stillnoneinstant / color-onlyno entrance motion
calmSilk / Snap100–200ms, ease-outsmooth, restrained
livelySpring200–350ms, slight overshootresponsive, alive
energeticSpring / Pulse250–400ms, visible springbouncy, playful
Guardrails: numbers, balances, and money never animate at any level; always honor 
prefers-reduced-motion
; scroll-linked/parallax/3D is surface-scoped (§43 — forbidden on app/data surfaces, allowed as the Cinematic tier on marketing/landing pages; scroll-JACKING banned everywhere); motion never delays content or blocks an action.
渐变阶梯：
静止 → 平静 → 生动 → 活力
。切换动效种子并全局调整时长。
档位动效种子时长风格特点
静止无即时/仅颜色变化无入场动效
平静Silk / Snap100–200ms，ease-out流畅、克制
生动Spring200–350ms，轻微过冲响应式、鲜活
活力Spring / Pulse250–400ms，明显弹性弹跳感、活泼
约束规则： 数字、余额、货币内容绝不添加动效；始终遵循
prefers-reduced-motion
设置；滚动关联/视差/3D动效仅限特定页面（第43条——应用/数据页面禁止，营销/落地页允许使用电影级动效；全局禁止滚动劫持）；动效不得延迟内容加载或阻止操作。

Rules

规则

  • One axis per call. A mood word ("premium") is a combination → 
    /ss-restyle
    , not this.
  • System-wide, or don't. Applying a position to one component and not the rest re-creates the incoherence this skill exists to prevent. Grep the token across the project and move all of it.
  • Clamp at the ends. Bounded ramp, not an infinite "more" — if already at 
    dense
    /
    sharp
    / 
    bold
    , say so and stop.
  • Guardrails beat the dial. Never break a Golden Rule (grid, ≥44px touch, single accent, nested-radius, ≤8% shadow, no dark drop-shadow, font-size table) to satisfy a direction — stop at the floor and tell the user.
  • Persist + re-gate. Write the new position to 
    STYLESEED.md
    , then 
    /ss-score
    to ≥ 80. Report 
    axis: old → new
    and the score. A dial that lowered the score is fixed, not shipped.
  • 每次调用仅调整单一设计轴。风格词汇（“高级”）是多轴组合→ 使用
    /ss-restyle
    ，而非此工具。
  • 全系统应用，否则不调整。仅对单个组件应用档位调整而忽略其他组件，会重新导致该技能旨在解决的不一致问题。遍历项目中所有使用该token的地方并全部调整。
  • 在阶梯端点停止。渐变阶梯有边界，并非无限“更X”——如果已处于“超紧凑”/“锐利”/“粗体”档位，告知用户并停止操作。
  • 约束规则优先于轴调整。绝不为满足调整方向而打破黄金规则（栅格、≥44px触控、单一强调色、嵌套圆角、≤8%阴影、深色主题无投影、字体尺寸表）——在最低标准处停止并告知用户。
  • 持久化+重新校验。将新位置写入
    STYLESEED.md
    ，然后运行
    /ss-score
    直到得分≥80。报告
    设计轴：旧位置→新位置
    和得分。如果轴调整导致得分下降，则修复后再发布。