代理设计技能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 —— 那会安装同一技能的第二个、无命名空间隔离的副本。）

无论哪种方式，都要安装它所驱动的 CLI：

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

使用它

直接和你的代理对话即可：

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

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

/superdesign 改进我的仪表盘的设计

/superdesign 创建一个关于我们产品发布的 8 页幻灯片演示

该技能会处理其余部分：它会读取你的代码以获取上下文，收集真实的风格参考，并生成你可以分支和优化的设计草稿。

核心场景（该技能处理的内容）

1. 设计或改进 UI（功能/页面/流程）
2. 创建演示文稿，带有可编辑的已批准大纲
3. 创建图形（海报、封面、社交媒体帖子和广告）
4. 设置或提取设计系统
5. 生成辅助图像或视频

工具概览

A) 灵感与风格工具（通用，始终可用）

使用这些工具来发现风格方向、参考和品牌背景。在 Web 应用中浏览完整的提示词库，或从 CLI 查询：

- 搜索提示词库（风格/组件/页面）

superdesign search-prompts --query ""
superdesign search-prompts --tags "style"
superdesign search-prompts --tags "style" --query ""

- 获取提示词详情——先读取精简索引，然后仅为你选中的 slug 获取完整正文

superdesign get-prompts --slugs ""          # index
superdesign get-prompts --slugs "" --full             # full body of the chosen slug(s)

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

B) 画布设计工具

使用设计代理生成高质量的设计草稿：
- 创建项目（可选通过 --template 从 HTML 模板植入一个基线草稿）
- 创建设计草稿
- 迭代设计草稿（替换/分支）
- 规划流程页面 → 执行流程页面
- 获取特定设计草稿
- 从已批准的有序幻灯片大纲创建演示文稿
- 读取已存储的演示文稿大纲和偏好，以便安全迭代
- 列出可复用的项目品牌资产

在现有应用之上设计功能的总体 SOP：
1. 调查现有 UI、工作流程
2. 如果尚不存在，设置设计系统文件
3. 需求收集：使用会话中可用的用户输入机制询问用户；如果没有可用的，则在聊天中询问（必要时可选使用灵感工具）
4. 询问用户是准备在 superdesign 中设计，还是直接实现 UI
5. 如果选择 superdesign
5.1 在 .superdesign/replica_html_template/.html 中创建/更新我们将要在其之上设计的页面的当前 UI 的像素级完美 HTML 副本（HTML 应仅包含并反映 UI 现在的样子，实际设计应由 superdesign 代理处理）
5.2 使用此副本 HTML + 设计系统指南创建项目
5.3 基于项目返回的 designDraft ID，通过迭代和分支设计草稿开始设计

常驻规则
- 设计系统应位于：.superdesign/design-system.md
- 如果 .superdesign/design-system.md 缺失，请先运行 Design System Setup。
- 使用会话中可用的用户输入机制，询问关于约束、品味和权衡的高信号问题；如果没有任何可用机制，则在聊天中询问。
- 直接读取每个命令的默认输出——它是为 agent 优化的（紧凑的 TOON 加上 help[] 下一步提示）。仅当你确实需要完整的机器可读负载时才添加 --json，仅当需要展开被截断的字段时才添加 --full。

replica_html_template 规则（仅 Canvas）

replica html template 的目的是创建现有 UI 的轻量级版本，以便设计 agent 可以在其基础上迭代（由于 superdesign 无法直接访问你的代码库，这是重要的上下文）

在现有应用之上设计功能的整体流程：
1. 识别并理解相关页面的现有 UI
2. 在 .superdesign/replica_html_template/.html 中创建/更新像素级完美的 replica html（仅复刻 UI 当前的样子，不要进行设计）
- 如果设计任务是重新设计个人资料页面，则像素级完美地复刻当前个人资料页面 UI
- 如果设计任务是向侧边面板添加新按钮，则确定侧边面板正在使用哪个页面，然后像素级完美地复刻该页面 UI

replica_html_template = BEFORE 状态（当前存在的内容）。 它为 Superdesign agent 提供上下文。
实际设计将通过 superdesign agent 完成，方式是传入 prompt

replica_html_template 必须仅包含代码库中当前存在的 UI。
- 不要在 replica_html_template 中设计或改进任何内容
- 不要添加像  这样的占位区块
- 要创建当前 UI 状态的像素级完美复刻
- 保存到：.superdesign/replica_html_template/.html

命名与复用

命名约定
为可复用性命名 replica_html_template：使用页面路由（例如 home.html、settings-profile.html、dashboard.html）
这样可以轻松识别是否已经存在 page_template。

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

示例：向首页添加“Book Demo”区块

错误做法：

Book a Demo
Schedule

正确做法：

然后在 iterate 命令中：
1/ 传入此 replica html 创建项目
2/ 基于 design draft id 创建设计草稿

1) 设计系统设置

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

“你想创建一个新的设计系统还是从当前代码库中提取？”

A) 从代码库中提取

1. 调查代码库：
- 产品背景：正在构建什么、目标用户、核心价值主张、关键用户旅程和页面结构
- 设计令牌、排版、颜色、间距、圆角、阴影
- 动效/动画模式
- 示例组件用法 + 实现模式
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/-.html
3.3 创建项目，从复刻 HTML 模板播种基线草稿（返回 draftId）：
superdesign create-project \
--title "" \
--template .superdesign/replica_html_template/.html

→ 注意：响应中的 draftId 是基线草稿。设计系统会在下面的迭代步骤中作为 --context-file 传入，而不是在 create-project 中传入。
3.4 从基线分支设计（使用步骤 3.3 中的 draftId）
superdesign iterate-design-draft \
--draft-id  \
-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  \
--pages '[{"title":"注册","prompt":"..."},{"title":"支付","prompt":"..."}]'

从草稿获取 HTML 参考

superdesign get-design --draft-id  --output ./design.html

快速参考（关键命令）

灵感
superdesign search-prompts --query ""
superdesign search-prompts --tags "style"
superdesign get-prompts --slugs ""          # 索引；添加 --full 获取完整内容
superdesign extract-website --url https://example.com --design-md   # 样式指南；添加 --brand/--tokens/--content-structure/--clone 获取更多

画布 - 创建项目
可选的 --template  从 HTML 文件播种第一个（基线）草稿。
设计系统通过草稿/迭代命令上的 --context-file 传入，而不是在这里。
superdesign create-project --title "X"
superdesign create-project --title "X" --template ./index.html

演示 - 在调用此命令前先在聊天中批准大纲
superdesign create-presentation --project-id  --title "X" \
--outline-file ./slides.json --visual-direction "..." \
--navigation-controls show --transition auto --brand-assets use

迭代：替换模式（单一变体，就地更新）
superdesign iterate-design-draft --draft-id  -p "..." --mode replace

迭代：探索多个版本和变体（每个提示 = 一个变体，提示应仅为方向性，不要指定颜色、风格，让 superdesign 设计专家填充细节，你只需给出方向）
superdesign iterate-design-draft --draft-id  -p "dark theme" -p "minimal" -p "bold" --mode branch

迭代：自动探索（只给出探索方向，让 Superdesign 填充细节，例如探索不同风格；默认不使用此项）
superdesign iterate-design-draft --draft-id  -p "..." --mode branch --count 3

获取并得到设计
superdesign fetch-design-nodes --project-id
superdesign get-design --draft-id  --json          # 完整 HTML 负载；或 --output  写入文件

从零创建新设计，无需任何参考 - 仅用于创建全新设计，默认绝不使用此项
superdesign create-design-draft --project-id  --title "X" -p "..."

链接

- Web 应用：superdesign.dev
- 提示库：superdesign.dev/library
- 设计系统约定：DESIGN.md
- 适用于 70+ 代理的技能安装：vercel-labs/skills

许可证

MIT。参见 LICENSE。