superdesign
Installation
SKILL.md
Superdesign helps you (1) find design inspirations/styles and (2) generate/iterate design drafts on an infinite canvas.
Core scenarios (what this skill handles)
- "superdesign init" (the user asking for repo analysis) — analyze the repo and build UI context to
.superdesign/init/. This is this skill's own analysis pass; the CLI'sinitcommand is a different thing entirely (it installs skill files) — never run it to build.superdesign/init/. - Help me design X (feature/page/flow) — the target decides the SOP: an existing rendered page is reproduced first (ground truth), while a brand-new page (in a real repo or from scratch) is designed directly with no reproduction step; see UI TARGET ROUTING in SUPERDESIGN.md
- Set design system (optionally seed or refresh it from a live site via
extract-website --design-md— you'll choose create-from / inspired-by / update-existing, asking first if adesign-system.mdalready exists; see SUPERDESIGN.md SOP: BRAND NEW PROJECT Step 2) - Help me improve design of X
- Make a poster / marketing asset (flyer, cover art, social feed post, story, channel cover, thumbnail, ad creative) — a static artwork, not a page. Skip repo init/analysis; read GRAPHIC.md and follow it (you generate the key visual with your own image tool, upload it, then compose the artwork on a fixed canvas; platform dimension table included).
- Design from a live website / reference URL (borrow a style, restyle, recombine, or plan a rebuild) — extract a reference site's design DNA (style guide, design tokens, content structure, brand assets, a static reference clone) with
extract-website, then design with it. Read WEBSITE.md and follow its recipes. Note: via the CLI a "recreate"/"clone" is a style-informed rebuild — faithful pixel-recreation and editable on-canvas clones are done in the Superdesign app (superdesign.dev), not the CLI. - Design or correct with your own model — when the user explicitly asks,
create-design-draft/iterate-design-draftstill fails after one retry, or SUPERDESIGN.md CORRECTION METHOD ROUTING selects a deterministic direct edit, follow design-with-your-model.md to author or revise the draft yourself. - Work on an initialized target — whenever a real-codebase UI request addresses a target already recorded in
.superdesign/resume.json, try the durable path in RESUME.md before any cold repo/context discovery. This is state-driven, not dependent on words such as "continue" or "refine".
When continuing a draft, follow SUPERDESIGN.md ITERATION MODE ROUTING: replace refines the selected direction with version history; branch is only for alternatives the user wants to compare.