# Superdesign: the design skill for Claude Code, Cursor and any coding agent

**Stop shipping AI-slop UI.** Coding agents write great code and mediocre interfaces: generic layouts, default shadcn everything, no taste. Superdesign is the skill that gives your agent design judgment, so the UI it ships actually looks considered.

Install it once and your agent (Claude Code, Cursor, Codex, and 70+ others) can find real design direction, set up a design system, and generate + iterate high-quality UI drafts on an infinite canvas, all without leaving your terminal.

> Powered by [superdesign.dev](https://superdesign.dev), the AI product design agent.

[![Superdesign skill demo](https://i.ytimg.com/vi/AZYJWyWZ6pQ/maxresdefault.jpg)](https://youtu.be/AZYJWyWZ6pQ)

*▶ Watch the skill in action.*

---

## What is Superdesign?

**Superdesign is an AI product design agent.** It gives coding agents (Claude Code, Cursor, Codex, and 70+ others) real design judgment, so the UI they ship looks considered instead of generic.

- **What it does** — finds design direction, sets up a design system from your codebase, and generates + iterates high-quality UI drafts on an infinite canvas, all from your terminal.
- **Who it's for** — developers, indie hackers, and product/UI designers who want to go from idea to shippable UI fast without leaving their coding agent.
- **How it's different** — style-preset skills just swap in a theme or a component library. Superdesign designs *into* your existing design system: it reads your code for context, gathers real style references, and produces branchable drafts you refine.
- **Two ways in** — this skill from any coding agent, or the web app at [superdesign.dev](https://superdesign.dev).

> **Not the legacy IDE extension.** The archived open-source `superdesigndev/superdesign` VS Code extension is an older, separate project. This skill and [superdesign.dev](https://superdesign.dev) are the current, maintained product.

---

## Install

```
npx skills add superdesigndev/superdesign-skill
```

This works for any of the [70+ supported coding agents](https://github.com/vercel-labs/skills#supported-agents). Then install the CLI it drives:

```
npm install -g @superdesign/cli@latest
superdesign login
```

## Use it

Just talk to your agent:

```
/superdesign help me redesign this settings page so it doesn't look like default AI slop
```

```
/superdesign set up a design system from my current codebase
```

```
/superdesign improve the design of my dashboard
```

The skill handles the rest: it reads your code for context, gathers real style references, and produces design drafts you can branch and refine.

---

# Core scenarios (what this skill handles)

1. **Help me design X** (feature/page/flow)
2. **Set design system**
3. **Help me improve design of X** (make it not look AI-generated)

## Tooling overview

### A) Inspiration & Style Tools (generic, always available)

Use these to discover style direction, references, and brand context. Browse the full [prompt library](https://superdesign.dev/library) in the web app, or query it from the CLI:

- **Search prompt library** (style/components/pages)

  ```bash
  superdesign search-prompts --query "<keyword>"
  superdesign search-prompts --tags "style"
  superdesign search-prompts --tags "style" --query "<style keyword>"
  ```

- **Get prompt details** — read the compact index first, then fetch the full body only for the slug(s) you pick

  ```bash
  superdesign get-prompts --slugs "<slug1,slug2,...>"          # index
  superdesign get-prompts --slugs "<slug>" --full             # full body of the chosen slug(s)
  ```

- **Extract a site's design DNA from a URL** (style guide, tokens, content, brand, clone)
  ```bash
  superdesign extract-website --url https://example.com --design-md
  ```

### B) Canvas Design Tools

Use design agent to generate high quality design drafts:
- Create project (optionally seed a baseline draft from an HTML template via `--template`)
- Create design draft
- Iterate design draft (replace / branch)
- Plan flow pages → execute flow pages
- Fetch specific design draft

---

## Overall SOP for designing features on top of existing app:
1. Investigate existing UI, workflow
2. Setup design system file if not exist yet
3. Requirements gathering: ask the user using the session's available user-input mechanism; if none is available, ask in chat (optionally use Inspiration tools when needed)
4. Ask user whether ready to design in superdesign OR implement UI directly
5. If yes to superdesign
  5.1 Create/update a pixel perfect html replica of current UI of page that we will design on top of in `.superdesign/replica_html_template/<name>.html` (html should only contain & reflect how UI look now, the actual design should be handled by superdesign agent)
  5.2 Create project with this replica html + design system guide
  5.3 Start desigining by iterating & branching design draft based on designDraft ID returned from project


## Always-on rules
- Design system should live at: `.superdesign/design-system.md`
- If `.superdesign/design-system.md` is missing, run **Design System Setup** first.
- Ask high-signal questions about constraints, taste, and tradeoffs using the session's available user-input mechanism; if none is available, ask in chat.
- Read each command's default output directly — it is agent-optimized (compact TOON plus `help[]` next-step hints). Add `--json` only when you genuinely need the full machine-readable payload, and `--full` only to expand truncated fields.

---

## replica_html_template rules (Canvas only)

The purpose of replica html template is creating a lightweight version of existing UI so design agent can iterate on top of it (Since superdesign doesn't have access to your codebase directly, this is important context)

Overall process for designing features on top of existing app:
1. Identify & understand existing UI of page related
2. Create/update a pixel perfect replica html in `.superdesign/replica_html_template/<name>.html` (Only replicate how UI look now, do NOT design)
  - If design task is redesign profile page, then replicate current profile page UI pixel perfectly
  - If design task is add new button to side panel, identify which page side panel is using, then replicate that page UI pixel perfectly

**replica_html_template = BEFORE state (what exists now).** It provides context for Superdesign agent.
Actual design will be done via superdesign agent, by passing the prompt

The replica_html_template must contain **ONLY UI that currently exists in the codebase**. 
- **DO NOT** design or improve anything in the replica_html_template
- **DO NOT** add placeholder sections like `<!-- NEW FEATURE - DESIGN THIS -->`
- **DO** create pixel-perfect replica of current UI state
- Save to: `.superdesign/replica_html_template/<name>.html`

### Naming & Reuse

**Naming convention** 
Name replica_html_template for reusability: Use the page route (e.g., `home.html`, `settings-profile.html`, `dashboard.html`)
This makes it easy to identify if a page_template already exists.

**Before creating a replica_html_template:**
1. Check if `.superdesign/replica_html_template/` already contains a matching file
2. If exists: reuse it or update to reflect the latest existing UI
3. If not exists: create the neww file

### Example: Adding a "Book Demo" section to home page

**BAD approach:**

```html
<!-- replica_html_template includes a sketched Book Demo section -->
<section class="book-demo">
  <!-- DESIGN THIS - Add CTA here -->
  <h3>Book a Demo</h3>
  <button>Schedule</button>
</section>
```

**GOOD approach:**

```html
<!-- replica_html_template is pure replica of existing home page (hero + projects) -->
```

Then in the iterate command:
1/ create project passing this replica html
2/ create design draft based on design draft id

---

# 1) Design System Setup

### Step 0 — Ask user (one question)

"Do you want to **create a new design system** or **extract from the current codebase**?"

### A) Extract from codebase

1. Investigate codebase:
   - Product context: what is being built, target users, core value proposition, key user journeys and page structure
   - design tokens, typography, colors, spacing, radius, shadows
   - motion/animation patterns
   - example components usage + implementation patterns
2. Write standalone design system to:
   - `.superdesign/design-system.md`
   - Must be implementable without the codebase

### B) Create a new design system (to improve current UI)

1. Investigate codebase to understand:
   - Product context: what is being built, target users, core value proposition, key user journeys and page structure
   - needed pages/components
2. Gather inspirations (generic tools):
   - `superdesign search-prompts --tags "style"`
   - `superdesign get-prompts --slugs ...` (index first; add `--full` for the chosen slug's full body)
   - optional: `superdesign extract-website --url ... --design-md` (style guide → design.md; add `--brand` for assets)
3. Ask the user to choose a direction using the session's available user-input mechanism; if none is available, ask in chat
4. Write:
   - `.superdesign/design-system.md` (product context + UX flows + visual design, adapted to references)

---

# 2) Designing X (feature/page/flow)

### Example workflow - Add feature to existing page

1. Investigate the existing design and ask targeted questions about requirements and taste using the session's available user-input mechanism; if none is available, ask in chat
2. After clarifying, Ask user whether ready to design in superdesign OR implement UI directly
3. If design in superdesign
  3.1 Ensure `.superdesign/design-system.md` exists (setup if missing)
  3.2 Identify page most relevant, and build a pixel-perfect replica in replica_html_template:
    - `.superdesign/replica_html_template/<page>-<feature>.html`
  3.3 Create project, seeding the baseline draft from the replica HTML template (returns `draftId`):
    ```bash
    superdesign create-project \
      --title "<feature>" \
      --template .superdesign/replica_html_template/<file>.html
    ```
    → Note: `draftId` in the response is the baseline draft. The design system is passed as a `--context-file` on the iterate step below, not on `create-project`.
  3.4 Branch designs from baseline (use `draftId` from step 3.3)
    ```bash
    superdesign iterate-design-draft \
      --draft-id <draftId> \
      -p "Dark theme with neon accents" \
      -p "Minimal with more whitespace" \
      -p "Bold gradients and shadows" \
      --mode branch \
      --context-file .superdesign/design-system.md
    ```
  3.5 Share design title & preview URL → collect feedback → iterate


### Advanced usage

#### Design multiple page OR a full user journey

Execute:

```bash
superdesign execute-flow-pages \
  --draft-id <draftId> \
  --pages '[{"title":"Signup","prompt":"..."},{"title":"Payment","prompt":"..."}]'
```

#### Get HTML reference from a draft

```bash
superdesign get-design --draft-id <draftId> --output ./design.html
```

---

## Quick reference (key commands)

```bash
# Inspirations
superdesign search-prompts --query "<keyword>"
superdesign search-prompts --tags "style"
superdesign get-prompts --slugs "<slug1,slug2>"          # index; add --full for full bodies
superdesign extract-website --url https://example.com --design-md   # style guide; add --brand/--tokens/--content-structure/--clone for more

# Canvas - Create project
# Optional --template <path> seeds the first (baseline) draft from an HTML file.
# The design system is passed as --context-file on the draft/iterate commands, not here.
superdesign create-project --title "X"
superdesign create-project --title "X" --template ./index.html

# Iterate: replace mode (single variation, updates in place)
superdesign iterate-design-draft --draft-id <id> -p "..." --mode replace

# Iterate: Explore multiple versions & variations (each prompt = one variation, prompt should be just directional, do not specify color, style, let superdesign design expert fill in details, you just give direction)
superdesign iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" -p "bold" --mode branch

# Iterate: Auto explore (only give exploration direction, and let Superdesign fill in details, e.g. explore different styles; Default do not use this)
superdesign iterate-design-draft --draft-id <id> -p "..." --mode branch --count 3

# Fetch & get designs
superdesign fetch-design-nodes --project-id <id>
superdesign get-design --draft-id <id> --json          # full HTML payload; or --output <path> to write to a file

# Create new design from scratch without any reference - ONLY use this for creating brand new design, default NEVER use this
superdesign create-design-draft --project-id <id> --title "X" -p "..."
```

---

## Links

- Web app: [superdesign.dev](https://superdesign.dev)
- Prompt library: [superdesign.dev/library](https://superdesign.dev/library)
- Design system convention: [DESIGN.md](./DESIGN.md)
- Skill install for 70+ agents: [vercel-labs/skills](https://github.com/vercel-labs/skills)

## License

MIT. See [LICENSE](./LICENSE).