Superdesign

Superdesign helps you find design inspiration and generate or iterate design drafts on an infinite canvas, with multiple leading models available for different design tasks and side-by-side exploration. When a design needs a new visual asset, it can also provide image and video generation.

Core scenarios (what this skill handles)

1. Analyze a codebase for design work — superdesign init builds reusable UI context in .superdesign/init/; read INIT.md.
2. Design, reproduce, or improve UI — create pages, features, flows, and new products on the canvas; read SUPERDESIGN.md.
3. Choose and compare leading design models — run list-models, select a model suited to the task, or use different models to explore independent directions.
4. Create design systems and reusable components — establish visual foundations, extract patterns, and design connected multi-page experiences.
5. Design from a live website or reference URL — extract and apply its design language; read WEBSITE.md.
6. Create or export presentations — plan an editable slide outline, approve it in chat, generate a real presentation draft, make slide-safe edits, or reconstruct an editable PPTX when requested and supported; read PRESENTATION.md.
7. Create graphics — posters, covers, social posts, thumbnails, flyers, and ads; read GRAPHIC.md.
8. Generate supporting images or video — use native image generation when appropriate or choose from Superdesign's generation models; read ASSET_GENERATION.md.
9. Continue or directly correct existing work — resume saved targets through RESUME.md, or use design-with-your-model.md when direct authoring is the right path.

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.

Step 0 — Environment preflight (BEFORE any CLI step)

Superdesign runs entirely through its CLI, so you must be able to execute shell commands. Confirm that capability first, before any CLI verification.

If you have no way to run shell commands in this environment (no terminal/execution tool at all), OR your very first bare npx --yes @superdesign/cli@latest preflight attempt fails because command execution itself is unavailable (the harness reports it cannot run commands / there is no shell) then STOP. Do NOT keep retrying or improvise workarounds. Tell the user once, and pick the message that matches where you are running:

• Standard ChatGPT chat without Work Mode tools — this exact copy, because the Work tab is the fix:

  Chat isn't supported by the Superdesign plugin. Please switch to the Work tab and paste this prompt in for the full experience.

• Any other harness (a coding agent whose shell is unavailable or disabled) — do NOT send the ChatGPT copy; there is no Work tab to switch to. Say plainly that Superdesign drives its CLI over the shell, that this session cannot run shell commands, and that they can re-run it in a session with shell access or design in the web app at https://superdesign.dev.

Step 1 — Is there a codebase to analyze?

Two entry paths. Choose one with this cheap, deterministic check BEFORE any init or design work.

No meaningful codebase (empty workspace, scratch/sandbox dir, no frontend code) — treat the workspace as "no codebase" when ALL of these hold:

• No .superdesign/init/ files already exist, AND
• No dependency manifest with frontend deps (no package.json, or a package.json whose deps include no frontend framework/UI library — react, vue, svelte, angular, next, nuxt, astro, etc.), AND
• No frontend source found (a quick scan for .tsx/.jsx/.vue/.svelte files, any .html/.css files such as a root index.html + style.css, or a src//app//components/ dir with UI files, turns up nothing).

→ SKIP repo init entirely. Do NOT "analyze" an empty sandbox, and do NOT ask the user to point you at a repo they don't have. Instead, gather design context conversationally FIRST: ask what they want to build, the target audience/platform, style/brand preferences, and any reference designs or inspirations. Then design from that conversation via the BRAND NEW PROJECT path in SUPERDESIGN.md.

Real codebase present (any frontend code, or an existing .superdesign/init/) — repo init must have completed at least once before designing. Reuse a valid initialized target through Step 1.5; run the full analysis only when init is incomplete or warm state cannot be used.

Exception — standalone extraction: if the task is ONLY to extract a site's design DNA or set/refresh design-system.md from a URL (extract-website → design-system.md, no design generation; read WEBSITE.md for the recipes), run it WITHOUT repo init — extracting an external site's style doesn't require analyzing the user's codebase. Init is still required before generating designs FOR the existing codebase's UI (reproducing/redesigning an existing page).

Exception — graphics: posters/marketing assets (scenario 7) skip init even in a real codebase — the brief carries the style, and most of init's output (components, layouts, routes, pages) has no bearing on a fixed-canvas artwork. The graphic brief round asks whether the artwork should be on-brand with this repo's product (GRAPHIC.md Step 1); only an on-brand "yes" pulls in the design-system/brand context — running init first only if that context doesn't already exist.

Exception — presentations: slide decks (scenario 6) skip UI repo init by default because routes, components, and page dependency trees do not help deck creation. Follow PRESENTATION.md. Use narrowly relevant product documents, design-system context, and Brand Assets when the user wants an on-brand product presentation; run init only when matching the codebase brand is required and no usable brand/theme context exists yet.

Exception — image/video generation: a standalone generated asset (scenario 8) skips init even in a real codebase. Read ASSET_GENERATION.md and gather only the project, brand, reference, or destination context the requested asset actually needs. If the asset is one step inside a broader UI, presentation, or graphic-design task, follow that task's normal init/brief path and use asset generation only at the point where a new visual is needed.

Step 1.5 — Resume before rediscovery (real-codebase UI path)

Before reading init artifacts or source files, check .superdesign/resume.json for the requested route/feature. A matching target defaults to RESUME.md regardless of whether the user says "continue", "change", "redesign", or gives only a direct instruction such as "make the dashboard darker". Intent phrasing never decides warm versus cold routing.

Apply the saved target's trust/structural checks FIRST. A safe, structurally valid target reuses the saved project, draft, component records, design direction, and exact --context-file bundle: matching hashes go to warm resume, while mismatches go to incremental refresh without cold rediscovery. If a request needs code understanding not captured by the active draft metadata, use RESUME.md's targeted context-expansion rule; do not rerun full discovery merely to understand that request.