ss-restyle
Re-style a project to a named aesthetic — swiss, editorial, technical, warm-dtc, minimal-mono, brutalist-lite. A preset is a *coordinate* across the dial axes (radius + density + color + weight + motion) plus a font, accent family, and one signature move — applied coherently as a single identity, written to the lock, and re-gated. This is for mood words ("more editorial") that aren't one axis; for a single axis use /ss-dial.
用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录
~/.claude/skills/(项目级 .claude/skills/)~/.codex/skills/npx oh-my-skill add bitjaru/styleseed/ss-restylecurl -fsSL https://oh-my-skill.com/install.sh | bash -s -- bitjaru/styleseed/ss-restylenpx oh-my-skill verify bitjaru/styleseed/ss-restyle怎么用
技能原文 SKILL.md
Re-style to a preset
A mood word — "make it more editorial", "give it a Swiss feel" — is not one axis. It's a defined position across several (this radius and that density and that color temperature and that weight and that motion), tied together with a font and one signature move. Left to plain language, the model resolves it differently every time and half the axes drift. /ss-restyle pins the whole coordinate at once, coherently, and re-gates.
Each preset below is a full identity, not a filter you stack on top of another. Applying two presets = the mixed-personality tell we ban. Pick one; it replaces the look.
When NOT to use
- Moving a single axis ("denser", "sharper", "more muted") →
/ss-dial. - No
STYLESEED.mdyet →/ss-build//ss-setupfirst (a restyle rewrites a lock; it needs one). - A brand with a fixed hex → keep the accent, use
/ss-dialfor feel; don't let a preset overwrite a real brand color (presets suggest an accent family — honor an existing lock's hue).
The mechanic
- Read
STYLESEED.md. Keep anything the user has explicitly locked (a real brand hex, a required font) — a preset fills the unopinionated axes, it doesn't overrule a deliberate choice. - Set the preset's coordinate — apply each field below via the same coordinated token sets
/ss-dialuses (radius mapping table, density ramp, color HSL + tint re-derive, weight ramp, motion seed), plus the font and elevation language. System-wide, every file — grep the tokens. - Hold the modern floor (§CC-9d). Distinctive must not read dated: white/fresh base, serif as seasoning (one display moment, never body), keep the air. A preset that turns into a beige serif brochure has failed, not succeeded.
- Rewrite the lock — Skin/Mood/Accent/Font/Radius/Elevation (enum value)/Density/ Palette mode/Motion/Type + a one-line
Signature move, and setPreset: <name>— this field is the handshake the gate reads:/ss-scorere-keys its deductions to the preset's language (v2.11), so brutalist borders or an editorial serif body are scored as the locked style, not as violations of the default skin. This is now the source of truth for every later prompt. - Re-run the Quality Gate (
/ss-score, loop to ≥ 80 — it scores lock-relative, so the preset's own defining traits are legal). Report: preset applied, the coordinate, the score. A restyle that scores < 80 is fixed before presenting — a named look is no excuse for incoherence (mixed axes, missing states, contrast failures still fail under any preset).
The presets (coordinate = radius · density · color · weight · motion)
swiss — grid honesty, typographic confidence
sharp · compact · muted-cool · bold · calm
- Font: a neutral grotesk (Inter / Helvetica Now feel), tight tracking on display.
- Accent: restrained — near-neutral, or a single strong signal (classic Swiss red
#D6291E) used sparingly. One accent, lots of black/white/grey. - Elevation: flat — hairline borders and whitespace do the separating, not shadows.
- Signature: a strong asymmetric grid, oversized left-aligned headline, generous but structured space. Numbers and labels align to the grid. No ornament.
editorial — magazine, serif as seasoning
soft · airy · warm-muted · regular · calm
- Font: a serif display (Fraunces / Newsreader) for headlines only, Inter/neutral sans for body.
- Accent: a warm muted ink — oxblood
#7B2D26, forest#2F4A3C, or deep amber. Muted, not loud. - Elevation: subtle; content leads, chrome recedes.
- Signature: one oversized serif headline moment, a wide reading measure (
max-w-2xl/3xl), strong first-paragraph emphasis. Modern floor: white base, serif is the seasoning — body stays sans, don't tip into a paper-and-serif pamphlet (§CC-9d).
technical — dark, dense, instrument-panel
sharp · dense · cool · regular · still (dark-first)
- Font: Geist / IBM Plex Sans; mono (Plex Mono / Geist Mono) for IDs, SHAs, timestamps, metrics.
- Accent: one signal hue on dark — teal
#2DD4BF, lime, or amber — used for state, not decoration. - Elevation: the dark tonal ramp — page < card < raised by surface lightness + hairline borders. No drop shadows.
- Signature: high data density (dense dial), mono numerics with
tabular-nums, tonal surfaces, minimal motion (still). Chrome scale: h1 22–24px, KPI 48–64px.
warm-dtc — consumer, friendly, product-forward
pill · airy · warm-vivid · bold · lively
- Font: a rounded/friendly grotesk; large, confident.
- Accent: warm and vivid — terracotta
#C14E24, coral, or amber-brown. (Cool blues read corporate here — avoid.) - Elevation: subtle → layered; soft, inviting depth.
- Signature: big product imagery, pill controls, generous space,
lively/Spring micro-motion on CTAs. One warm accent; if it collides with the success green, resolve per the lock'sSemantic resolve.
minimal-mono — whitespace and restraint
soft · airy · muted · light · calm
- Font: one neutral sans; weight and size do all the work (no second family).
- Accent: near-monochrome — a single restrained accent used rarely (one CTA, one active state).
- Elevation: flat → subtle; mostly hairlines and air.
- Signature: dominant whitespace, light weights, a single small accent moment, one clear focal element. The discipline is the design — resist adding anything.
brutalist-lite — raw, high-contrast, but still coherent
sharp · comfortable · vivid · bold · snap
- Font: a bold grotesk, oversized headlines; can go heavier than usual.
- Accent: one loud hue against black/white. Still one accent — loud ≠ rainbow.
- Elevation: flat with hard 1–2px borders as the personality (borders do separation here, which is allowed as the deliberate style — no soft shadows mixed in).
- Signature: heavy borders, blocky high-contrast sections, snappy instant motion, exposed structure. "lite" = still coherent: one accent, one border weight, states and a11y intact, gate ≥ 80. Raw is the look; broken is not.
Rules
- One preset replaces the look — never stack two (that's the mixed-personality tell). To nudge from a preset, use
/ss-dialon a single axis afterward. - Honor deliberate locks. A real brand hex or a user-chosen font survives a restyle; the preset fills the rest. Say what you kept.
- System-wide. Apply the coordinate across every file, not the screen in view.
- Modern floor always (§CC-9d). Distinctive must not cost freshness — white/fresh base, serif as seasoning, keep the air. Dated ≠ distinctive.
- Persist + re-gate. Rewrite
STYLESEED.mdto the new coordinate, then/ss-scoreto ≥ 80. Report the preset, the coordinate, and the score.