Superdesign

Reviewed 2026-10-07codingPrompt / Rule# ui # design # mockup # design-system # canvas

Superdesign agent skill: lets a coding agent create UI, slide and graphic drafts on the superdesign.dev canvas through the @superdesign/cli command line tool.

Security Reviewed

Instructions only, but they drive a separate cloud CLI that logs in to superdesign.dev, uploads selected code and assets, and spends generation credits.

Install Superdesign in Google Antigravity

Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide

EasiestOption 1: paste this to your Antigravity agent

Install the "Superdesign" skill for Google Antigravity.
Follow the steps at https://www.antigravityskills.org/install/superdesign.md (source: https://github.com/superdesigndev/superdesign-skill/tree/main/skills/superdesign).
Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.

The agent reads the install file, shows you what it will download and waits for your OK.

Option 2: install it yourself

1. Clone the repository

git clone --depth 1 https://github.com/superdesigndev/superdesign-skill /tmp/superdesign-skill

Download the repo to a temporary folder.

2. Copy the skill folder into your workspace
```
mkdir -p .agents/skills && cp -r /tmp/superdesign-skill/skills/superdesign .agents/skills/superdesign
```
Run from your project root. INSTALL.md says to copy the entire skills/superdesign/ directory, including SKILL.md and references/.

3. Or install it globally

mkdir -p ~/.gemini/config/skills && cp -r /tmp/superdesign-skill/skills/superdesign ~/.gemini/config/skills/superdesign

Makes the skill available in every project.

4. Check that Antigravity sees it
Run /skills or ask "What skills do you have?" and look for superdesign. Then ask for a design task; the skill will run the CLI and ask you to log in at superdesign.dev.

The repo does not name Antigravity. INSTALL.md lists .agents/skills/superdesign/ as a skills directory for several agents (Cursor, Codex, Gemini CLI and others), which is the workspace path Antigravity reads. You also need Node/npx and a Superdesign account.

Using Claude Code, Cursor or Codex? See other assistants below.

What is Superdesign?

Superdesign is an AI product design agent from superdesign.dev. The repo superdesigndev/superdesign-skill packages it as a SKILL.md folder that teaches a coding agent how to find design direction, set up a design system, and generate and iterate UI drafts, slide decks and graphics on an online canvas. The skill itself only contains instructions: all generation runs on the Superdesign service through its CLI, which you log in to in a browser. The older open-source "superdesign" VS Code/Cursor extension is a separate, archived project.

How to use Superdesign?

Install the skill folder, make sure the agent can run shell commands, then ask for a design task. On first use the skill runs "npx --yes @superdesign/cli@latest", checks the auth line and asks you to run "superdesign login" in a browser if needed. For a real codebase it first writes repo notes to .superdesign/init/, then creates a project and design drafts and returns a canvas link.

Key features of Superdesign

✓Designs pages, features and flows on the superdesign.dev canvas, with replace (refine) and branch (compare variants) iteration modes
✓Repo init: writes six context files (components, layouts, routes, theme, pages, extractable-components) to .superdesign/init/
✓Design system setup and extraction of a site's style from a URL (extract-website)
✓Presentation workflow with an outline you approve in chat before generation
✓Posters, covers, social posts and ads, plus supporting image or video generation
✓Resume state in .superdesign/resume.json so later sessions reuse the saved project and draft

When to use Superdesign

1Redesigning a page of an existing app so it matches the codebase's design system
2Exploring several visual variants of a feature before implementing it
3Extracting a design system from a repo or a reference site into .superdesign/design-system.md
4Creating a slide deck or marketing graphic from a brief

Installation & Setup Guide

Agent Rules / Prompt Setup

Follow these steps (taken from the project's own docs) to configure Superdesign in your development environment.

Step 1: Any agent via npx skills (README)claude

npx skills add superdesigndev/superdesign-skill

Installs the skill for the agents supported by the skills CLI.

Step 2: Claude Code plugin (README)claude

/plugin marketplace add superdesigndev/superdesign-skill

Then run /plugin install superdesign@superdesign. Invoke it as /superdesign:superdesign.

Step 3: Install the CLI it drives (README)claude

npm install -g @superdesign/cli@latest

Then run superdesign login. The skill can also run the CLI on demand with npx.

Step 4: Cursor manual (INSTALL.md)cursor

INSTALL.md lists .agents/skills/superdesign/ as the skills directory for Cursor; the repo also ships .cursor-plugin/ manifests.

Usage Example & Verification

Prompt / Request Example

/superdesign help me redesign this settings page so it doesn't look like default AI slop

Security Review

Static review

Reviewed Date

2026-10-07

Audited Ref / Commit

f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b

Reviewer

antigravityskills.org (static code review)

Instructions only, but they drive a separate cloud CLI that logs in to superdesign.dev, uploads selected code and assets, and spends generation credits.

Full review: scope, findings, risks

Audit Scope:Cloned superdesigndev/superdesign-skill at commit f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b (2026-08-21) and superdesigndev/superdesign (the archived extension). Read README.md, INSTALL.md, CHANGELOG.md, LICENSE, package.json, dsh/index.js, the plugin manifests, skills/superdesign/SKILL.md and all files in references/, and grepped them for commands, URLs, credentials and file writes.

Key Findings:The skill folder has SKILL.md, 9 reference files, 2 deprecated forwarder files at the root, a SUPERDESIGN.md forwarder and agents/openai.yaml; no scripts. It instructs the agent to run npx --yes @superdesign/cli@latest (preflight, login, create-project, create-design-draft, iterate-design-draft, extract-website, upload-asset and others), to write .superdesign/init/*.md, .superdesign/design-system.md and .superdesign/resume.json, and to pass selected source files with --context-file. RESUME.md says to reject .env files, .git, credentials and private keys as context. dsh/index.js only registers the skill for DeepSeek Harness.

Identified Operational Risks & Permissions:Selected project source files and assets are sent to superdesign.dev; npx @superdesign/cli@latest pulls the newest published CLI each run (not reviewed here); generation spends credits; static review only.

We cloned superdesigndev/superdesign-skill at commit f9f05cd988c247dce6c072eaf9ac6b162f2ffc4b and read the skill statically. skills/superdesign contains markdown instructions and agents/openai.yaml, with no scripts. SKILL.md and references/SUPERDESIGN.md tell the agent to run "npx --yes @superdesign/cli@latest" for every command, including login, which opens a browser. The CLI is not in the repo, so its behaviour is unreviewed and "@latest" means the version can change between runs. references/SUPERDESIGN.md passes project files with --context-file and references/ASSET_GENERATION.md and GRAPHIC.md use upload-asset, so code and images are sent to superdesign.dev; references/RESUME.md says secret files (.env, .git, keys) must be rejected and that a new session may need fresh approval before local files are sent. The skill writes .superdesign/init/, .superdesign/design-system.md and .superdesign/resume.json in your project. We found no API keys or environment variables in the repo; auth is through superdesign login.

Operational Notes & Known Limitations

Known Limitations

•Needs the separate Superdesign CLI (@superdesign/cli, installed on demand through npx) and a superdesign.dev login; the CLI is not part of the repo
•Generation happens on the Superdesign service and spends your generation credits (SUPERDESIGN.md variant count rule); we did not check plans or prices
•The skill tells the agent to send selected source files (--context-file) and assets to Superdesign, so code leaves your machine
•Requires an agent that can run shell commands and a browser for login (SKILL.md Step 0)
•The repo does not mention Antigravity; Antigravity steps here are the standard SKILL.md folder placement

Frequently Asked Questions

Is the Superdesign skill safe?

The repo contains instructions only, no scripts that run on their own. But the instructions tell your agent to run "npx --yes @superdesign/cli@latest" (a package outside the repo that we did not review), log in at superdesign.dev and upload selected code and assets. Treat it as a cloud service connector.

How do I install Superdesign in Antigravity?

Clone superdesigndev/superdesign-skill and copy skills/superdesign into .agents/skills/ or ~/.gemini/config/skills/, then check with /skills. The repo documents npx skills, Claude Code and a manual copy, not Antigravity by name.

Is this the same as the Superdesign VS Code extension?

No. The README of superdesigndev/superdesign says that extension is the original 2025 version, no longer actively maintained, and points to superdesign.dev and this skill.

Is Superdesign free?

The skill is MIT-licensed, but generation runs on superdesign.dev and spends your generation credits. The repo does not state prices, so check superdesign.dev.

Does it need an account?

Yes. The skill runs "superdesign login", which opens a browser, before any design command.

Supported Platforms

antigravityclaudecursorcodexgemini

View Source on GitHub

Keep exploring this topic

Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.

More coding skills #ui #design #mockup #design-system Use cases

Related Skills

💻

Impeccable

@pbakaus

Paul Bakaus's Impeccable design skill: one /impeccable skill with 24 design commands, live browser iteration and a 59-rule detector for AI-generated frontend patterns.

Tested in AntigravityStatic reviewruns scriptsnetwork accesswrites files

frontenddesign

💻

Taste

@Leonxlnx

Open-source agent skill (design-taste-frontend) that gives coding agents an art direction, real pictures and a browser check so landing pages look less generic.

Tested in AntigravityStatic reviewruns scriptsnetwork accesswrites files

uidesign

💻