Superdesign Skill for Claude Code: Design UI, Slides and Graphics

Lets your coding agent design and iterate UI, slide decks and graphics on the Superdesign canvas, using your codebase and design system as context.

Installs: 11.5K; on skills.sh
Stars: 930; on GitHub
Files: 12; besides SKILL.md
Updated: Aug 2026; last repo commit

The superdesign skill drives the Superdesign CLI. It analyzes your frontend code, writes a design system file, then generates and iterates design drafts on a shared canvas. It can also build presentations from an approved slide outline, make posters and marketing graphics, and generate supporting images or video.

It needs a shell, a Superdesign account and the CLI, which it runs with npx --yes @superdesign/cli@latest. Your code context and chosen files are sent to Superdesign to generate drafts. Image and video generation quote a price in credits first and run only after you confirm it.

Good for

Developers who want better-looking UI from their coding agent
Founders and designers making slide decks, posters and social graphics from the terminal
Teams that want a design system extracted from a codebase or a live website

Install superdesign

Claude Code

Copy this prompt.

Install the superdesign skill in Claude Code. Run this command:

/plugin marketplace add superdesigndev/superdesign-skill
/plugin install superdesign@superdesign

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

The plugin adds the skill under the name /superdesign:superdesign, and the plugin manifest lists no hooks, agents or MCP servers. The README says not to also run the skills CLI in Claude Code, which would install a second copy. Either way, install the CLI it drives.

From the project README. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

When a command fails
Command examples
Browser Choice

Key facts

Author: Superdesign dev, Inc. (named in the plugin manifest)
Repo: superdesigndev/superdesign-skill, folder skills/superdesign
Installs on skills.sh: 11,545 as of 2026-11-02
GitHub stars: 930 for the whole superdesigndev/superdesign-skill repo, 2026-11-02
License: MIT
Last repo commit: 2026-08-21
What is inside: 13 files including SKILL.md: 9 reference guides, 2 compatibility forwarder files, agents/openai.yaml
Needs: Shell access, a Superdesign account (superdesign login) and Node.js to run npx @superdesign/cli
Not the same as: The archived superdesigndev/superdesign VS Code extension, which the README calls a separate older project

What it includes

Runs the bare Superdesign CLI to check that it works and whether you are signed in.
If you are not signed in, it runs the login command first. If the session has no shell, the skill stops and tells you.
Runs code · Environment preflight
Analyzes your codebase and writes six context files to .superdesign/init/.
The files are components, layouts, routes, theme, pages and extractable components. Graphics, presentations and standalone assets skip it.
Write · Repo init
Creates projects and design drafts, then replaces or branches them.
Replace refines the chosen direction with version history, and branch creates alternatives to compare. The canvas link opens in your browser.
Runs code · Design and iterate UI
Lists design models and lets you explore directions with different ones.
Uses the list-models command.
Runs code · Compare models
Creates or extracts a design system and reusable components.
The design system lives in .superdesign/design-system.md.
Write · Design systems and components
Extracts a live site's design language with extract-website.
It can take 60 to 120 seconds and retries once.
Runs code · Design from a website
Plans an editable outline, waits for your approval, then generates the deck.
It can also reconstruct an editable PPTX when requested and supported.
Runs code · Presentations
Makes posters, covers, social posts, thumbnails, flyers and ads.
The agent produces the key visual and uploads it, and Superdesign composes the graphic as HTML on a fixed canvas.
Runs code · Graphics
Generates assets with a quote, then a confirmation command.
The agent shows the model, settings, quoted credits and your balance, and runs confirm-generation only after you confirm that price.
Runs code · Image and video generation
Reuses saved project and draft details from .superdesign/resume.json.
A new session may need fresh approval before local files are sent to Superdesign again.
Write · Resume

From the official docs

Permissions

Medium risk

The skill runs the Superdesign CLI through npx, sends selected code and images to Superdesign, and can spend credits on image or video generation. Check the upload list before you approve it, and confirm quotes carefully.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Your code context goes to Superdesign
Context files, replica HTML and selected assets are sent to generate drafts. Check the file list it shows before you approve an upload, and avoid secrets or private data in those files. github.com
Generation spends credits
Image and video generation print a quote first, and the skill runs confirm-generation only after you confirm the exact price. Check the credits and balance it shows. github.com
It runs the CLI from npm with --yes
Every command uses npx --yes @superdesign/cli@latest, which installs and runs the latest published version without asking. Install on a machine you trust. github.com
Website extraction fetches outside content
extract-website and public image URLs pull content from sites you name. The skill says to send no cookies or credentials with those downloads. github.com
The Claude Code plugin adds only the skill
The plugin manifest lists no hooks, agents or MCP servers. Do not run the skills CLI as well, because that installs a second copy. github.com

Technical details

Turning on read-only	No switch. It writes a .superdesign folder and creates projects and drafts on your Superdesign account.
Talks to	Superdesign servers, through the CLI. superdesign.dev canvas and preview links. Public website URLs you ask it to extract or reference
Sign-in and keys	You sign in with the superdesign login command. SKILL.md does not say where the session is stored.
Scopes	Runs npx --yes @superdesign/cli@latest and, per the README, a global npm install of the CLI Reads your frontend code and writes .superdesign/ files in your project Uploads context files, replica HTML and assets to Superdesign Opens the canvas in your browser

Questions

What does the superdesign skill do?

It lets your coding agent design UI, slide decks and graphics on the Superdesign canvas. It reads your codebase for context, writes a design system file, and generates drafts you can branch and refine.

How do I install it?

Use the install box at the top of this page. In Claude Code the README prefers the plugin, and says not to also run the skills CLI. Either way, install the Superdesign CLI and sign in with superdesign login.

Does it cost money?

Image and video generation use Superdesign credits. The skill shows a quote and your balance and runs the confirm command only after you agree to that price. SKILL.md also says every generation spends credits. This page does not list Superdesign's plans.

Does it send my code to Superdesign?

Yes, the files it selects. Superdesign generates drafts from context files, replica HTML and uploads. The resume guide says to show the full list of repo files and their count before an approved upload.

Does it need a Superdesign account?

Yes. The preflight checks whether you are authenticated and runs the login command if you are not. If login fails, for example with no browser, the skill tells you and stops.

How is it different from a style-preset skill?

The README says style-preset skills swap in a theme or component library, while Superdesign designs into your existing design system by reading your code. That is the vendor's description.

Is it safe to use?

It runs npm packages through npx, writes a .superdesign folder, opens a browser and uploads files you select to Superdesign. Review the file list it shows before you approve an upload.

Information

updated Nov 2, 2026

Repository: superdesigndev/superdesign-skill
Folder: skills/superdesign

superdesigndev/superdesign-skill skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 6