What is the superdesign skill?
The superdesign skill connects an AI coding agent to the Superdesign canvas through the Superdesign CLI. It designs UI, presentations and graphics, can pull a design system from a live website URL, lets you compare AI models and keeps resumable state in a .superdesign folder. It needs shell access and a Superdesign login.
This skill drives Superdesign, a design canvas, from your agent's terminal. It is a separate project from the older superdesigndev/superdesign IDE extension. It needs shell access, the Superdesign CLI and a Superdesign login before it can do anything.
The scenarios in SKILL.md
- Codebase analysis with
superdesign init. - Designing, reproducing or improving UI.
- Choosing and comparing AI models with
list-models. - Design systems and components.
- Designing from a live website URL.
- Presentations: plan an editable outline, approve it in chat, then generate a draft.
- Graphics such as posters, covers, social posts, thumbnails, flyers and ads.
- Supporting image or video assets.
- Continuing earlier work through a resume file.
What init leaves behind
For a real codebase, the first step writes analysis files into .superdesign/init/. The step counts as complete only when six files exist and are not empty: components.md, layouts.md, routes.md, theme.md, pages.md and extractable-components.md.
Who the superdesign skill is for
Best for
- Designers and developers who want several AI-generated design drafts to compare before any code.
- Starting from an existing codebase, so drafts reuse its components and theme.
- Presentations and graphics that share a canvas with product design.
Not for
- Offline work. A Superdesign account and login are required.
- Agents with no shell access, since the skill runs through the CLI.
- A plain markdown design spec. For that, see design-md, or frontend-design for building.
Use it with UiChemy
Superdesign produces designs and code, not WordPress pages. To get a result into WordPress, use UiChemy AI to WordPress to import an AI build, or build in Figma and convert with Figma to WordPress. Click Get Started on uichemy.com. Compare stitch-generate-design.
How to install Superdesign Skill: Design on an Infinite Canvas
/plugin marketplace add superdesigndev/superdesign-skillAdd the marketplace
In Claude Code, run
/plugin marketplace add superdesigndev/superdesign-skill, then/plugin install superdesign@superdesign.Invoke it
The README says to call it as
/superdesign:superdesign. It also warns against installing the skill a second way in the same agent.Other agents
For any other supported agent, use the README's universal route: the skills CLI's add command pointed at the superdesigndev/superdesign-skill repository. Do not also use it in Claude Code, since that installs a second copy.
Install the CLI
The CLI is installed with
npm install -g @superdesign/cli@latest. The skill's preflight check can also run it throughnpx --yes @superdesign/cli@latest.Log in
Run
superdesign loginif the agent is not authenticated. A Superdesign account is required.
Check that it loaded
Ask the agent to design a landing page. It should run the CLI preflight, check you are logged in, and start with codebase analysis if the folder holds a project.
Key features
- Codebase analysis
superdesign initwrites components.md, layouts.md, routes.md, theme.md, pages.md and extractable-components.md into .superdesign/init/. - Design drafts
create-design-draftmakes a draft, anditerate-design-draftrefines it with a replace or branch mode, prompts and a context file. - Model choice
list-modelsshows the available AI models, and the skill has a reference on designing with your own model. - Live website extraction
extract-websitecan pull a design file, brand, tokens, content structure or a clone from a live URL with flags such as --design-md and --tokens. - Design system fileThe design system is kept at .superdesign/design-system.md, so later drafts follow the same rules.
- PresentationsThe agent plans an editable outline, you approve it in chat, and it then generates a draft with
create-presentation. - GraphicsPosters, covers, social posts, thumbnails, flyers and ads are handled as their own scenario.
- Asset generationSupporting image or video assets can be generated for a design, with a dedicated reference file.
- Resumable workState is saved in .superdesign/resume.json, and a RESUME.md reference tells the agent how to continue earlier work.
- Prompt library
search-promptsandget-promptsretrieve prompts, andget-designandfetch-design-nodesread designs back from the canvas.
Frequently asked questions
What is the superdesign skill?
It is a skill from superdesigndev that lets an AI coding agent design UI, presentations and graphics on the Superdesign canvas through the Superdesign CLI. It is separate from the older superdesign IDE extension, and it needs shell access and a Superdesign login.
How do I install the superdesign skill?
Run /plugin marketplace add superdesigndev/superdesign-skill and then /plugin install superdesign@superdesign. Install the CLI with npm install -g @superdesign/cli@latest and run superdesign login. The README then has you invoke it as /superdesign:superdesign.
Does the superdesign skill need an account?
Yes. The skill's preflight runs the Superdesign CLI and asks for a login if the agent is not authenticated. Without an account, the canvas, model comparison and draft commands do not work, so create one before you start.
What does superdesign init do?
For a real codebase, init analyses the project and writes files into .superdesign/init/. It is complete only when components.md, layouts.md, routes.md, theme.md, pages.md and extractable-components.md all exist and are non-empty. Graphics and presentations have exceptions.
Can it copy a design from a live website?
The extract-website command takes a URL and can produce a design file, brand details, tokens, content structure or a clone, using flags such as --design-md, --brand, --tokens, --content-structure and --clone. A WEBSITE.md reference documents the workflow.
Which AI agents does the superdesign skill work with?
The README says it works with Claude Code, Cursor, Codex and more than 70 other agents. Claude Code uses the plugin commands. Any other supported agent installs it through the README's universal route, the skills CLI add command for the superdesigndev/superdesign-skill repository, and you still need a shell for the CLI.
Can I pick which AI model designs?
Yes. The list-models command shows the available models, and the skill includes a reference called design-with-your-model.md. Comparing models is one of the nine scenarios in SKILL.md, so you can run the same brief through more than one.
What license does the superdesign skill use?
GitHub lists the repository license as MIT, the SKILL.md frontmatter says MIT too, and the README points to the LICENSE file in the repository, so that file holds the terms for the skill itself.