一句话定位

superdesign-skill 把 Superdesign 设计技能注入 DeepSeek Harness：在终端里让 AI 先扫描你项目里的 UI 现状、提取设计 DNA，再在网页画布上生成可分支、可继续迭代的 UI 草图和营销图，目标是把 AI 默认吐出来的"通用模板风"换成跟项目品牌对得上的成品。

核心能力

• 把 Superdesign 技能说明注册到 dsh 的技能列表里，让宿主里的对话模型可以直接调用 $superdesign 进入设计流程
• 扫描现有仓库的组件、布局、路由、设计令牌、样式文件，把产物写到 .superdesign/init/ 作为后续生成的设计上下文
• 在仓库里维护一份可复用的设计系统文件 .superdesign/design-system.md，支持从现有代码提取或参考外部站点重新搭建
• 调 Superdesign CLI 创建项目、按提示词在画布上出草图，支持 replace（原地迭代）和 branch（多个方向并排对比）两种模式
• 对现有页面做像素级还原后再生成分支变体；对全新页面/海报直接出设计，不强制走"还原"步骤
• 通过 CLI 的 extract-website 从指定网址提取风格指南、设计令牌、品牌资产，作为借鉴式重建的依据

技术实现

• 语言: JavaScript（Node.js ESM，纯 ESM 无构建步骤）+ 大量 Markdown 技能文档
• 关键依赖: 无 npm 运行时依赖（dsh/index.js 仅依赖 node:fs/promises 与 node:url）；宿主侧的 cordis 框架与 dsh 插件加载机制由 dsh 自带，本包不引入 @deepseek-ai/* 任何子包
• 架构模式: dsh cordis 插件 —— package.json#dsh.bundle.patch 指向 dsh/cordis.patch.yml，由该文件把名字为 superdesign-skill 的 npm 包插入 dsh 配置层；包入口 dsh/index.js 导出 apply(ctx)，调用 ctx.skills.registerProvider(...) 注册一个 list / get 形态的技能提供者，把 skills/superdesign/SKILL.md 直接当技能内容发布
• 入口文件: dsh/index.js（cordis 插件入口）+ skills/superdesign/SKILL.md（技能正文与路由分发）+ skills/superdesign/references/SUPERDESIGN.md（真实仓库路径的设计 SOP）

适用场景

正在用 DeepSeek Harness 做前端开发、希望在写代码前先跟 AI 一起把页面/营销图过一遍设计稿的开发者；尤其是受够了 AI 默认吐出来全是"通用 shadcn 风"的用户——这个技能会主动读你仓库的现有 UI 和设计令牌，强制让生成结果落到项目已有的视觉体系里。也适合需要批量出多个方向的初稿做对比、或者把已有界面换成全新视觉风格但保留结构与内容的场景。

前置依赖与兼容性

安装方式

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

配置项

本插件无需额外配置。dsh/index.js 只负责把 skills/superdesign/SKILL.md 的 frontmatter description 读出来注册到 dsh 的技能列表里，不解析任何配置项、不读环境变量、不读取本地配置文件。运行时所需的全部配置（CLI 登录态、生成选项）由 @superdesign/cli 自己维护，与本插件无关。

常见问题

Q: 这个插件装上后能用了吗，还需要做什么？

A: 插件本身只把 Superdesign 技能说明注册进 dsh 的技能列表，具体的生成/迭代由 Superdesign CLI 负责。所以装好本插件后，还需要全局安装 @superdesign/cli（npm install -g @superdesign/cli@latest）并完成一次 superdesign login，技能在第一次实际出图前会引导你走完这一步。

Q: 这个插件会读取我的代码吗？会把代码上传到哪吗？

A: 技能会读取你本地仓库的源码、样式、配置来理解当前 UI（写在 .superdesign/init/ 里），生成时按需把相关文件作为上下文通过 CLI 提交给 Superdesign 后端。它不会整库批量上传，也不会把本地路径直接写进生成的 HTML —— 所有图片素材都必须先走上传拿到公开 https:// URL 才会被嵌入。

Q: 为什么设计文件都写在我的仓库里？卸载会留下什么？

A: 技能把初始化产物写到 .superdesign/init/（六个上下文文件）、.superdesign/design-system.md、.superdesign/replica_html_template/ 和 .superdesign/resume.json，全部在项目根的 .superdesign/ 目录下。卸载插件不会自动清掉这些本地文件，需要的话手动删除即可；删除后 dsh 看不到技能，但其他 harness（Claude Code、Cursor、Codex 等）如果之前装过同名技能也仍然保留。

Q: 跟直接用网页版 superdesign.dev 有什么区别？

A: 网页版是图形化编辑器，支持像素级"克隆"和可编辑画布。本插件走的是 CLI，技能侧能做到的是"风格借鉴式重建"——根据参考站点提取设计 DNA 之后做一份新的可编辑草图；如果用户要 1:1 的可编辑克隆，得去网页版。CLI 这边所有改动都在 superdesign.dev 的画布上可视化，技能只负责发起调用和返回 canvas/preview 链接。

Q: 没有前端代码的空目录能用吗？

A: 能。SKILL.md 的 Step 1 把"空仓库/沙盒"识别为无代码路径，会跳过 init，直接通过对话收集设计上下文（目标用户、平台、风格偏好、参考站点），再走 BRAND NEW PROJECT 工作流生成草图。已有前端代码的真实仓库则会强制先跑 init，六个上下文文件不全就跑不动。

Q: 报错了怎么排查？需要重装吗？

A: 先按 SKILL.md 的"When a command fails"分情况处理：登录错误就重跑一次 npx --yes @superdesign/cli@latest login；extract-website 超时（60–120 秒）允许重试一次；生成命令（create-design-draft / iterate-design-draft）失败一次后可走 references/design-with-your-model.md 自己导入 HTML 重试。任何命令连续失败都不应该再继续硬试，直接停下来告诉用户当前错误。

Q: 哪些 AI 工具能用到这个技能？

A: 这个 DSH 插件只对 DeepSeek Harness 体系生效。同一份 skills/superdesign/ 树同时也被打包成 Claude Code 插件、Codex 插件、Cursor 插件发布，根 package.json 和 .claude-plugin/、.codex-plugin/、.cursor-plugin/ 四份 manifest 共用一个版本号，所以其他宿主只要走对应的插件市场或 npx skills add 也能装到同样的技能。

上手难度

进阶 — 装包本身一条命令，但要真用顺滑需要先安装并登录 CLI，理解 init/design-system/replica-html 这套约定，并知道命令 400 时不能盲目重试；只是偶尔出张图的话可以靠技能自带的引导跑通。

已知问题与限制

• 设计调用强依赖 @superdesign/cli 与团队的登录态，未登录/会话过期都直接报错，技能对这类错误的处理是停下来告诉用户而不是绕过（见 skills/superdesign/SKILL.md:108-114 与 references/SUPERDESIGN.md 命令失败段落）
• 设计调用走 Superdesign 后端按次/按信用点计费，每次 create-design-draft、iterate-design-draft、execute-flow-pages 都会消耗额度，技能刻意要求"在用户确认方向之前不要乱出图"以避免无效扣费
• 生成存在"上下文预算"硬上限：单次请求若把目标页 + 共享 header + globals.css 整文件塞进去大概率 400；正确做法是按 900 行阈值切到渲染分支再传，失败时不能"精简上下文"重试——那会让模型基于设计系统凭空造一份通用页面（见 references/SUPERDESIGN.md:65-73）
• Logo 位必须用真的 Brand Asset logo，禁止用首字母/emoji/通用图标替代；上传拿到的 assetKey 和公开 URL 必须显式塞进组件模板或带 --reference-id 传给生成，否则模型会自动换成占位符（见 references/SUPERDESIGN.md:79-82）
• "克隆"语义在 CLI 侧是"风格借鉴式重建"，不是像素级 1:1 复制；要可编辑的逐像素克隆得去 superdesign.dev 网页版，CLI 做不了（见 SKILL.md:17 与 README 第 25 行）
• 仓库必须能被 git 跟踪（用于增量 diff 比对上下文指纹）；如果项目不在 git 工作树里，热路径里的精确 diff 这一项就失效，需要走全量刷新策略（见 references/RESUME.md:166-180）
• extract-website 会调用远端爬虫，单次耗时 60–120 秒并可能受目标站点反爬影响；失败时允许重试一次，两次都不行必须停下，不要自动绕过这一步

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.