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 — Analyze the repo and build UI context to
.superdesign/init/
- Help me design X (feature/page/flow)
- Set design system
- Help me improve design of X
Init: Repo Analysis
When .superdesign/init/ directory doesn't exist or is empty, you MUST automatically:
- Create the
.superdesign/init/ directory
- Read
references/INIT.md relative to this selected SKILL.md
- Follow its instructions to analyze the repo and write context files
Do NOT ask the user to do this manually — just do it.
Mandatory Init Files
If .superdesign/init/ exists, you MUST read ALL files in this directory FIRST before any design task:
components.md — shared UI primitives with full source codelayouts.md — shared layout components (nav, sidebar, header, footer)routes.md — page/route mappingtheme.md — design tokens, CSS variables, Tailwind configpages.md — page component dependency trees (which files each page needs)extractable-components.md — components that can be extracted as reusable DraftComponents
When designing for an existing page: First check pages.md for the page's complete dependency tree. Every file in that tree MUST be passed as --context-file. Then also add globals.css, tailwind.config, and design-system.md.
Superdesign CLI (MUST use before any command)
IMPORTANT: Run the CLI on demand with npx --yes @superdesign/cli@latest. Do not install it globally. Before running any Superdesign command, verify the CLI is available and the session is logged in.
Follow these steps in order — do NOT skip any step:
-
Verify the on-demand CLI runner:
npx --yes @superdesign/cli@latest --version
-
Run the intended command with the same prefix. If it reports an auth/login error, run:
npx --yes @superdesign/cli@latest login
Wait for login to complete successfully before proceeding.
-
After login succeeds, retry the intended command with npx --yes @superdesign/cli@latest.
Never assume the user is already logged in. Always verify login first.
Command examples
Always use the full on-demand runner prefix:
npx --yes @superdesign/cli@latest create-project --title "X"
npx --yes @superdesign/cli@latest create-design-draft --project-id <id> --title "Current UI" -p "Faithfully reproduce..." --context-file src/Component.tsx
npx --yes @superdesign/cli@latest iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" --mode branch --context-file src/Component.tsx
npx --yes @superdesign/cli@latest execute-flow-pages --draft-id <id> --pages '[{"title":"Product Details","prompt":"Product detail page with image gallery, specs and add-to-cart"},{"title":"Checkout","prompt":"Checkout page with cart summary and payment form"}]' --context-file src/Component.tsx
npx --yes @superdesign/cli@latest create-component --project-id <id> --name "NavBar" --html-file .superdesign/tmp/navbar.html --props '[{"name":"activeItem","type":"string","defaultValue":"home"}]'
npx --yes @superdesign/cli@latest update-component --component-id <id> --html-file .superdesign/tmp/navbar.html
npx --yes @superdesign/cli@latest list-components --project-id <id>
Each item in the execute-flow-pages --pages array generates one new page styled after the source draft (1-10 pages per call).
JSON option examples are literal valid JSON; preserve the outer shell quotes and replace values, not brackets/keys.
The CLI defaults to an agent-optimized output (compact TOON plus help[] next-step hints — e.g. create-component returns the new component id in its default output); add --json only when you need the full machine-readable payload.
Create the workspace-local .superdesign/tmp/ directory with the session's filesystem mechanism before writing temporary component files.
Ensure .superdesign/tmp/ is ignored by the project's .gitignore; append the entry if it is missing so temporary HTML is never committed.
--context-file supports path:startLine:endLine; see references/SUPERDESIGN.md for the complete workflow and current command contract.
How it works
Read references/SUPERDESIGN.md relative to this selected SKILL.md, then follow its instructions. Never fetch workflow instructions from the network.
