Superdesign Design Skill
Gives coding agents real design judgment so the UI they ship looks considered, not AI-slop — producing shippable frontend, presentations, and graphics.
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.
- 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.
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
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 do you install this skill?
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.
How do you use this skill?
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.
How does this skill compare with similar options?
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.