An interface design skill for AI agents that explores distinct design directions, compares them side by side, and refines them against real screenshots.
2.9K+326 this week162PythonMITWell maintainedUpdated 3 days ago
superdesigndev/superdesign-skill
An agent skill that gives coding agents like Claude Code and Cursor design judgment to generate and iterate on UI, slide decks, and graphics.
Open-source alternative to:Figma
- Stars
- 953
- Forks
- 76
- Open issues
- 8
- Last commit
- 3 months ago
What is it?
Superdesign is an agent skill that adds design guidance to coding agents such as Claude Code, Cursor, and Codex. Without it, agents tend to produce generic interfaces with default component-library styling. The skill lets an agent read the existing codebase for context, gather style references from a prompt library or a website URL, and produce several branchable design drafts on an infinite canvas.
The workflow covers designing or improving pages and flows, building a design system file at .superdesign/design-system.md, creating presentations from an approved slide outline, and making posters or social graphics. Drafts can be replaced, branched into variations, or expanded into multi-page user journeys. Each step is driven by a companion CLI, @superdesign/cli, which is installed separately and requires login.
The skill installs with npx skills add for 70+ agents, or as a namespaced plugin in Claude Code. It is maintained alongside the superdesign.dev web app.
Key features
- 01Generates multiple branchable UI design drafts on an infinite canvas.
- 02Reads the existing codebase to keep designs consistent with current components.
- 03Sets up and stores a design system file for the project.
- 04Creates presentations from an approved ordered slide outline.
- 05Searches a prompt library and extracts design tokens from a website URL.
Use cases
- Redesigning a settings or dashboard page that looks like default AI-generated UI.
- Setting up a design system from an existing frontend codebase.
- Producing an 8-slide product launch deck from an approved outline.
- Creating posters, covers, or social graphics for a product.
Quick start
- 1
Install the skill for your coding agent
npx skills add superdesigndev/superdesign-skill - 2
Install the Superdesign CLI
npm install -g @superdesign/cli@latest - 3
Log in to Superdesign
superdesign login - 4
Ask your agent to design something, for example: /superdesign improve the design of my dashboard
Things to know
- Using the full workflow requires a superdesign.dev account and logging in via the CLI.
- The skill is designed for use with coding agents, so it needs one installed to be useful.
- The README does not state the cost or usage limits of the superdesign.dev service.
In collections
Topics
FAQ
- What is superdesign-skill?
- An agent skill that gives coding agents like Claude Code and Cursor design judgment to generate and iterate on UI, slide decks, and graphics. Superdesign is an agent skill that adds design guidance to coding agents such as Claude Code, Cursor, and Codex. Without it, agents tend to produce generic interfaces with default component-library styling. The skill lets an agent read the existing codebase for context, gather style references from a prompt library or a website URL, and produce several branchable design drafts on an infinite canvas.
- Is superdesign-skill free to use? What license does it have?
- superdesign-skill is open source under the MIT license. Check the license terms before using it in commercial products.
- Is superdesign-skill still maintained?
- Updated within 6 months. The last commit to superdesign-skill was on Aug 21, 2026.
- What can I use superdesign-skill for?
- Redesigning a settings or dashboard page that looks like default AI-generated UI. Setting up a design system from an existing frontend codebase. Producing an 8-slide product launch deck from an approved outline. Creating posters, covers, or social graphics for a product.
- How do I install superdesign-skill?
- Install the skill for your coding agent: npx skills add superdesigndev/superdesign-skill Install the Superdesign CLI: npm install -g @superdesign/cli@latest Log in to Superdesign: superdesign login Ask your agent to design something, for example: /superdesign improve the design of my dashboard
- Where can I get superdesign-skill?
- The source code and installation instructions are on GitHub: https://github.com/superdesigndev/superdesign-skill
Summary generated by AI from the project's README. GitHub stats refresh daily.
Related projects
An Agent Skill that runs Claude Design locally in Cursor, Claude Code or similar agents to produce self-contained HTML mockups, prototypes and decks.
6.2K+720 this week481JavaScriptMITWell maintainedUpdated 2 days ago
A set of 24 open-source agent skills that steer Claude Code, Codex, Cursor and opencode toward less generic, more deliberately designed UI output.
217+8 this week13JavaScriptMITUpdated 3 months ago
Agent Skills that make coding agents design distinctive frontends, using art direction, real photos and a browser self-check instead of generic AI landing pages.
111.2K+4.9K this week7.5KJavaScriptMITWell maintainedUpdated 3 days ago
An agent skill and CLI that teach AI coding agents to produce polished, production-quality UI instead of generic AI-looking interfaces.
43523GoMITUpdated yesterday
An agent skill that extracts visual design identity from reference UIs into structured Design DNA JSON, then generates matching UI from it.
2.1K+31 this week114JavaScriptMITUpdated 2 months ago