superdesign
GitHub
Claude Code skill

Design anything, on the current trend, with elegance.

Read the intent, pulse what is current, route to the aesthetic that fits, and ship UI that passes a gate, not a vibe check.

6

intent-routed modes

5

aesthetic families

9

slop detectors

2

deterministic gates

anti-slop-gate.mjs
$ node anti-slop-gate.mjs hero.html== ANTI-SLOP GATE: FAIL ==hero.html:7  [ai-purple]   lock a deliberate accenthero.html:7  [inter-default] avoid Inter as defaulthero.html:9  [filler-verb]  rewrite the filler verbhero.html:9  [em-dash]      use hyphen or colon # fix the design, re-run== ANTI-SLOP GATE: PASS == (1 file(s))

What the gate greps for

em-dashai-purpleinter-defaultbounce-easingpure-bwblack-shadowplaceholder-namefiller-verbscroll-listenerwcag-contrast
One intent, six routes

It reads what you need, then picks the right job.

No single house style. The intent decides the mode, the medium, and the aesthetic family.

01Create

New UI from scratch

Landing, app, screen. Brief to elegant build through the full design loop.

02Redesign

Modernize what exists

Audit first, preserve brand and SEO, then recompose.

03System

Tokens and theme

Color, type, spacing, radius, light and dark.

04Critique

Review only

Run the detectors on code or a URL, get findings.

05Explore

Divergent directions

Two to four real options, commit to none.

06Asset

Images, icons, marks

A fallback chain from generation to real SVG to a flagged placeholder. Never a faked screenshot.

+Vault

One work dir per surface

design-brief, trend-pulse, claims, contrast-pairs. No vault, no gate.

Role-separated

The designer builds. A separate critic runs the gate.

Author independence: the build never grades its own work.

Designer
1

Read the brief

Kind, audience, brand, constraints. Stated in one line.

Designer
2

Pulse trends

Live search, dated snapshot fallback. Only trends that serve the brief.

Designer
3

Set direction

Three dials, one system or family, the medium.

Designer
4

Build

To the visual authority, with real assets and computed contrast.

Critic
5

Critique

Independent. Runs the detectors, logs every violation.

Gate
6

Verify

Fix, re-run the gate until green, report with output.

Enforced, not eyeballed

A deterministic anti-slop gate.

The predictable AI tells are grep-able. The script computes the verdict so a silent slop pattern cannot pass.

  • em / en dashbanned as a separator in visible text
  • AI-purpleflagged as a default accent
  • Inter defaultflagged unless a justified neutral read
  • bounce easingovershoot cubic-bezier caught by math
  • pure black/whitetint to off-black and off-white
  • WCAG contrastcomputed per text and background pair

Proof: the terminal on the right is this page's own pre-flight run. The 25-pair contrast table is trimmed to its verdict lines.

preflight-gate.sh docs/index.html
$ bash preflight-gate.sh .superdesign/landing docs/index.html
-- anti-slop-gate --
== ANTI-SLOP GATE: PASS == (1 file(s))
-- contrast-gate --
element                fg       bg       ratio  need
muted text, worst-case #aaa8a1  #352e1e   5.65   4.5  ok
CTA label on accent    #0e0f11  #e9b949  10.50   4.5  ok
... 23 more pairs, all ok ...
== CONTRAST GATE PASS ==
== PREFLIGHT PASS ==
Two lines

Install and design.

shell
git clone https://github.com/cskwork/superdesign-skill ~/skills/superdesign-skill
ln -s ~/skills/superdesign-skill ~/.claude/skills/superdesign

# then, in Claude Code
/superdesign a calm landing page for a developer-tools startup