superdesigndev/superdesign-skill
Design skill for UI and marketing graphics on the Superdesign canvas: reads the repo for context, extracts its design system, then generates and iterates branchable design drafts, flow pages, and reusable components through the Superdesign CLI.
A design skill that gives coding agents real design judgment instead of generic output: it finds design direction, sets up design systems, approves presentation outlines and generates plus iterates UI, slide decks and graphics on an infinite canvas from inside the agent. It handles five core scenarios — design or improve UI (feature/page/flow), create a presentation from an editable approved outline, create graphics (posters, covers, social posts, ads), set or extract a design system, and generate supporting images or video — using a prompt library it can search (superdesign search-prompts), per-slug prompt retrieval, website design-DNA extraction (superdesign extract-website --url … --design-md) and canvas design tools (create project, create/iterate draft, plan then execute flow pages, presentations, project brand assets).
Install
npx skills add superdesigndev/superdesign-skillREADME install, two ways in. For any of the 70+ agents supported by the skills CLI: npx skills add superdesigndev/superdesign-skill. In Claude Code, install it as a namespaced plugin instead — /plugin marketplace add superdesigndev/superdesign-skill then /plugin install superdesign@superdesign, invoked as /superdesign:superdesign — and do not also run npx skills add there, because that installs a second, unnamespaced copy of the same skill. Either way, install the CLI the skill drives: npm install -g @superdesign/cli@latest then superdesign login.
Compatibility
Any coding agent supported by the skills CLI (the README names Claude Code, Cursor, Codex and 70+ others); Node.js for npx; the @superdesign/cli package for the design/canvas tools. In Claude Code the plugin-marketplace form keeps the skill namespaced and updatable with /plugin update.
Details
- Repo: superdesigndev/superdesign-skill
- Category: Skills
- Stars: 0
- Version: Skills-CLI / Claude Code plugin marketplace install (README documents npx skills add and the Claude Code marketplace forms; no npm plugin release is claimed for this repository)
- Last push: 2026-08-21
- First seen: 2026-01-21
Recent updates
README notes cross-session continuity — after the first real-codebase design the skill remembers the project, draft, extracted components and budgeted source-context bundle so unchanged iterations resume without re-running codebase discovery — and clarifies that this is not the archived superdesigndev/superdesign VS Code extension, which is an older, separate project.
FAQ
- How do I install the Superdesign skill?
- For most agents run npx skills add superdesigndev/superdesign-skill; in Claude Code use /plugin marketplace add superdesigndev/superdesign-skill then /plugin install superdesign@superdesign. Install the CLI it drives with npm install -g @superdesign/cli@latest and run superdesign login.
- Is this the same as the old Superdesign VS Code extension?
- No — the README states the archived open-source superdesigndev/superdesign extension is an older, separate project; this skill and superdesign.dev are the current maintained product.
- Does it work with my existing design system?
- Yes — the README positions it against style-preset skills that just swap a theme or component library: Superdesign reads your code for context, gathers real style references and produces branchable drafts you refine, plus it can set up or extract a design system.