superdesigndev-superdesign-skill

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, the AI product design agent.

---

Install

npx skills add superdesigndev/superdesign-skill

This works for any of the 70+ supported coding 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:

• Search prompt library (style/components/pages)

  superdesign search-prompts --keyword "<keyword>" --json
  superdesign search-prompts --tags "style" --json
  superdesign search-prompts --tags "style" --keyword "<style keyword>" --json
  

• Get full prompt details

  superdesign get-prompts --slugs "<slug1,slug2,...>" --json
  

• Extract brand guide from a URL

  superdesign extract-brand-guide --url https://example.com --json
  

B) Canvas Design Tools

Use design agent to generate high quality design drafts:

• Create project (supports prompt / prompt file / HTML)
• 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: use askQuestion tool to clarify requirements with users (Optionally use Inspiration tool to find inspiration 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.
• Use askQuestion to ask high-signal questions (constraints, taste, tradeoffs).
• Always use --json for machine parsing.

---

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