superdesign-dsh
在 Superdesign 无限画布上设计前端 UI、演示文稿和营销图形——以 DeepSeek Harness 技能包形式提供。
插件会安装到这里；不确定时保持 web。
npx -y @deepseek-ai/dsh plugin --profile web add github:superdesigndev/superdesign-skill#a2de82eb533d1404599846d1389f20434b826d5bSuperdesign Dsh 以 superdesign-dsh 发布，当前版本为 0.6.0。Plugin Hub 会校验它的 manifest，并保存精确安装来源，便于复现安装结果。
Stop shipping AI-slop UI. Coding agents write great code and mediocre interfaces: generic layouts, default shadcn everything, no taste. Superdesign is the skill that gives your agent design judgment, so the UI it ships actually looks considered.
Install it once and your agent (Claude Code, Cursor, Codex, and 70+ others) can find real design direction and generate + iterate high-quality UI, presentations, and graphics on an infinite canvas, all without leaving your terminal.
Powered by superdesign.dev, the AI product design agent.
▶ Watch the skill in action.
Superdesign is an AI product design agent. It gives coding agents (Claude Code, Cursor, Codex, and 70+ others) real design judgment, so the UI they ship looks considered instead of generic.
Not the legacy IDE extension. The archived open-source
superdesigndev/superdesignVS Code extension is an older, separate project. This skill and superdesign.dev are the current, maintained product.
Any coding agent — installs the skill for any of the 70+ supported coding agents:
npx skills add superdesigndev/superdesign-skill
Claude Code — install it as a plugin instead, so it stays namespaced and updates with /plugin update:
/plugin marketplace add superdesigndev/superdesign-skill
/plugin install superdesign@superdesign
The skill is then invoked as /superdesign:superdesign. (Do not also run npx skills add in Claude Code — that installs a second, unnamespaced copy of the same skill.)
Either way, install the CLI it drives:
npm install -g @superdesign/cli@latest
superdesign login
Just talk to your agent:
/superdesign help me redesign this settings page so it doesn't look like default AI slop
/superdesign set up a design system from my current codebase
/superdesign improve the design of my dashboard
/superdesign create an 8-slide presentation about our product launch
The skill handles the rest: it reads your code for context, gathers real style references, and produces design drafts you can branch and refine.
Use these to discover style direction, references, and brand context. Browse the full prompt library in the web app, or query it from the CLI:
Search prompt library (style/components/pages)
superdesign search-prompts --query "<keyword>"
superdesign search-prompts --tags "style"
superdesign search-prompts --tags "style" --query "<style keyword>"
Get prompt details — read the compact index first, then fetch the full body only for the slug(s) you pick
superdesign get-prompts --slugs "<slug1,slug2,...>" # index
superdesign get-prompts --slugs "<slug>" --full # full body of the chosen slug(s)
Extract a site's design DNA from a URL (style guide, tokens, content, brand, clone)
superdesign extract-website --url https://example.com --design-md
Use design agent to generate high quality design drafts:
--template).superdesign/replica_html_template/<name>.html (html should only contain & reflect how UI look now, the actual design should be handled by superdesign agent)
5.2 Create project with this replica html + design system guide
5.3 Start desigining by iterating & branching design draft based on designDraft ID returned from project.superdesign/design-system.md.superdesign/design-system.md is missing, run Design System Setup first.help[] next-step hints). Add --json only when you genuinely need the full machine-readable payload, and --full only to expand truncated fields.The purpose of replica html template is creating a lightweight version of existing UI so design agent can iterate on top of it (Since superdesign doesn't have access to your codebase directly, this is important context)
Overall process for designing features on top of existing app:
.superdesign/replica_html_template/<name>.html (Only replicate how UI look now, do NOT design)replica_html_template = BEFORE state (what exists now). It provides context for Superdesign agent. Actual design will be done via superdesign agent, by passing the prompt
The replica_html_template must contain ONLY UI that currently exists in the codebase.
<!-- NEW FEATURE - DESIGN THIS -->.superdesign/replica_html_template/<name>.htmlNaming convention
Name replica_html_template for reusability: Use the page route (e.g., home.html, settings-profile.html, dashboard.html)
This makes it easy to identify if a page_template already exists.
Before creating a replica_html_template:
.superdesign/replica_html_template/ already contains a matching fileBAD approach:
<!-- replica_html_template includes a sketched Book Demo section -->
<section class="book-demo">
<!-- DESIGN THIS - Add CTA here -->
<h3>Book a Demo</h3>
<button>Schedule</button>
</section>
GOOD approach:
<!-- replica_html_template is pure replica of existing home page (hero + projects) -->
Then in the iterate command: 1/ create project passing this replica html 2/ create design draft based on design draft id
"Do you want to create a new design system or extract from the current codebase?"
.superdesign/design-system.mdsuperdesign search-prompts --tags "style"superdesign get-prompts --slugs ... (index first; add --full for the chosen slug's full body)superdesign extract-website --url ... --design-md (style guide → design.md; add --brand for assets).superdesign/design-system.md (product context + UX flows + visual design, adapted to references).superdesign/design-system.md exists (setup if missing)
3.2 Identify page most relevant, and build a pixel-perfect replica in replica_html_template:
.superdesign/replica_html_template/<page>-<feature>.html
3.3 Create project, seeding the baseline draft from the replica HTML template (returns draftId):superdesign create-project \
--title "<feature>" \
--template .superdesign/replica_html_template/<file>.html
draftId in the response is the baseline draft. The design system is passed as a --context-file on the iterate step below, not on create-project.
3.4 Branch designs from baseline (use draftId from step 3.3)
superdesign iterate-design-draft \
--draft-id <draftId> \
-p "Dark theme with neon accents" \
-p "Minimal with more whitespace" \
-p "Bold gradients and shadows" \
--mode branch \
--context-file .superdesign/design-system.md
3.5 Share design title & preview URL → collect feedback → iterate
Execute:
superdesign execute-flow-pages \
--draft-id <draftId> \
--pages '[{"title":"Signup","prompt":"..."},{"title":"Payment","prompt":"..."}]'
superdesign get-design --draft-id <draftId> --output ./design.html
# Inspirations
superdesign search-prompts --query "<keyword>"
superdesign search-prompts --tags "style"
superdesign get-prompts --slugs "<slug1,slug2>" # index; add --full for full bodies
superdesign extract-website --url https://example.com --design-md # style guide; add --brand/--tokens/--content-structure/--clone for more
# Canvas - Create project
# Optional --template <path> seeds the first (baseline) draft from an HTML file.
# The design system is passed as --context-file on the draft/iterate commands, not here.
superdesign create-project --title "X"
superdesign create-project --title "X" --template ./index.html
# Presentation - approve the outline in chat before this call
superdesign create-presentation --project-id <id> --title "X" \
--outline-file ./slides.json --visual-direction "..." \
--navigation-controls show --transition auto --brand-assets use
# Iterate: replace mode (single variation, updates in place)
superdesign iterate-design-draft --draft-id <id> -p "..." --mode replace
# Iterate: Explore multiple versions & variations (each prompt = one variation, prompt should be just directional, do not specify color, style, let superdesign design expert fill in details, you just give direction)
superdesign iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" -p "bold" --mode branch
# Iterate: Auto explore (only give exploration direction, and let Superdesign fill in details, e.g. explore different styles; Default do not use this)
superdesign iterate-design-draft --draft-id <id> -p "..." --mode branch --count 3
# Fetch & get designs
superdesign fetch-design-nodes --project-id <id>
superdesign get-design --draft-id <id> --json # full HTML payload; or --output <path> to write to a file
# Create new design from scratch without any reference - ONLY use this for creating brand new design, default NEVER use this
superdesign create-design-draft --project-id <id> --title "X" -p "..."
MIT. See LICENSE.