One-Line Positioning

superdesign-skill injects Superdesign design capabilities into DeepSeek Harness: let AI first scan your project's current UI, extract design DNA in the terminal, then generate branchable and iteratively improvable UI mockups and marketing images on the web canvas—aiming to replace the AI's default "generic template style" with results that match your project's brand.

Core Capabilities

• Register Superdesign skill instructions into dsh's skill list, allowing the host's conversational model to directly call $superdesign to enter the design workflow
• Scan the existing repository's components, layouts, routing, design tokens, and style files, writing the output to .superdesign/init/ as design context for subsequent generation
• Maintain a reusable design system file .superdesign/design-system.md in the repository, supporting extraction from existing code or rebuilding by referencing external sites
• Invoke Superdesign CLI to create projects and generate drafts on the canvas based on prompts, supporting replace (in-place iteration) and branch (side-by-side comparison of multiple directions) modes
• Generate branch variants after pixel-level recreation of existing pages; directly create designs for new pages/posters without mandatory "recreation" step
• Extract style guides, design tokens, and brand assets from specified URLs via CLI's extract-website, serving as the basis for reference-based reconstruction

Technical Implementation

• Language: JavaScript (Node.js ESM, pure ESM with no build steps) + extensive Markdown skill documentation
• Key Dependencies: No npm runtime dependencies (dsh/index.js only depends on node:fs/promises and node:url); the host's cordis framework and dsh plugin loading mechanism are provided by dsh itself, this package doesn't introduce any @deepseek-ai/* subpackages
• Architecture Pattern: dsh cordis plugin — package.json#dsh.bundle.patch points to dsh/cordis.patch.yml, which inserts the npm package named superdesign-skill into the dsh configuration layer; the package entry dsh/index.js exports apply(ctx), which calls ctx.skills.registerProvider(...) to register a skill provider in list/get form, publishing skills/superdesign/SKILL.md directly as the skill content
• Entry Files: dsh/index.js (cordis plugin entry) + skills/superdesign/SKILL.md (skill content and routing) + skills/superdesign/references/SUPERDESIGN.md (design SOP for real repository paths)

Applicable Scenarios

Developers using DeepSeek Harness for frontend development who want to review page/marketing designs with AI before writing code; especially users tired of AI's default "generic shadcn style" output—this skill actively reads your repository's existing UI and design tokens, forcing generated results to fit within your project's existing visual system. Also suitable for scenarios requiring batch generation of multiple direction drafts for comparison, or replacing existing interfaces with new visual styles while preserving structure and content.

Prerequisites and Compatibility

Installation

dsh plugin --profile web add github:superdesigndev/superdesign-skill

Configuration

This plugin requires no additional configuration. dsh/index.js only reads the frontmatter description from skills/superdesign/SKILL.md to register into dsh's skill list, doesn't parse any configuration items, doesn't read environment variables, doesn't read local configuration files. All runtime configuration (CLI login state, generation options) is maintained by @superdesign/cli itself, unrelated to this plugin.

FAQ

Q: Is this plugin usable after installation, or do I need to do something else?

A: The plugin only registers Superdesign skill instructions into dsh's skill list; the actual generation/iteration is handled by Superdesign CLI. So after installing this plugin, you still need to globally install @superdesign/cli (npm install -g @superdesign/cli@latest) and complete one superdesign login—the skill will guide you through this before the first actual image generation.

Q: Does this plugin read my code? Will it upload my code anywhere?

A: The skill reads your local repository's source code, styles, and configurations to understand the current UI (written to .superdesign/init/), and when generating, submits relevant files as context to Superdesign backend via CLI as needed. It doesn't batch upload the entire repository, nor does it write local paths directly into generated HTML—all image materials must first be uploaded to get public https:// URLs before being embedded.

Q: Why are design files written in my repository? What remains after uninstallation?

A: The skill writes initialization outputs to .superdesign/init/ (six context files), .superdesign/design-system.md, .superdesign/replica_html_template/, and .superdesign/resume.json, all under the .superdesign/ directory in project root. Uninstalling the plugin doesn't automatically clean up these local files—manually delete if needed; after deletion, dsh won't see the skill, but other harnesses (Claude Code, Cursor, Codex, etc.) that installed the same skill earlier will retain it.

Q: What's the difference from directly using the web version at superdesign.dev?

A: The web version is a graphical editor, supporting pixel-level "cloning" and editable canvas. This plugin uses CLI—the skill side can do "style reference-based reconstruction"—extracts design DNA from reference sites then creates a new editable draft; if users want 1:1 editable cloning, they need to go to the web version. All CLI changes are visualized on superdesign.dev's canvas—the skill only handles initiating calls and returning canvas/preview links.

Q: Can I use it on an empty directory with no frontend code?

A: Yes. Step 1 in SKILL.md recognizes "empty repository/sandbox" as a no-code path, skips init, collects design context directly through conversation (target users, platform, style preferences, reference sites), then generates drafts via the BRAND NEW PROJECT workflow. Real repositories with existing frontend code will force init first—the six context files must all exist or it won't proceed.

Q: How to troubleshoot errors? Do I need to reinstall?

A: First handle by situation per SKILL.md's "When a command fails": login errors retry npx --yes @superdesign/cli@latest login; extract-website timeout (60–120 seconds) allows one retry; generation commands (create-design-draft / iterate-design-draft) failure allows one retry via references/design-with-your-model.md to import HTML yourself. Don't keep blindly retrying any command after consecutive failures—stop and tell the user the current error.

Q: Which AI tools can use this skill?

A: This DSH plugin only works with the DeepSeek Harness system. The same skills/superdesign/ tree is also packaged and released as Claude Code plugin, Codex plugin, and Cursor plugin—the root package.json and .claude-plugin/, .codex-plugin/, .cursor-plugin/ four manifests share one version number, so other hosts can install the same skill via their corresponding plugin markets or npx skills add.

Difficulty Level

Advanced—installing the package itself is one command, but to use it smoothly requires first installing and logging into CLI, understanding the init/design-system/replica-html conventions, and knowing not to blindly retry on command 400 errors; for occasional image generation, you can get through using the skill's built-in guidance.

Known Issues and Limitations

• Design calls strongly depend on @superdesign/cli and the team's login state; not logged in or session expired directly errors—the skill's handling for such errors is to stop and tell the user rather than bypass (see skills/superdesign/SKILL.md:108-114 and references/SUPERDESIGN.md command failure section)
• Design calls go through Superdesign backend billed per use/credit point—each create-design-draft, iterate-design-draft, execute-flow-pages consumes quota; the skill deliberately requires "don't randomly generate images before user confirms direction" to avoid invalid charges
• Generation has a "context budget" hard limit: a single request stuffing in the target page + shared header + entire globals.css file will most likely return 400; the correct approach is to split at the 900-line threshold before passing to the rendering branch—failure shouldn't "simplify context" for retry—that would let the model conjure a generic page out of thin air based on the design system (see references/SUPERDESIGN.md:65-73)
• Logo position must use real Brand Asset logo—using first letter/emoji/generic icon as substitute is prohibited; the assetKey and public URL from upload must be explicitly inserted into component template or passed to generation with --reference-id, otherwise the model will automatically swap to a placeholder (see references/SUPERDESIGN.md:79-82)
• "Cloning" semantics on the CLI side is "style reference-based reconstruction", not pixel-perfect 1:1 copy; for editable pixel-perfect cloning you need superdesign.dev web version—CLI can't do it (see SKILL.md:17 and README line 25)
• Repository must be git-tracked (used for incremental diff comparing context fingerprint); if the project isn't in a git working tree, the precise diff in the hot path becomes ineffective, requiring full refresh strategy (see references/RESUME.md:166-180)
• extract-website calls remote crawler, taking 60–120 seconds per call and may be affected by target site's anti-crawl; one retry allowed on failure—if both attempts fail, must stop, don't automatically bypass this step

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.

---

What is Superdesign?

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.

• What it does — finds design direction, sets up design systems, approves presentation outlines, and generates + iterates high-quality UI, slide decks, and graphics on an infinite canvas.
• Who it's for — developers, indie hackers, and product/UI designers who want to go from idea to shippable UI fast without leaving their coding agent.
• How it's different — style-preset skills just swap in a theme or a component library. Superdesign designs into your existing design system: it reads your code for context, gathers real style references, and produces branchable drafts you refine.
• Cross-session continuity — after the first real-codebase design, the skill remembers the project, draft, extracted components, and budgeted source-context bundle so later unchanged iterations resume without repeating codebase discovery.
• Two ways in — this skill from any coding agent, or the web app at superdesign.dev.

Not the legacy IDE extension. The archived open-source superdesigndev/superdesign VS Code extension is an older, separate project. This skill and superdesign.dev are the current, maintained product.

---

Install

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

Use it

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.

---

Core scenarios (what this skill handles)

1. Design or improve UI (feature/page/flow)
2. Create a presentation with an editable approved outline
3. Create graphics (posters, covers, social posts, and ads)
4. Set or extract a design system
5. Generate supporting images or video

Tooling overview

A) Inspiration & Style Tools (generic, always available)

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
  

B) Canvas Design Tools

Use design agent to generate high quality design drafts:

• Create project (optionally seed a baseline draft from an HTML template via --template)
• Create design draft
• Iterate design draft (replace / branch)
• Plan flow pages → execute flow pages
• Fetch specific design draft
• Create a presentation from an approved ordered slide outline
• Read stored presentation outline and preferences for safe iteration
• List reusable Project Brand Assets

---

Overall SOP for designing features on top of existing app:

1. Investigate existing UI, workflow
2. Setup design system file if not exist yet
3. Requirements gathering: ask the user using the session's available user-input mechanism; if none is available, ask in chat (optionally use Inspiration tools when needed)
4. Ask user whether ready to design in superdesign OR implement UI directly
5. If yes to superdesign 5.1 Create/update a pixel perfect html replica of current UI of page that we will design on top of in .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

Always-on rules

• Design system should live at: .superdesign/design-system.md
• If .superdesign/design-system.md is missing, run Design System Setup first.
• Ask high-signal questions about constraints, taste, and tradeoffs using the session's available user-input mechanism; if none is available, ask in chat.
• Read each command's default output directly — it is agent-optimized (compact TOON plus help[] next-step hints). Add --json only when you genuinely need the full machine-readable payload, and --full only to expand truncated fields.

---

replica_html_template rules (Canvas only)

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:

1. Identify & understand existing UI of page related
2. Create/update a pixel perfect replica html in .superdesign/replica_html_template/<name>.html (Only replicate how UI look now, do NOT design)

• If design task is redesign profile page, then replicate current profile page UI pixel perfectly
• If design task is add new button to side panel, identify which page side panel is using, then replicate that page UI pixel perfectly

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.

• DO NOT design or improve anything in the replica_html_template
• DO NOT add placeholder sections like <!-- NEW FEATURE - DESIGN THIS -->
• DO create pixel-perfect replica of current UI state
• Save to: .superdesign/replica_html_template/<name>.html

Naming & Reuse

Naming 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:

1. Check if .superdesign/replica_html_template/ already contains a matching file
2. If exists: reuse it or update to reflect the latest existing UI
3. If not exists: create the neww file

Example: Adding a "Book Demo" section to home page

BAD 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

---

1) Design System Setup

Step 0 — Ask user (one question)

"Do you want to create a new design system or extract from the current codebase?"

A) Extract from codebase

1. Investigate codebase:
   • Product context: what is being built, target users, core value proposition, key user journeys and page structure
   • design tokens, typography, colors, spacing, radius, shadows
   • motion/animation patterns
   • example components usage + implementation patterns
2. Write standalone design system to:
   • .superdesign/design-system.md
   • Must be implementable without the codebase

B) Create a new design system (to improve current UI)

1. Investigate codebase to understand:
   • Product context: what is being built, target users, core value proposition, key user journeys and page structure
   • needed pages/components
2. Gather inspirations (generic tools):
   • superdesign search-prompts --tags "style"
   • superdesign get-prompts --slugs ... (index first; add --full for the chosen slug's full body)
   • optional: superdesign extract-website --url ... --design-md (style guide → design.md; add --brand for assets)
3. Ask the user to choose a direction using the session's available user-input mechanism; if none is available, ask in chat
4. Write:
   • .superdesign/design-system.md (product context + UX flows + visual design, adapted to references)

---

2) Designing X (feature/page/flow)

Example workflow - Add feature to existing page

1. Investigate the existing design and ask targeted questions about requirements and taste using the session's available user-input mechanism; if none is available, ask in chat
2. After clarifying, Ask user whether ready to design in superdesign OR implement UI directly
3. If design in superdesign 3.1 Ensure .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
   

   → Note: 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

Advanced usage

Design multiple page OR a full user journey

Execute:

superdesign execute-flow-pages \
  --draft-id <draftId> \
  --pages '[{"title":"Signup","prompt":"..."},{"title":"Payment","prompt":"..."}]'

Get HTML reference from a draft

superdesign get-design --draft-id <draftId> --output ./design.html

---

Quick reference (key commands)

# 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 "..."

---

Links

• Web app: superdesign.dev
• Prompt library: superdesign.dev/library
• Design system convention: DESIGN.md
• Skill install for 70+ agents: vercel-labs/skills

License

MIT. See LICENSE.