Superdesign
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
Why this level
- Runs a CLI in the shell and reads the project code for context
- Talks to the superdesign.dev service and requires a login
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/superdesignDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add superdesigndev/superdesign-skill --skill superdesign -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9f05cd
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/superdesigndev/superdesign-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/superdesign/
git -C "$tmp" checkout f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b
mkdir -p .claude/skills
cp -R "$tmp/skills/superdesign" .claude/skills/superdesignCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add superdesigndev/superdesign-skill --skill superdesign -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9f05cd
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/superdesigndev/superdesign-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/superdesign/
git -C "$tmp" checkout f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b
mkdir -p .agents/skills
cp -R "$tmp/skills/superdesign" .agents/skills/superdesignCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add superdesigndev/superdesign-skill --skill superdesign -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9f05cd
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/superdesigndev/superdesign-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/superdesign/
git -C "$tmp" checkout f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b
mkdir -p .github/skills
cp -R "$tmp/skills/superdesign" .github/skills/superdesignCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add superdesigndev/superdesign-skill --skill superdesign -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9f05cd
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/superdesigndev/superdesign-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/superdesign/
git -C "$tmp" checkout f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b
mkdir -p .agents/skills
cp -R "$tmp/skills/superdesign" .agents/skills/superdesignCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add superdesigndev/superdesign-skill --skill superdesign -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9f05cd
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/superdesigndev/superdesign-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/superdesign/
git -C "$tmp" checkout f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b
mkdir -p .agents/skills
cp -R "$tmp/skills/superdesign" .agents/skills/superdesignCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/superdesigndev/superdesign-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/superdesign/
git -C "$tmp" checkout f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b
mkdir -p .devin/skills
cp -R "$tmp/skills/superdesign" .devin/skills/superdesignCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add superdesigndev/superdesign-skill --skill superdesign -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9f05cd
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/superdesigndev/superdesign-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/superdesign/
git -C "$tmp" checkout f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b
mkdir -p .cline/skills
cp -R "$tmp/skills/superdesign" .cline/skills/superdesignCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add superdesigndev/superdesign-skill --skill superdesign -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9f05cd
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/superdesigndev/superdesign-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/superdesign/
git -C "$tmp" checkout f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b
mkdir -p .roo/skills
cp -R "$tmp/skills/superdesign" .roo/skills/superdesignCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add superdesigndev/superdesign-skill --skill superdesign -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit f9f05cd
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/superdesigndev/superdesign-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/superdesign/
git -C "$tmp" checkout f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b
mkdir -p .agents/skills
cp -R "$tmp/skills/superdesign" .agents/skills/superdesignCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/superdesigndev/superdesign-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/superdesign/
git -C "$tmp" checkout f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b
mkdir -p .agents/skills
cp -R "$tmp/skills/superdesign" .agents/skills/superdesignCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/superdesigndev/superdesign-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/superdesign/
git -C "$tmp" checkout f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b
mkdir -p .agents/skills
cp -R "$tmp/skills/superdesign" .agents/skills/superdesignCommands for macOS and Linux, on Windows run them in Git Bash.
Install the skill: npx skills add superdesigndev/superdesign-skill, install the CLI: npm install -g @superdesign/cli@latest and run superdesign login. In Claude Code you can instead install the plugin: /plugin marketplace add superdesigndev/superdesign-skill, then /plugin install superdesign@superdesign.
Other ways from the author
npx skills add superdesigndev/superdesign-skillUniversal skill install for many agents.
This is third-party code. Review the repository files before installing.
What it does
The skill gives the agent a design process: it reads the project code for context, gathers style references and produces UI drafts on an infinite canvas. Work runs through the superdesign CLI, which the agent calls to search the prompt library, extract a site's style and generate drafts. Beyond pages and flows it builds presentations from an approved slide outline and graphics like posters and covers. Drafts can be branched and refined, and across sessions the skill remembers the project and extracted components.
Who it is for. For developers and product designers who want polished UI without leaving their coding agent.
Good fit when
- The agent shipped generic UI and it needs a considered look
- You need a design system extracted from the current codebase
- You need a presentation or graphics from an approved plan rather than random slides
Not a fit when
- The session has no shell access, and the superdesign CLI runs only over the shell
- You only need code without a canvas design step
Example request
Help me redesign this settings page so it doesn't look templatedLimitations
The skill runs through the superdesign CLI, which needs shell command execution, installing @superdesign/cli and signing in with superdesign login. Some models and features belong to the superdesign.dev service. Without shell access the skill cannot run.
How to disable. Remove the superdesign plugin via /plugin or the skill folder, and optionally uninstall the global @superdesign/cli package.
Security check
- Runs a CLI in the shell and reads the project code for context
- Talks to the superdesign.dev service and requires a login
README in short
The README describes a skill that gives coding agents design judgment: the agent finds a style direction, sets up a design system, and generates and iterates UI, slides and graphics on a canvas. It reads the project code, gathers real references and makes branchable drafts. Unlike theme-swap skills, it designs inside your existing design system. It installs with one npx skills add command for many agents or as a Claude Code plugin, and needs the CLI installed and a login. MIT licensed.
SKILL.md
--- name: superdesign description: "Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models. Use whenever the user wants to design a page, feature, flow, slide deck, or brand-new product; improve or reproduce existing UI; compare design results across top models; explore visual variants; set or extract a design system; build reusable components or multi-page flows; create presentations; or create posters and marketing graphics, even if they never say the word 'design tool'. Also supports generating supporting image or video assets when a design needs them." --- Superdesign helps you find design inspiration and generate or iterate design drafts on an infinite canvas, with multiple leading models available for different design tasks and side-by-side exploration. When a design needs a new visual asset, it can also provide image and video generation. # Core scenarios (what this skill handles) 1. Analyze a codebase for design work 2. Design, reproduce, or improve UI 3. Choose and compare leading design models 4. Create design systems and reusable components 5. Design from a live website or reference URL 6. Create or export presentations 7. Create graphics 8. Generate supporting images or video 9. Continue or directly correct existing work
FAQ
Do I need an account?
Yes. The skill drives the superdesign CLI, which needs @superdesign/cli installed and superdesign login.
Is this the old VS Code extension?
No. The open-source superdesign VS Code extension is a separate, legacy project; this skill and superdesign.dev are the maintained ones.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys