前言¶
用 DeepSeek Harness（DSH）或 Cursor、Claude Code 写前端时，逻辑往往很快落地，界面却容易陷入「AI slop」：默认 shadcn 堆叠、千篇一律的布局、缺少产品气质。社区插件库 SkillHub 上收录的 superdesigndev/superdesign-skill（GitHub 约 446 stars、31 forks，MIT 许可证，分类：工作流）正是针对这一痛点的方案。它由 superdesigndev（Superdesign dev, Inc.）维护，底层能力来自 superdesign.dev，既能把设计判断力注入编码智能体，也可作为 DSH 的 skill bundle 安装进 profile。
需要说明的是：SkillHub 是面向中国用户的 DSH 社区插件目录，与 DeepSeek / 幻方无官方从属关系；安装前请自行审阅源码与许可证，插件随当前 DSH 进程权限运行。
这是什么¶
superdesign-skill 一句话定位：面向 Claude Code、Cursor、Codex 等编码智能体的产品设计 skill，让智能体在无限画布上完成 UI、演示文稿与营销图形的方向探索、迭代与分支，最终产出可上线的前端，而不是「能跑但难看」的界面。
它与已归档的旧开源项目 superdesigndev/superdesign（VS Code 扩展）是不同产品线；当前维护的是本 skill 与 superdesign.dev 网页端。
与单纯换主题 preset 不同，Superdesign 会读你现有代码库提取设计系统上下文，搜集真实风格参考，产出可分支的设计草稿供你挑选细化，并在跨会话中记住项目、草稿与组件上下文，减少重复扫描仓库。
核心功能与亮点¶
1. 五大核心场景¶
官方 README 归纳了 skill 覆盖的主线能力：
- 设计或改进 UI（功能页、整页、流程）
- 创建演示文稿（可先审批大纲再生成）
- 创建图形素材（海报、封面、社媒图、广告等）
- 建立或从代码库提取设计系统
- 生成配套图片或视频
2. 灵感与风格工具（CLI）¶
通过全局安装的 @superdesign/cli，智能体可调用：
- 搜索提示词库：
superdesign search-prompts --query "<keyword>"或按--tags "style"筛选 - 读取提示词详情：
superdesign get-prompts --slugs "<slug>"（可加--full展开全文） - 从 URL 提取设计 DNA：
superdesign extract-website --url https://example.com --design-md
网页端还可浏览完整 Prompt Library。
3. 画布设计与迭代¶
CLI 侧支持创建项目、基于 HTML 模板播种基准草稿、分支/替换式迭代、多页流程编排、拉取设计 HTML 等。典型命令包括 create-project、iterate-design-draft、execute-flow-pages、get-design 等，输出面向智能体阅读的紧凑格式，必要时可加 --json 或 --full。
4. 与现有应用协同的设计约定¶
在真实代码库上改 UI 时，skill 约定：
- 设计系统文件：
.superdesign/design-system.md（缺失时应先完成设计系统搭建） - 当前 UI 像素级复刻：
.superdesign/replica_html_template/<页面>.html（只描述现状，不在此文件中做设计） - 复刻模板按路由命名（如
settings-profile.html），便于复用与更新
这套流程让 Superdesign 画布上的智能体获得「改之前长什么样」的上下文，因为画布本身无法直接访问你的仓库。
5. DSH 侧：skill provider 打包¶
仓库 package.json 声明包名 superdesign-dsh（当前版本 0.6.0），通过 dsh/index.js 向 DSH 注册 ctx.skills provider，发布内置的 skills/superdesign/ 目录。dsh/cordis.patch.yml 将 bundle 插入 profile，无需额外 MCP 或安装期配置；首次使用由 skill 引导完成 superdesign login。
安装与启用¶
方式一：安装为 DeepSeek Harness 插件（推荐本文读者）¶
在包含目标 profile 的环境下执行（将 demo 换成你的 profile 名）：
dsh plugin --profile demo add github:superdesigndev/superdesign-skill
该包刻意不包含 prepare 构建步骤，dsh plugin add 拉取源码即可启用，符合 DSH 对 git 依赖的安装预期。若需锁定版本，可使用 github:superdesigndev/superdesign-skill#<commit-sha>。
方式二：安装到 Cursor 等通用编码智能体¶
SkillHub 目录页与 README 给出的通用安装命令为：
npx skills add superdesigndev/superdesign-skill
适用于 vercel-labs/skills 所支持的 70+ 编码智能体生态。
方式三：Claude Code 插件市场¶
/plugin marketplace add superdesigndev/superdesign-skill
/plugin install superdesign@superdesign
安装后以 /superdesign:superdesign 调用。官方提醒：不要在 Claude Code 中再执行 npx skills add，否则会装出第二份未命名空间的重复 skill。
安装 Superdesign CLI 并登录¶
无论上述哪种入口，都需要全局 CLI 驱动画布与账号：
npm install -g @superdesign/cli@latest
superdesign login
典型用法示例¶
在对话中直接唤起¶
安装 skill 后，用自然语言或斜杠命令即可，例如：
/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 create an 8-slide presentation about our product launch
智能体会按 skill 流程读代码、搜参考、产出可分支草稿。
在已有页面上加功能的完整链路（摘要）¶
- 调研现有 UI 与工作流，向用户确认需求与审美偏好
- 确认
.superdesign/design-system.md是否存在，否则先搭建或从代码库提取 - 为相关页面编写像素级
replica_html_template（仅复刻现状） - 创建项目并播种基准草稿：
superdesign create-project \
--title "<feature>" \
--template .superdesign/replica_html_template/<file>.html
- 从返回的
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
- 分享预览链接收集反馈，继续迭代；满意后将 HTML 参考落回工程实现。
拉取草稿 HTML 示例：
superdesign get-design --draft-id <draftId> --output ./design.html
适用场景与注意事项¶
适合谁：
- 用 DSH / Cursor / Claude Code 做产品原型或正式前端的开发者、独立黑客
- 希望智能体参与 UI 方向探索，又不想离开终端工作流的产品 / UI 设计师
- 需要快速产出演示文稿、营销图，且希望与代码库设计系统保持一致的团队
注意事项：
- Superdesign 依赖
@superdesign/cli与superdesign login；未登录时画布相关能力不可用 replica_html_template必须是当前 UI 的忠实复刻，不要在其中预画「待设计区域」- 插件 / skill 以当前智能体或 DSH 进程权限运行，安装前请阅读 GitHub 仓库 与 MIT 许可证
- 除 skill / DSH bundle 外，也可直接使用 superdesign.dev 网页端，两条入口共享同一产品能力
结尾¶
如果你厌倦了「AI 写码、人类补审美」的循环，superdesign-skill 把设计方向、设计系统与可迭代画布接进 DSH 与主流编码智能体，让界面从 demo 质感走向可交付。不妨从 SkillHub 目录页了解收录信息，再到 GitHub 阅读完整 README，在本地 profile 执行 dsh plugin add 或 npx skills add，装 CLI 登录后即可用一句话发起第一次改版。
