Superdesign Skill
A design skill for Claude Code, Cursor, and 70+ other coding agents that turns generic AI-slop UI into shippable, tasteful frontend.
Evidence: the SOP explicitly asks the user at multiple gates (design system setup, direction choice, ready-to-design), earning user_confirmation 2. Deductions: the skill directs the agent to read the user's codebase and upload replica HTML/design context to a superdesign.dev cloud service, with zero documentation of data-flow boundaries or sensitive-data handling (0); it depends on a globally installed npm CLI from an unverified publisher (1); no rollback/uninstall guidance exists (0); external effects are described only in marketing terms (1).
Evidence: the README workflow is well ordered with index-first command conventions. Deductions: package. self-describes as a 'DeepSeek Harness skill bundle' (dsh/cordis.patch.yml), contradicting the README's Claude Code/Cursor skill framing — a self-consistency defect (1); all core function depends on a remote CLI and cloud service whose availability cannot be verified from these files (1); no failure/error paths are described at all (1).
Evidence: five core scenarios, a defined audience (developers, indie hackers, designers), and clear do/don't rules for replica HTML and design-system.md (capability_boundaries 2, audience 2). Invocation via /superdesign is precise (2), and the README distinguishes Claude Code plugin install from npx and warns against double-install (environment_fit 2). Not full marks: the '70+ agents' claim is an external assertion, not shown here.
Evidence: LICENSE is a complete MIT text (3); install notes are detailed, including the Claude Code plugin path and double-install warning (2); document structure is clear (2). Deductions: package name 'superdesign-dsh' conflicts with repo name 'superdesign-skill' (1); no CHANGELOG, only version 0.6.0 (1); no known-limitations section (1); command examples only, no FAQ (1); maintainer is the unverified 'Superdesign dev, Inc.' with updates tied to a closed-source cloud product (1).
Evidence: outputs are concretely defined (HTML drafts, design-system.md, presentation outlines) with agent-optimized output conventions (output_usability 2). Deductions: the core value proposition ('stop shipping AI-slop UI', real design judgment) is pure marketing assertion not verifiable statically, and differentiation from style-preset skills is asserted not shown (marginal_value 1); cloud pricing, quotas, and data retention are unknown, so cost/benefit cannot be assessed (1).
Evidence: commands, paths, and file conventions are directly checkable post-install; but '70+ supported agents', the demo video, and the vercel-labs/skills relationship are external-link assertions with no corroborating files provided (claim_traceability 1); README, package., and LICENSE lack mutual corroboration — indeed the package name conflicts with the repo name (cross_source_corroboration 1); marketing language ('AI slop', 'infinite canvas') is mixed with factual claims without separation (1).
- The skill instructs the agent to read the codebase and upload replica HTML/design context to the superdesign.dev cloud; no data-flow boundaries or sensitive-data handling are documented — assess code-exfiltration risk before use.
- package. self-describes as a 'DeepSeek Harness skill bundle', inconsistent with the README's Claude Code/Cursor skill framing; package name 'superdesign-dsh' also conflicts with the repo name — verify what actually installs.
- Core function depends on a globally installed npm CLI and closed-source cloud service from an unverified publisher, with no pricing/quota/data-retention information and no rollback or uninstall guidance.
- All capability claims (70+ agents, differentiated design quality) are marketing assertions unverifiable statically; pilot on a non-sensitive project first.
What does this agent do, and when should you use it?
Superdesign (repo: superdesigndev/superdesign-skill) is a design skill for coding agents, powered by superdesign.dev, an AI product design agent. It targets a specific failure mode of AI coding: agents write good code but ship generic interfaces with default layouts and stock shadcn components. Once installed, your agent can find real design direction and generate and iterate high-quality UI, presentations, and graphics on an infinite canvas without leaving the terminal. Unlike style-preset skills that merely swap themes, it designs into your existing design system: it reads your code for context, gathers real style references, and produces branchable drafts you refine. It also provides cross-session continuity — after the first real-codebase design, it remembers the project, draft, extracted components, and budgeted source-context bundle so later iterations resume without re-discovering the codebase. The archived superdesign VS Code extension is an older, separate project; this skill and the superdesign.dev web app are the maintained product. Licensed under MIT.
The skill drives the superdesign CLI and covers five core scenarios: (1) design or improve UI (feature/page/flow); (2) create presentations from an editable approved outline; (3) create graphics (posters, covers, social posts, ads); (4) set or extract a design system; (5) generate supporting images or video. The canonical flow: the agent investigates the existing UI and workflow, writes the design system to .superdesign/design-system.md (running the Design System Setup SOP first if missing); creates a pixel-perfect replica of the current UI in .superdesign/replica_html_template/<name>.html (replicating only what exists — no designing); creates a project with superdesign create-project --title "X" --template <replica.html> to seed a baseline draft (returns a draftId); then explores directions with superdesign iterate-design-draft --draft-id <draftId> -p "..." --mode branch --context-file .superdesign/design-system.md. Inspiration tooling includes superdesign search-prompts and get-prompts (query the prompt library) and superdesign extract-website --url <url> --design-md (extract a style guide, tokens, brand assets from any URL). Multi-page journeys run via superdesign execute-flow-pages; designs export via superdesign get-design --draft-id <id> --output ./design.html; presentations are created from an approved slides. outline with superdesign create-presentation. Command output is agent-optimized (compact TOON plus help[] hints) with --/--full flags when needed.
- An indie hacker building with Claude Code who wants a settings page redesigned without ending up with the default AI-slop shadcn look
- A frontend engineer who needs to bootstrap a design system from an existing codebase, using extract-website to gather style references before writing design-system.md
- A product/UI designer who wants to iterate on dashboard designs inside their terminal workflow, using branch mode to explore dark theme, minimal, and bold directions at once
- A team preparing a product-launch deck that approves a slide outline in chat and generates it with create-presentation
- Marketing or ops staff who need posters, covers, social posts, or ad graphics generated on demand
- Designing a multi-page user journey (e.g., signup to payment flow) executed in batch via execute-flow-pages
What are this agent's strengths and limitations?
- Real differentiator: it reads your code for context and designs into your existing design system, unlike style-preset skills that just swap a theme or component library
- Cross-session continuity: after the first real-codebase design it remembers the project, draft, extracted components, and budgeted source-context bundle, so unchanged iterations resume without repeating codebase discovery
- Broad agent support via npx skills (Claude Code, Cursor, Codex, 70+), not locked to one editor; in Claude Code it can run as a namespaced plugin updated with /plugin update
- Wide capability surface: UI design, presentations, graphics (posters/ads), design-system extraction, image/video generation, plus a searchable prompt library and URL-based design-DNA extraction
- Disciplined process: mandated design-system file location (.superdesign/design-system.md), replica templates must contain only current UI (no sketching placeholders), and branch mode keeps prompts directional with the design agent filling in details
- Hard dependency on the superdesign.dev cloud service and @superdesign/cli account login — core design generation does not run locally, raising availability and data-sharing considerations
- It will not function without a superdesign.dev account and CLI login; pricing is not stated in the source, which is an adoption cost to verify
- Designing on top of an existing app requires manually producing a pixel-perfect HTML replica (replica_html_template) under strict rules (no designing, no placeholders), which adds upfront work
- The old open-source VS Code extension (superdesigndev/superdesign) is archived and a separate project — users migrating from it must switch to the new skill/web app
- Auto-exploration mode (--count) is discouraged by default, and prompts must not specify colors or styles — a constraint for designers who prefer precise control
How do you install or deploy this agent?
1) Install the skill (works with 70+ supported coding agents):
npx skills add superdesigndev/superdesign-skillOr install as a Claude Code plugin (namespaced, updatable via /plugin update):
/plugin marketplace add superdesigndev/superdesign-skill
/plugin install superdesign@superdesignNote: in Claude Code, do not also run npx skills add — it installs a second unnamespaced copy.
2) Install and log into the CLI the skill drives:
npm install -g @superdesign/cli@latest
superdesign loginRequirements: Node.js/npm runtime, network access, and a superdesign.dev account for login.
How do you use this agent?
Talk to your agent in any supported coding agent. Claude Code plugin invocation: /superdesign:superdesign <request>. Examples: "superdesign set up a design system from my current codebase", "superdesign improve the design of my dashboard", "superdesign create an 8-slide presentation about our product launch". The skill follows a fixed SOP: investigate existing UI → ensure .superdesign/design-system.md exists → gather requirements and taste via the session's user-input mechanism (or chat) → ask whether to design in superdesign or implement UI directly → if superdesign, build the pixel-perfect replica, create a project, and branch design drafts. Key commands: superdesign search-prompts / get-prompts / extract-website (inspiration), create-project / iterate-design-draft --mode branch|replace / execute-flow-pages / get-design (canvas), create-presentation (decks). Prompt variants passed to branch mode should be directional only (e.g., "dark theme", "minimal") — let the design agent fill in details.
How does this agent compare with similar options?
The README explicitly contrasts Superdesign with style-preset skills, which only swap in a theme or component library; Superdesign instead reads your code for context, gathers real style references, and designs into your existing design system. It is also distinct from the archived superdesigndev/superdesign VS Code extension, which is an older, separate project.