Superdesign provides an infinite canvas for designing frontend interfaces, multi-page flows, and marketing graphics. It allows designers and engineers to iterate on visual variants using multiple AI models to refine UI layouts or establish design systems.
The skill bridges the gap between initial AI concepts and production-ready code, enabling the creation of reusable components and structured presentations while supporting the generation of accompanying image and video assets.
Follow the documented setup, then try a first task.
Installs: Namespaced Superdesign plugin for Claude Code; do not install a second unnamespaced copy with npx skills. · Claude Code
First check whether the Superdesign skill or plugin is already loaded in this session. If superdesign or superdesign:superdesign is already available, skip installation and continue with CLI verification and authentication.
If it is not already loaded, enter these two user-typed /plugin commands in the Claude Code agent session, not in the terminal.
/plugin marketplace add superdesigndev/superdesign-skill /plugin install superdesign@superdesign
In a terminal, verify whether the Superdesign CLI is installed.
superdesign --version
In a terminal, run this only if CLI verification reports that it is missing.
npm install -g @superdesign/cli@latest
In a terminal, authenticate the CLI. A browser opens; complete authentication there and wait for success.
superdesign login
Installs: The complete superdesigndev/superdesign-skill bundle installed into the DSH profile that will be booted. · DeepSeek Harness (`dsh`)
First check whether the Superdesign skill or plugin is already loaded in this session. If superdesign or superdesign:superdesign is already available, skip installation and continue with CLI verification and authentication.
If it is not already loaded, run this in a terminal, replacing <your-profile> with the name of the DSH profile you boot. Keep the documented placeholder verbatim in the command template.
dsh plugin --profile <your-profile> add github:superdesigndev/superdesign-skill
Restart dsh after installing the bundle. Do not also run npx skills add because the bundle already publishes this skill.
In a terminal, verify whether the Superdesign CLI is installed.
superdesign --version
In a terminal, run this only if CLI verification reports that it is missing.
npm install -g @superdesign/cli@latest
In a terminal, authenticate the CLI. A browser opens; complete authentication there and wait for success.
superdesign login
Installs: Persistent global installation of the Superdesign skill for one target agent. · cursor, codex, opencode, cline, windsurf, gemini-cli, github-copilot, zed, aider, continue, amp, warp, kilo, goose, crush, droid, junie, trae, qoder, devin, augment, roo
First check whether the Superdesign skill or plugin is already loaded in this session. If superdesign or superdesign:superdesign is already available, skip installation and continue with CLI verification and authentication.
If it is not already loaded, run this in a terminal, replacing <your-agent-slug> with your own agent's slug. Keep the documented placeholder verbatim in the command template. The flags make the installation persistent, select the target agent, and skip prompts.
npx skills add superdesigndev/superdesign-skill -g -a <your-agent-slug> -y
In a terminal, verify whether the Superdesign CLI is installed.
superdesign --version
In a terminal, run this only if CLI verification reports that it is missing.
npm install -g @superdesign/cli@latest
In a terminal, authenticate the CLI. A browser opens; complete authentication there and wait for success.
superdesign login
Installs: The entire skills/superdesign/ directory copied as one Superdesign skill into the selected agent's skills directory. · Claude Code, Cursor, Codex, Cline, Gemini CLI, GitHub Copilot, Zed, Warp, DeepSeek Harness
Run from: Downloaded or cloned superdesigndev/superdesign-skill repository
First check whether the Superdesign skill or plugin is already loaded in this session. If superdesign or superdesign:superdesign is already available, skip installation and continue with CLI verification and authentication.
If it is not already loaded and npx skills is unavailable or fails, download or clone the repository, then copy the entire skills/superdesign/ directory into a superdesign/ folder inside the agent's skills directory. Preserve SKILL.md, references/, and the compatibility forwarder files. Documented typical destinations are ~/.claude/skills/superdesign/ for Claude Code and .agents/skills/superdesign/ for Cursor, Codex, Cline, Gemini CLI, GitHub Copilot, Zed, Warp, and DeepSeek Harness; otherwise use the agent's documented skills path.
In a terminal, verify whether the Superdesign CLI is installed.
superdesign --version
In a terminal, run this only if CLI verification reports that it is missing.
npm install -g @superdesign/cli@latest
In a terminal, authenticate the CLI. A browser opens; complete authentication there and wait for success.
superdesign login
Uses superdesign
Use the superdesign skill to set up a design system from my current codebase.
Uses superdesign
Use the superdesign skill to help me redesign this settings page so it doesn't look like default AI slop.
Uses superdesign
Use the superdesign skill to create a polished launch graphic for this product to share on X (Twitter). Produce the design for review, but do not publish or send it.
Claude
Codex
Cursor
Gemini CLI
Copilot
Windsurf
Amp
OpenCode
Devin
Goose
DeepSeek
Cline