Skip to content
ss-score Β· styleseed Β· Flowy
Score a visual artifact's implementation quality 0-100 against its composed StyleSeed rule set β category breakdown, evidence, and prioritized fixes.
One skill from styleseed .
$ npx -y skills add bitjaru/styleseed --skill ss-score --agent claude-codeInstalls just this skill. Get the whole plugin for auto-invocation.
β‘ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itself Claude auto-loads it when your prompt matches the work. You can call it Invoke it directly when you want it. Slash command /ss-scoreποΈ Context preview
The summary Claude sees to decide when to auto-load this skill.
Score a visual artifact's implementation quality 0-100 against its composed StyleSeed rule set β category breakdown, evidence, and prioritized fixes. π¦ Ships with styleseed
</> SKILL.md
ss-score.SKILL.md
---
name : ss-score
description : Score a visual artifact's implementation quality 0-100 against its composed StyleSeed rule set β category breakdown, evidence, and prioritized fixes.
argument-hint: "[file, directory, or artifact manifest]"
allowed-tools: Read, Grep, Glob, Bash
---
# Design Score
`/ss-review` tells you *what's wrong*. `/ss-score` tells you *how good it is
overall* and *what to fix first* β a single number plus a category breakdown, so
you can track UI quality like you track test coverage.
## When NOT to use
- For a quick pass/fail before committing β use `/ss-lint`
- For a full prose audit with fixes β use `/ss-review`
- For logic/config with no visual artifact β scoring is meaningless
## Step 0 β Resolve the effective rule set
Before scoring, read `PRODUCT-PRINCIPLES.md`, `RULESETS.md`, `ADAPTERS.md`, `PRESETS.md`, and `STYLESEED.md`.
If the lock selects `reference:<slug>`, read its project-local `RULESET.md` and evidence/checks.
Score in authority order: core invariants first, then the exact output grammar, domain/page,
optional aesthetic profile, and bounded lock values. The lock cannot waive an invariant.
Unknown values fall back to the nearest built-in grammar; do not invent an exception.
The output must name the effective rule set, for example:
Flowy AI Flows that just work. Hand-picked Claude Code plugins that fire the right skill as you prompt.
```text
Rule set: operations-console Γ SaaS Γ dashboard Γ swiss
```
## What to score
Score the file (or each file in a directory) on **eight weighted categories** that
map to the design language. Total = 100.
| Category | Weight | Reads from |
|---|---|---|
| **Color discipline** | 16 | DESIGN-LANGUAGE Β§1, Β§18, Β§72 + VISUAL-CRAFT Β§C4 |
| **Hierarchy & typography** | 16 | Β§2, Β§3, Β§4, Β§16 + Font Size table + VISUAL-CRAFT Β§C2 |
| **Layout & rhythm** | 12 | Β§13, Β§14, Β§15, Β§61 + VISUAL-CRAFT Β§C1 |
| **Cards & elevation** | 10 | Β§7, Β§8, Β§12, Β§1 + VISUAL-CRAFT Β§C3 |
| **States & a11y** | 18 | Β§11, Β§70, Β§71, Β§72 + VISUAL-CRAFT Β§C3 |
| **Motion & interaction** | 6 | Β§24, Β§59 + `engine/motion` |
| **Coherence** | 12 | VISUAL-CRAFT Β§C0 (one choice per axis) |
| **Distinctiveness** | 10 | Golden Rules 14β16 + VISUAL-CRAFT Β§CC-9b (not generic/default/template) |
## How to score each category
For each category, start at full marks and **subtract** for violations you find by
reading the code. Be specific and evidence-based β cite the line.
**Color discipline (16)** β deduct for: accidental `#000`/`text-black` outside a profile or
grammar contract that explicitly uses hard black structurally (β4 each, cap β8); competing
decorative emphasis hues (β5); **emoji used as UI icons** (β5); **a normal/OK/"보ν΅" state shown in a status color** instead of
neutral grey (β4); **status color on most/every row** (no severity hierarchy) (β4);
**decorative hues** (gold stars, rainbow category dots) instead of accent/grey (β3);
hardcoded hex where a semantic token exists (β2 each, cap β6); status conveyed by color
alone (β4); **the unlocked default indigo (`#5E6AD2`/`#4F46E5`) used as the accent** instead of
a chosen domain-fit color (β4).
**Distinctiveness (10)** β a coherent screen can still read "AI-generated." Deduct for: the
**icon-chip clichΓ©** β a generic Lucide line-icon in an identical pale-tinted rounded-square,
repeated for every feature/step (β4, Β§CC-9b); the **StyleSeed demo layout copied verbatim**
(hero+chat / 3-step / feature-grid / pricing) with no product-specific identity (β4); **no focal
point** β an all-even grid of same-weight, centered, evenly-spaced cards (β3); the hero shows a
stock/placeholder visual instead of *this* product (β3); the **escape hatch as a new uniform**
(Β§CC-9c) β ghost 01/02/03 index numbers on every section, or identical uppercase-overline +
big-number cards repeated with no variation (β2); **distinctive-but-dated** (Β§CC-9d) β full
beige/paper page base, serif body text on a product surface, dark-heavy blocks that read
"brochure" not "2026 product" (β3). Cap β10.
**Hierarchy & typography (16)** β deduct for: number/unit not ~2:1 (β4); font
sizes off the Font Size table / `text-[var(--β¦)]` for size (β5); everything the
same weight, no clear primary (β5); cramped or wrong line-height on body (β3);
**body < 16px on a desktop/web B2B surface** (tight mobile scale on a wide screen) (β4 β
but dense-data chrome is exempt: chart ticks, mono SHAs/timestamps, table metadata at
12β13px are correct; and dashboard app-chrome h1 at 22β24px is correct, not a violation
of the marketing 40β56px headline scale).
**Layout & rhythm (12)** β deduct for: grouping that contradicts the selected grammar (β6):
`operations-console` needs explicit functional groups, while `editorial-reading` should not be
forced into cards; arbitrary off-scale spacing (β3); same section type repeated without purpose
(β4); no discernible proximity rhythm (β3).
**Cards & elevation (10)** β deduct for mixed or task-inappropriate surface language. Hairlines,
flat grouping, tonal ramps, or restrained shadows are valid only when the selected grammar/profile
uses them coherently. Deduct mixed border/shadow languages (β4), visibly heavy or directionally
inconsistent shadows (β4), or missing group/surface separation where the grammar requires it (β5).
**States & a11y (18)** β deduct for: missing empty/loading/error state on a data
surface (β5 each, cap β10 β a static mockup or marketing landing with NO data surface is
**N/A**: skip these deductions, don't fail the category); contrast below 4.5:1 body / 3:1
large (β6); touch target < 44px on a touch surface (pointer-first desktop controls at
36β40px are fine) (β4); no visible focus / `outline:none` (β5); icon-only control
without `aria-label` (β3).
**Motion & interaction (6)** β deduct for: random/ad-hoc fades instead of a named
seed/keyword (β3); motion that delays content or blocks an action (β4); no
`prefers-reduced-motion` handling on custom motion (β3). **Scroll-linked/parallax/3D/animated-
gradient is SURFACE-DEPENDENT (Β§43):** on an app/dashboard/data/form surface it's forbidden
(β5); on a **marketing/landing/brand page it's ALLOWED (the Cinematic tier)** β there, do NOT
deduct for scroll-linked reveals, pinned sections, 3D hero, or animated backgrounds; only deduct
for **scroll-JACKING** (hijacking scroll / trapping) (β5), motion that hides content until scroll
or delays the headline/CTA (β4), or a missing `prefers-reduced-motion` fallback (β3). Judge by
page type first, then score.
**Coherence (12)** β the "one choice per axis" laws (VISUAL-CRAFT Β§C0). Deduct for
each axis that is *mixed* rather than unified across the file: mixed radius
personalities, e.g. sharp panel + pill buttons (β5); two+ competing accent hues used
for emphasis (β4); mixed shadow languages / light directions (β3); mixed icon
families, fill modes, or stroke weights (β3); same radius on a nested element instead
of `inner = outer β padding` (β2); inconsistent control heights for buttons/inputs
(β2). This is the category that most predicts "looks AI-generated" β weight evidence
of system-wide consistency, not per-component prettiness.
Clamp each category at 0. Sum to a total.
## Output format
```
## Design Score: 70 / 100 (src/app/Dashboard.tsx)
Rule set: operations-console Γ product-ui Γ SaaS Γ dashboard Γ swiss
ββββββββββββββββββββββ C-
Color discipline 11/16 ββββ competing orange+blue emphasis hues (l.28-34)
Hierarchy & typography 13/16 ββββ number/unit 1:1 on hero (l.18)
Layout & rhythm 9/12 ββββ two identical KPI rows (l.22-31)
Cards & elevation 8/10 ββββ mixed border + floating-shadow language (l.22)
States & a11y 11/18 ββββ no empty/loading state; focus ring missing (l.55)
Motion & interaction 4/6 ββββ default fade, not a named seed
Coherence 6/12 ββββ sharp cards (l.22) + pill buttons (l.48); 3 accent hues (Β§C0)
Distinctiveness 8/10 ββββ all-even KPI grid weakens the operational focal panel
### Fix first (highest score gain)
1. Add empty + loading states to the orders list β +7 states (Β§71)
2. Unify radius (pick soft 8-12px) + collapse to one accent β +9 coherence+color (Β§C0, Β§2)
3. Drop the 1px borders, use tone + β€8% shadow β +4 cards (Β§7)
Re-score after: ~92 / 100.
```
Use letter bands: 90+ A Β· 80-89 B Β· 70-79 C Β· 60-69 D Β· <60 F.
## Gate mode (use this as the Quality Gate before showing the user UI)
The Quality Gate (CLAUDE.md / AGENTS.md) is `/ss-score` run as a loop, not a one-off:
1. Score the just-generated UI.
2. If **< 80**, apply the "fix first" list (use `/ss-review` to make the edits), then **re-score**.
3. Repeat up to ~3Γ, or until β₯ 80.
4. Present the UI with the final score and a one-line "fixed: β¦".
The pass bar is a **floor, not a ceiling** β get to β₯ 80 and stop; don't chase 100. The point
is that no first-draft, obviously-incoherent UI reaches the user. Especially never ship below
80 with a rainbow status list, emoji icons, two accents, or missing states β those are the
exact tells the gate exists to catch.
## Rules
- **Read the file** β score from real evidence (line numbers), never guess.
- Order the "fix first" list by **score gain**, not by severity alone β the goal
is the fastest path to a better number.
- For a directory, print a one-line score per file, then the lowest-scoring file's
full breakdown.
- Don't auto-edit in plain scoring. `/ss-score` measures; `/ss-review` and `/ss-motion` fix.
In **Gate mode** (above) you do fix-and-re-score until the floor is met.
- As a *gate*, β₯ 80 is a floor before showing the user β but don't over-polish: chasing 95β100
to delay shipping is worse than shipping a clean 85.
Β© 2026 Flowy Β· Free and open source
Built for Claude Code Β· Not affiliated with Anthropic
