# Superdesign

> Create, redesign, or critique web and mobile interfaces with static design gates and rendered verification. Also supports design tokens, visual direction exploration, and standalone images, icons, or logos.

- Skill: `cskwork/superdesign` (Agent Skill, multi-file: 30 files)
- Install (CLI): `npx skillmds@latest add cskwork/superdesign`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cskwork/superdesign/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: cskwork (https://skillmd.com/u/cskwork)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/cskwork/superdesign

---


# /superdesign - intent-driven elegance

Intent -> trend-aware direction that fits -> elegant UI -> verified against a deterministic anti-slop gate. One-line CSS tweak: skip this skill, edit directly.

## Core principles

- Elegance is baseline, not padding. Polished = correct, not extra credit.
- Read intent first. Design to the brief (kind, audience, brand, constraints), never to a default template.
- Trend-aware != trend-chasing. Apply only trends that serve the intent. Record the trend read, dated.
- Anti-slop enforced, not eyeballed. Every surface passes `anti-slop-gate.mjs` + contrast gate. Designer never self-approves.
- Diverse by intent. Route to the aesthetic family + medium that fit; no single house style.
- Self-contained + graceful fallback. Asset/trend tooling degrades: works without Stitch/gpt-image-2/WebSearch; missing tools -> documented placeholder + baked snapshot, never faked assets or invented data. Rendered verification is the one hard dependency: build modes render with `playwright-cli` (the only render driver, `reference/playwright-cli.md`); if it cannot be installed, STOP and ask - never substitute a headless render.
- Verify vs ground truth. Run the static gate AND render the built surface with `playwright-cli`, honor reduced-motion + WCAG AA, report what passed with command output.
- Hard stops. External publish (deploy/push/post) or destructive steps need explicit consent; ambiguous brief -> one question (non-interactive run: conservative read, assumption logged in the brief, proceed).

## Mode (classify the design intent, state it in one line)

| Signal | Mode | Approach |
|---|---|---|
| new UI / landing / app / screen from scratch | CREATE | default loop |
| redesign / modernize / improve / refresh existing UI | REDESIGN | audit-first (`reference/redesign.md`) |
| tokens / palette / type / theme / design system only | SYSTEM | `reference/design-system.md` |
| critique / audit / review (no build) | CRITIQUE | review-only, run detectors (`reference/critique.md`) |
| explore / moodboard / directions / "what style" | EXPLORE | divergent, trend-heavy, no commit (`reference/explore.md`) |
| image / icon / illustration / SVG / logo (asset only) | ASSET | fallback chain (`reference/assets.md`) |

Medium (web vs mobile/native) is orthogonal - decide in the loop, load `reference/web.md` or `reference/mobile.md`.

Tie-breaks (one mode wins): "critique and fix" -> REDESIGN (CRITIQUE never edits). "explore then build" -> EXPLORE; build only after the user picks. Tokens AND a page asked -> the deliverable decides (token file = SYSTEM, page = CREATE). Assets needed inside a build stay in CREATE/REDESIGN; ASSET only when the asset is the whole ask.

## Default loop (CREATE / REDESIGN) - role-separated

Keep Designer and critic roles separate. A single surface runs inline with a fresh re-read for critique. Delegate independent surfaces or asset work only when it reduces total work; surface count alone does not require agents. Preserve static and rendered verification for each built surface.

**Vault** = one work dir per surface, default `.superdesign/<surface>/`: holds `design-brief.md`, `trend-pulse.md`, `claims.md`, `contrast-pairs.json` (start each from `templates/`; the pairs seed is `templates/contrast-pairs.example.json`). `templates/preflight-gate.sh <vault> <source files>` reads it - no vault, no gate. Create it at step 1.

1. **Read (brief).** Infer kind, audience, vibe, references, brand, quiet constraints (a11y/regulation override aesthetics). State: `Reading this as: <kind> for <audience>, <vibe> language, leaning <system or family>.` Two reads diverge -> ask ONE question; else do not ask; non-interactive -> conservative read + logged assumption. Record in the vault. (`reference/design-brief.md`)
2. **Trend pulse.** `WebSearch` current trend lane by default; on failure use `reference/trend-snapshot.md` (dated) and warn it may be stale. Reuse a same-kind pulse <=30 days old instead of re-searching (note the reuse). Keep only intent-serving trends. Record dated in the vault `trend-pulse.md`. (`reference/trend-research.md`)
3. **Direction.** Set dials `DESIGN_VARIANCE` / `MOTION_INTENSITY` / `VISUAL_DENSITY` - scale and baseline in `reference/taste-core.md`. Pick official design system OR one aesthetic family (`reference/aesthetics.md`) OR one trend lane - never mix. Pick medium, load `reference/web.md` or `reference/mobile.md`. Done when three dial values, one system/family/lane, and the medium are all named.
4. **Build (Designer).** Implement to `reference/taste-core.md` (always authority) + chosen family/medium. Assets via `reference/assets.md`. Engagement-bearing brief (Read names a primary action - sign up/buy/book/subscribe) -> also `reference/engagement.md`. Data-dense business app (admin/dashboard/console/internal tool) -> also `reference/dashboard.md` (density-first dials, app shell, no marketing hero). Enforce anti-default + reduced-motion + computed contrast. No self-approval; append `claims.md` per surface with a `Framings:` line. (`agents/designer.md`)
5. **Critique (independent; no design edits).** Re-read `reference/taste-core.md` + `reference/impeccable-rules.md`. Enumerate every text/bg pair into vault `contrast-pairs.json`. Run `templates/preflight-gate.sh` (-> `anti-slop-gate.mjs` + `contrast-gate.mjs`) on the source, then render the surface with `playwright-cli` (`reference/playwright-cli.md`), write the `## Render` block, and run `templates/render-gate.sh`. Log every violation. (`agents/design-critic.md`)
6. **Verify.** Fix each violation, smallest change; re-run BOTH gates (preflight + render) until green. Report passes with output. Fresh violation loops critique -> fix; stop on green. Cap: 3 critique->fix cycles; same rule still failing -> stop, report remaining violations honestly.

Roles -> personas: build=`agents/designer.md`, critique=`agents/design-critic.md`, trends=`agents/trend-scout.md`, assets=`agents/asset-producer.md`.

## Mode contract (deliverable + done-when)

No-build modes (SYSTEM/CRITIQUE/EXPLORE/ASSET): load the mode's reference file, deliver its row, skip the loop. ASSET chain: `gpt-image-2` -> Stitch -> real web image/SVG -> placeholder.

| Mode | Deliverable | Verified by |
|---|---|---|
| CREATE / REDESIGN | surface code + vault | `templates/preflight-gate.sh` (static) AND `templates/render-gate.sh` (rendered via playwright-cli) green, output reported |
| SYSTEM | token file + one-screen usage example | `templates/contrast-gate.mjs` on every pair; `templates/anti-slop-gate.mjs` on the sample |
| CRITIQUE | findings report (severity, file:line, fix, verdict) | detectors ran on the input; URL/HTML input also rendered + `templates/render-gate.sh` (screenshot-only input cannot render - note it); zero edits |
| EXPLORE | 2-4 divergent directions + one recommendation | directions genuinely differ; nothing built |
| ASSET | asset file(s) + manifest (tier used, substitutions) | links resolve; palette matches; placeholders flagged |

## Reference map (load only what the phase needs)

| Read | When |
|---|---|
| `reference/design-brief.md` | Read: infer brief, one-line read, single question |
| `reference/trend-research.md` | Trend pulse: search, evaluate, record |
| `reference/trend-snapshot.md` | Trend pulse fallback: dated offline snapshot + refresh |
| `reference/taste-core.md` | Build + Critique: always-on anti-slop visual authority |
| `reference/aesthetics.md` | Direction: pick <=1 aesthetic family (selection map) |
| `reference/impeccable-rules.md` | Critique: anti-pattern guardrails behind the detector |
| `reference/web.md` | Build: web stack + layout |
| `reference/mobile.md` | Build: mobile/native (iOS HIG, Material 3, RN/SwiftUI/Compose) |
| `reference/engagement.md` | Build: conversion/engagement craft when the brief names a primary action (SaaS/consumer/commerce/marketing) |
| `reference/dashboard.md` | Build: data-dense business app / admin / dashboard / internal tool (density-first overlay; no marketing hero) |
| `reference/playwright-cli.md` | Critique: the only render driver - render the built surface, then run `templates/render-gate.sh` |
| `reference/sources.md` | Install commands, sources, attribution |

## Final checklist

- [ ] Mode + medium stated; brief read one line; trends pulsed + dated (or snapshot fallback disclosed)
- [ ] One accent, one type system, one radius, one theme strategy; dials declared
- [ ] Real/generated assets (no div-mockups); reduced-motion + WCAG AA honored
- [ ] Engagement-bearing brief -> `reference/engagement.md` applied (primary action obvious, useful states, real-data proof, outcome-led CTA); editorial/portfolio left alone
- [ ] Data-dense business app (admin/dashboard/console/internal tool) -> `reference/dashboard.md` applied (no marketing hero; app shell + density dials VAR 3-5/MOT 2-3/DEN 6-8; KPI north-star with deltas; tabular numerals; colorblind-safe status; per-widget loading/empty/error; tables virtualized past ~50 rows)
- [ ] Mode contract met: build modes -> `templates/preflight-gate.sh` (static) AND `templates/render-gate.sh` (rendered via playwright-cli) green with output reported; other modes -> their verified-by row
- [ ] Smallest change for intent; surrounding style matched; no unrequested rewrites
- [ ] Any external publish / destructive step had explicit consent