What does this skill do, and when should you use it?
Superdesign is a design skill for coding agents (Claude Code, Cursor, Codex, and 70+ others) that drives the AI product design agent at superdesign.dev through a CLI. It generates and iterates UI drafts, slide decks, and graphics on an infinite canvas, with multiple leading models available for side-by-side comparison. Unlike style-preset skills that just swap a theme, it reads your codebase to build design context and designs into your existing design system. It also remembers projects across sessions, so later iterations resume without re-analyzing the code.
The skill runs entirely through its CLI (npx --yes @superdesign/cli@latest): it preflights and logs in (superdesign login), then routes by scenario — with a real frontend codebase it runs repo init first, writing six context files (components, layouts, routes, theme, page dependency trees, extractable components) to .superdesign/init/; with no codebase, or for standalone tasks like posters and presentations, it gathers the design brief conversationally instead. It then creates projects via the CLI, seeds a baseline draft from a pixel-perfect HTML replica of your current UI, generates and iterates drafts with create-design-draft / iterate-design-draft (replace or branch modes), builds multi-page journeys with execute-flow-pages, decks with create-presentation, extracts a site's design DNA from any URL into design-system.md with extract-website, and searches a prompt library with search-prompts for inspiration. Every command returns a canvas URL and preview link; some scenarios can also generate supporting image/video assets.
- An indie developer using Claude Code to redesign a settings page or dashboard so it doesn't look like default shadcn output
- An engineer on an existing frontend codebase who wants the agent to analyze the code, set up a design-system.md, then design new feature pages on top
- A team extracting design language (colors, type, tokens) from a competitor or reference URL into a reusable design system file
- A creator producing an editable PPTX product-launch deck or marketing graphics like posters, covers, and social posts
- Anyone comparing draft directions from multiple top design models side-by-side before committing to one
- A user continuing the same project across sessions who wants warm resume without repeating codebase discovery
How do you install this skill?
- The skill uploads user code context and design data to the overseas third-party cloud superdesign.dev with no disclosed retention policy; mainland-China reachability is uncertain — test before production use.
- The CLI is pulled unpinned via npx @latest, making the supply chain unauditable; review the CLI source or pin a version.
- Image/video generation spends credits; the cost only appears as a quote before generation — confirm each quote.
- This static review executed nothing; all workflow effectiveness claims are self-described and independently unreproduced.
- Publisher is unverified by FollowSkills; maintenance responsibility and update path are unclear.
- Shell / CLI
- Network access
- Local filesystem
Node.js / npx@superdesign/cliSuperdesign account (superdesign login)
For any coding agent: run npx skills add superdesigndev/superdesign-skill. For Claude Code, optionally install as a plugin to keep it namespaced: /plugin marketplace add superdesigndev/superdesign-skill then /plugin install superdesign@superdesign (don't also run npx skills add there). Either way, also install the CLI it drives: npm install -g @superdesign/cli@latest, then run superdesign login to authenticate. Skill path: skills/superdesign/SKILL.md.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/superdesigndev/superdesign-skill.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/superdesign" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- /superdesign help me redesign this settings page
- /superdesign set up a design system from my current codebase
- /superdesign create an 8-slide product launch presentation
After installing, just talk to your agent, e.g.: "/superdesign help me redesign this settings page", "/superdesign set up a design system from my current codebase", or "/superdesign create an 8-slide product launch presentation". The agent preflights the CLI to confirm auth, decides whether your workspace has a frontend codebase (init vs. brief path), and generates drafts on the canvas. Each project/draft command returns a canvas URL (append ?live=1 to watch drafts generate live) and a preview link where you can leave feedback for iteration. Note that every generation spends credits — the agent asks you to confirm a direction before generating.
What are this skill's strengths and limitations?
- More than a theme swap: reads real codebase context and designs into your existing design system rather than defaulting to a component library
- Multi-model comparison plus replace/branch iteration modes make exploring directions easy
- Cross-session continuity: .superdesign/resume. stores project, draft, and context bundle for warm resume
- Broad scenario coverage: UI, multi-page flows, presentations (exportable PPTX when supported), graphics, and image/video assets
- MIT licensed, works with 70+ coding agents, and also available as the superdesign.dev web app
- Entirely dependent on its closed-source CLI and the superdesign.dev cloud service; requires account login and generations spend paid credits
- Unusable in environments with no shell execution (e.g. standard chat without a Work tab)
- Documentation doesn't detail edge environments (native Windows, CI headless browsers beyond a --no-open flag)
- No test suite shown in the repo; README warns the archived open-source VS Code extension of the same name is a separate, older project — easy to confuse
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Superdesign Design Skill this page | 53 · Use with care | ★ 840 | 2mo ago | MIT |
| Industrial Brutalist UI Skill | 48 · Use with care | ★ 96k | 11d ago | MIT |
| Image-to-Code Skill | 48 · Use with care | ★ 96k | 11d ago | MIT |
| Minimalist Editorial UI Skill | 47 · Use with care | ★ 96k | 11d ago | MIT |
| SwiftUI Design Skill | 57 · Use with care | ★ 209 | 5mo ago | MIT |
The README explicitly contrasts Superdesign with style-preset skills, which merely swap in a theme or component library; Superdesign instead reads your code for context and produces branchable drafts designed into your existing system. It also supersedes its own archived open-source VS Code extension, superdesigndev/superdesign.
How did FollowSkills review this skill?
Documentation discloses key risks well: generation requires a free quote and verbatim credit confirmation (confirm-generation --credits must match), bulk repo upload is forbidden, local paths must not enter draft HTML, and asset roles (reference/brand/content) are clearly separated. However, the skill sends user code context (full component source) to a third-party cloud (superdesign.dev) with no data-retention disclosure; the CLI is pulled unpinned via npx @latest, making the supply chain unauditable; no rollback/deletion mechanism is described. Deducted for incomplete data-flow transparency, unpinned dependencies, and missing recovery path.
Static reading shows good internal consistency: a deterministic init-completion test, a cheap deterministic Step 1 check, explicit failure rules (retry at most once, stop on login failure, design-with-your-model fallback), and an idempotent confirm-generation recovery rule. But every key path depends on a remote CLI and cloud service; there are no tests, no example outputs, and no verification of abnormal-input behavior. Static cap of 10 applies; deducted for no test coverage and unverified failure-feedback quality.
Trigger semantics are thorough: the description covers UI/presentation/graphic/asset scenarios, init-exemption rules per scenario are explicit, and non-fit boundaries (stop if no shell) are clear. But core function depends entirely on an npx-fetched CLI and the overseas superdesign.dev cloud (login, canvas, generation), with no statement on mainland-China reachability; no Chinese-language support noted. Deducted for undisclosed environment-reachability risk for the target audience.
Information architecture is well layered (SKILL.md main flow plus scenario-scoped references for progressive disclosure), MIT license is clear, README distinguishes the legacy VS Code extension, and deprecated forwarder files have a removal plan. But the skill itself has no version number or changelog (package. 0.6.0 targets a different bundle format), no known-limitations section, and maintenance/update paths rest on an unverified publisher. Deducted for missing version governance and opaque maintenance path.
The workflow design is complete (brief confirmation, outline approval, branch iteration, fallback path) with plausible marginal-value arguments (codebase context, cross-model comparison, cross-session resume). But static review cannot verify outputs are directly usable; the README's claims rest on a single YouTube demo; generation spends credits with unquantified cost/benefit. Static cap of 7 applies; deducted for no representative-output evidence and incomplete cost disclosure.
No executable tests, no CI evidence, and no third-party reproduction exist in the repo; only marketing README, a demo video link, and self-described workflows. Install commands and CLI flags are said to be verifiable via --help, but nothing was executed here. Deducted for core value claims being almost entirely author assertions lacking auditable primary material.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →