superdesign-skill 是什么？给编码代理设计判断力的 UI 设计技能

superdesign-skill 是 DeepSeek Harness（DSH Plugin）生态中的 UI 设计技能，把设计判断力交给编码代理：读取你的代码获取上下文、收集真实风格参考，生成可分支和细化的设计草稿，让前端不再像默认 AI 生成的界面。 本文基于官方 README，介绍它是什么、核心功能、安装启用、典型用法与常见排错。

superdesign-skill 是什么？

superdesign-skill 解决「编码代理写得出好代码、却出不了有品味的界面」的问题：它是一款 AI 产品设计代理，让 Claude Code、Cursor、Codex 等 70+ 编码代理拥有真正的设计判断力。 以下定位与事实均来自官方 README（来源）：

superdesign-skill 由 superdesigndev 维护、用 JavaScript 开发、以 MIT 协议开源，是 superdesign.dev（AI 产品设计代理）的终端入口。与传统「风格预设」技能只换主题或组件库不同，它设计时会融入你现有的设计系统：读取代码上下文、收集真实风格参考，产出可分支和细化的草稿。它支持五种核心场景——设计或改进 UI、创建演示文稿、制作图形、设置或提取设计系统、生成辅助图片或视频。技能还具备跨会话连续性：首次基于真实代码库设计后，会记住项目、草稿与提取的组件，后续未变化的迭代直接恢复，无需重复扫描代码。注意：README 特别强调，旧的 superdesign VS Code 扩展是已归档的独立项目、不再维护，当前产品是本技能与 superdesign.dev 网页应用。

superdesign-skill 的核心功能有哪些？

superdesign-skill 的核心能力是「设计判断力 + 五个核心场景 + 跨会话连续性」：发现设计方向、建立设计系统、批准演示大纲，并在无限画布上生成与迭代高质量 UI、幻灯片与图形。 功能事实来自官方 README（来源）：

• 设计或改进 UI：针对 feature、页面或完整流程生成与迭代设计，支持 replace 与 branch 两种迭代模式。
• 创建演示文稿：先生成可编辑的有序大纲，经你批准后再产出成品幻灯片。
• 制作图形：海报、封面、社交媒体帖子和广告等视觉素材。
• 设置或提取设计系统：从当前代码库提取，或从零创建，输出到 .superdesign/design-system.md。
• 生成辅助图片或视频：为设计提供配套视觉素材。
• 灵感与品牌工具：搜索提示库、获取提示详情、从任意 URL 提取网站设计 DNA（风格指南、令牌、内容与品牌资产）。

怎么安装与启用 superdesign-skill？

启用分两步：先安装技能本身，再安装并登录它驱动的 CLI（@superdesign/cli），之后在编码代理中直接调用。 安装命令来自官方 README（来源）：

1. 安装技能：DeepSeek Harness 用户用目录站命令；其他编码代理（Claude Code、Cursor、Codex 等 70+）用 skills 安装。

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

或

npx skills add superdesigndev/superdesign-skill

2. 安装并登录 CLI：技能驱动的命令行工具需要全局安装并完成身份验证：

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

3. 启动 DSH 并调用：重启 Web profile，然后在会话里向代理发起设计指令：

dsh --profile web

4. 更新 / 移除：更新重跑安装命令或用更新命令，移除时用移除命令：

dsh plugin --profile web update superdesign-skill
dsh plugin remove superdesign-skill

Claude Code 用户走 /plugin 方式：/plugin marketplace add superdesigndev/superdesign-skill 加 /plugin install superdesign@superdesign，调用前缀为 /superdesign:superdesign；不要同时运行 npx skills add，避免装出第二份未命名空间的副本。

superdesign-skill 典型用法

典型用法就是直接对代理说人话——改造界面、搭设计系统、做演示文稿，具体命令由技能自动编排；需要精细控制时再用 CLI 命令。 用法细节来自官方 README（来源）：

1. 直接下指令：在会话中直接对代理发起设计任务，示例如下。

/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

2. 搜索风格灵感：从提示库检索风格、组件与页面方向：

superdesign search-prompts --tags "style"
superdesign get-prompts --slugs "minimal-dashboard" --full

3. 提取网站设计 DNA：从参考网站提取风格指南与品牌资产：

superdesign extract-website --url https://example.com --design-md

4. 创建项目并迭代草稿：先建项目（可选 --template 种子基线草稿），再用分支模式探索多个方向：

superdesign create-project --title "Dashboard" --template ./index.html
superdesign iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" --mode branch --context-file .superdesign/design-system.md

在现有应用上设计新功能的标准流程：调查现有 UI → 确保设计系统文件存在 → 问清楚需求与口味偏好 → 生成当前页面的像素级副本（.superdesign/replica_html_template/<page>.html，只复制现状、不做设计）→ 以副本为基线创建项目 → 分支迭代草稿 → 分享预览并收集反馈。

superdesign-skill 常见问题与排错

superdesign-skill 的常见问题集中在「技能没生效」「CLI 未装或未登录」「装了两份技能冲突」「设计系统文件缺失」四类，下面给出症状、原因与解决步骤。 排错依据来自官方 README（来源）：

1. 症状：调用 /superdesign 提示技能不存在或没反应。 原因：技能未安装，或用了错误的安装通道。解决：确认已按对应代理的方式安装（DSH 用 dsh plugin add，Claude Code 用 /plugin），并重启会话。

2. 症状：命令报错提示找不到 superdesign 命令。 原因：CLI 未全局安装或未登录。解决：执行 npm install -g @superdesign/cli@latest 后运行 superdesign login 完成身份验证：

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

3. 症状：Claude Code 里出现两个同名技能或行为冲突。 原因：同时跑了 /plugin 与 npx skills add，装出第二份未命名空间副本。解决：Claude Code 只用 /plugin 安装，移除 npx 装的那份。

4. 症状：设计草稿脱离现有界面、像换了个主题。 原因：设计系统文件缺失，或 replica 副本被当成了设计对象。解决：先确认 .superdesign/design-system.md 存在（缺失先跑 Design System Setup）；副本只放当前 UI 现状，不要在设计副本里添加新设计。

适用场景与注意

superdesign-skill 适合「想从想法快速走到可交付界面」的开发者、独立开发者和产品/UI 设计师，尤其是希望留在编码代理终端里完成设计的用户。 事实来自官方 README（来源）：

适用场景：重设计设置页、仪表盘等现有界面；从零或从现有代码库建立设计系统；为产品发布做演示文稿；批量制作海报、封面、社媒帖子与广告。

注意与限制：

• 设计代理不直接访问你的代码库，迭代现有页面时需先生成像素级 replica HTML 副本；
• 设计系统约定存放在 .superdesign/design-system.md，缺失时技能会先做 Design System Setup；
• 首次调用需要 CLI 与登录（superdesign.dev 账号），后续跨会话迭代会恢复已记住的项目上下文；
• 旧 superdesign VS Code 扩展已归档，勿混用。

项目链接

superdesign-skill 是 superdesigndev 维护的 MIT 开源项目，由 superdesign.dev 驱动。

前往插件详情页查看完整信息：superdesign-skill。

本页是基于该插件官方 README 独立重写的导读——权威文档和最新变更请以源头为准：superdesigndev/superdesign-skill。插件是安装时就在你机器上运行的第三方代码；收录不代表背书——安装前请自行审阅源码。