代理设计技能 superdesigndev/superdesign-skill

Superdesign：给编程智能体的 UI、演示文稿和图形

别再交付 AI 味十足的 UI 了。 编程智能体写代码很在行，做界面却很平庸：布局千篇一律，清一色默认 shadcn，毫无品味。Superdesign 就是那个技能，赋予你的智能体设计判断力，让它交付的 UI 看起来真的经过推敲。

装一次，你的智能体（Claude Code、Cursor、Codex 等 70 多个）就能找到真正的设计方向，在无限画布上生成并迭代高质量 UI、演示文稿和图形，全程不用离开终端。

由 superdesign.dev 提供支持，它是 AI 产品设计智能体。

Superdesign 技能演示

▶ 看这个技能实际跑起来。

Superdesign 是什么？

Superdesign 是 AI 产品设计智能体。 它给编程智能体（Claude Code、Cursor、Codex 等 70 多个）真正的设计判断力，让它们交付的 UI 看起来经过推敲，而不是千篇一律。

- 它做什么 —— 找设计方向、搭建设计系统、确认演示文稿大纲，在无限画布上生成并迭代高质量 UI、幻灯片和图形。
- 给谁用 —— 开发者、独立开发者，以及产品/UI 设计师，想从想法快速走到可交付的 UI，又不想离开自己的编程智能体。
- 有何不同 —— 风格预设类技能只是换一套主题或组件库。Superdesign 是设计进你现有的设计系统：它读你的代码拿上下文，收集真实的风格参考，产出可分支的草稿供你打磨。
- 跨会话延续 —— 第一次基于真实代码库设计之后，技能会记住项目、草稿、抽取出的组件，以及带预算的源码上下文包，后续没改动的迭代直接续上，不用重新做一遍代码库探索。
- 两种入口 —— 从任意编程智能体调用这个技能，或者用 superdesign.dev 上的 Web 应用。

不是那个老旧的 IDE 扩展。 已归档的开源 superdesigndev/superdesign VS Code 扩展是另一个更早的项目。这个技能和 superdesign.dev 才是当前在维护的产品。

安装

任意编程智能体 —— 为 70 多个受支持的编程智能体安装这个技能：

npx skills add superdesigndev/superdesign-skill

Claude Code —— 改成按插件安装，这样它保持命名空间隔离，还能用 /plugin update 更新：

/plugin marketplace add superdesigndev/superdesign-skill
/plugin install superdesign@superdesign

之后用 /superdesign:superdesign 调用这个技能。（不要在 Claude Code 里再跑一遍 npx skills add —— 那会装上同一个技能的第二份副本，而且没有命名空间。）

不管走哪条路，都要装上它驱动的命令行工具：

npm install -g @superdesign/cli@latest
superdesign login

怎么用

直接跟你的智能体说话就行：

/superdesign 帮我重新设计这个设置页，别让它看起来像默认 AI 生成的垃圾

/superdesign 根据我当前的代码库搭一套设计系统

/superdesign 改进我仪表盘的设计

/superdesign 做一份 8 页的演示文稿，讲我们的产品发布

剩下的交给技能：它会读取你的代码获取上下文，收集真实风格参考，产出设计稿，你可以拉分支继续打磨。

核心场景（这个技能能处理什么）

1. 设计或改进 UI（功能／页面／流程）
2. 做演示文稿，带一份可编辑、可确认的大纲
3. 做平面素材（海报、封面、社交帖、广告）
4. 设置或提取设计系统
5. 生成配图或视频

工具概览

A) 灵感与风格工具（通用，随时可用）

用它们找风格方向、参考和品牌上下文。在 Web 应用里浏览完整 prompt library，或者从命令行查询：

- 搜索 prompt library（风格／组件／页面）

superdesign search-prompts --query "<keyword>"
superdesign search-prompts --tags "style"
superdesign search-prompts --tags "style" --query ""

- 获取 prompt 详情 —— 先读精简索引，只对你选中的 slug 拉取完整正文

superdesign get-prompts --slugs "<slug1,slug2,...>" # index
superdesign get-prompts --slugs "<slug>" --full # full body of the chosen slug(s)

- 从 URL 提取网站的设计 DNA（风格指南、token、内容、品牌、克隆） superdesign extract-website --url https://example.com --design-md

B) 画布设计工具

用设计智能体生成高质量设计稿：
- 创建项目（可选，通过 --template 从 HTML 模板种入一份基线稿）
- 创建设计稿
- 迭代设计稿（替换／拉分支）
- 规划流程页面 → 执行流程页面
- 获取指定设计稿
- 根据一份已确认、排好序的幻灯片大纲做演示文稿
- 读取已存的演示文稿大纲和偏好，安全迭代
- 列出可复用的 Project Brand Assets

在现有应用上设计功能的整体 SOP：

1. 调研现有 UI、工作流
2. 如果设计系统文件还不存在，先建好
3. 收集需求：用当前会话可用的用户输入机制问用户；如果没有，就在聊天里问（需要时可选地用灵感工具）
4. 问用户：是准备在 superdesign 里设计，还是直接实现 UI
5. 如果在 superdesign 里做 5.1 在 .superdesign/replica_html_template/<name>.html 里，为我们要在其上设计的页面，创建／更新一份像素级还原当前 UI 的 HTML 副本（HTML 只应包含并反映 UI 现在的样子，真正的设计交给 superdesign 智能体处理） 5.2 用这份副本 HTML + 设计系统指南创建项目

5.3 基于 project 返回的 designDraft ID，通过迭代与分支设计草稿开始设计

常驻规则

- 设计系统应放在：.superdesign/design-system.md
- 如果 .superdesign/design-system.md 不存在，先运行 Design System Setup。
- 围绕约束、品味和取舍，用会话可用的用户输入机制提高信号问题；如果没有可用机制，就在聊天里问。
- 直接读取每条命令的默认输出——它已针对智能体优化（紧凑的 TOON 加 help[] 下一步提示）。只有确实需要完整机器可读载荷时才加 --json，只有要展开被截断的字段时才加 --full。

replica_html_template 规则（仅 Canvas）

replica html template 的用途，是给现有 UI 做一个轻量版本，让设计智能体能在它之上迭代（superdesign 无法直接访问你的代码库，所以这份上下文很重要）

在现有应用之上设计功能的整体流程：
1. 识别并理解相关页面的现有 UI
2. 在 .superdesign/replica_html_template/<name>.html 创建/更新像素级还原的 replica html（只还原 UI 现在的样子，不要做设计）
- 如果设计任务是重做 profile 页面，就像素级还原当前 profile 页面的 UI
- 如果设计任务是给侧边面板加新按钮，先找出侧边面板用在哪个页面，再像素级还原那个页面的 UI

replica_html_template = BEFORE 状态（现在已有的样子）。 它为 Superdesign 智能体提供上下文。
真正的设计由 superdesign 智能体完成，通过传入提示词

replica_html_template 必须只包含代码库中当前已有的 UI。
- 不要在 replica_html_template 里做设计或改进
- 不要加 这类占位区块
- 要像素级还原当前 UI 状态
- 保存到：.superdesign/replica_html_template/<name>.html

命名与复用

命名约定 给 replica_html_template 命名时要考虑复用性：用页面路由（例如 home.html、settings-profile.html、dashboard.html）这样容易判断某个 page_template 是否已经存在。

创建 replica_html_template 之前：
1. 检查 .superdesign/replica_html_template/ 里是否已有匹配文件
2. 如果存在：复用它，或更新它以反映最新的现有 UI
3. 如果不存在：创建新文件

示例：给 home 页面加一个「Book Demo」区块

错误做法：

Book a Demo
Schedule

正确做法：

然后在 iterate 命令里： 1/ 传入这份 replica html 创建 project 2/ 基于 design draft id 创建 design draft

1) 设计系统搭建

第 0 步 — 询问用户（一个问题）

「你想新建设计系统，还是从当前代码库中提取？」

A) 从代码库中提取

1. 调研代码库：
- 产品背景：在做什么、目标用户、核心价值主张、关键用户旅程与页面结构
- design tokens、字体排版、颜色、间距、圆角、阴影
- 动效/动画模式
- 组件用法示例 + 实现模式
2. 把独立的设计系统写到：
- .superdesign/design-system.md
- 必须脱离代码库也能落地实现

B) 新建设计系统（用来改进当前 UI）

1. 调研代码库，弄清：
- 产品背景：在做什么、目标用户、核心价值主张、关键用户旅程与页面结构
- 需要哪些页面/组件
2. 收集灵感（通用工具）：
- superdesign search-prompts --tags "style"
- superdesign get-prompts --slugs ...（先看索引；选定 slug 后加 --full 拿完整正文）
- 可选：superdesign extract-website --url ... --design-md（风格指南 → design.md；加 --brand 拿素材）
3. 让用户选一个方向，用当前会话可用的用户输入机制；没有就在聊天里问
4. 写：
- .superdesign/design-system.md（产品背景 + UX 流程 + 视觉设计，按参考素材做适配）

2) 设计 X（功能/页面/流程）

示例工作流 — 给现有页面加功能

1. 调研现有设计，就需求与偏好问一些有针对性的问题，用当前会话可用的用户输入机制；没有就在聊天里问
2. 澄清之后，问用户是想在 superdesign 里设计，还是直接实现 UI
3. 如果在 superdesign 里设计 3.1 确认 .superdesign/design-system.md 存在（缺了就做搭建） 3.2 找出最相关的页面，在 replica_html_template 里做一个像素级还原：
- .superdesign/replica_html_template/<page>-<feature>.html
3.3 创建项目，用 replica HTML 模板作为基线草稿（返回 draftId）：
superdesign create-project \
--title "<feature>" \
--template .superdesign/replica_html_template/<file>.html

→ 注意：响应里的 draftId 就是基线草稿。设计系统是在下面的 iterate 步骤里用 --context-file 传入的，不在 create-project 传。
3.4 从基线分出设计分支（用第 3.3 步的 draftId）
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 分享设计标题与预览 URL → 收集反馈 → 迭代

进阶用法

设计多个页面或一条完整用户旅程

执行：

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

从草稿获取 HTML 参考 bash superdesign get-design --draft-id <draftId> --output ./design.html

快速参考（常用命令） bash

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

链接

- Web 应用：superdesign.dev
- 提示词库：superdesign.dev/library
- 设计系统约定：DESIGN.md
- 为 70+ 智能体安装技能：vercel-labs/skills

许可证

MIT。见 LICENSE。