Superdesign 设计技能
为 Claude Code、Cursor 等 70+ 编码代理注入设计判断力，让 AI 生成的界面不再千篇一律，而是可交付、有品味的前端。
证据显示：SOP 中多处明确要求在创建设计系统、选择方向、开始设计前向用户提问（用户确认得 2 分）。但扣分点明确：该技能要求 agent 读取用户代码库并把 replica HTML/设计上下文上传到 superdesign.dev 云端服务，文件中完全没有说明数据流向的边界、上传内容的范围或敏感数据处理规则（敏感数据处理 0 分）；依赖未经验证发布者的全局 npm CLI（依赖安全 1 分）；无回滚/卸载说明（回滚 0 分）；对外部效果的描述仅限于营销语言。
证据显示：README 工作流写得条理清晰、命令有索引优先的调用约定。扣分点：package. 描述其为 'DeepSeek Harness skill bundle'（dsh/cordis.patch.yml），与 README 主打的 Claude Code/Cursor skill 定位明显不一致，存在自相矛盾（自一致性 1 分）；所有核心功能依赖远端 CLI 与云服务，可用性完全无法从文件中核实（依赖可用性 1 分）；文件中无任何失败/错误路径的说明（失败消息 1 分）。
证据显示：明确列出 5 类核心场景、目标用户（开发者/独立开发者/UI 设计师），并对 replica HTML、design-system.md 等有清晰的'该做/不该做'规则（能力边界 2 分、受众与场景 2 分）。触发方式明确为 /superdesign 前缀（触发精度 2 分），且明确区分 Claude Code 插件安装与 npx 安装并警告不要重复安装（环境适配 2 分）。未扣满的原因：多环境支持（'70+ agents'）仅为外部断言。
证据显示：LICENSE 为完整 MIT 文本（许可 3 分）；安装说明详尽，包含 Claude Code 插件路径与重复安装警告（安装说明 2 分）；文档结构清晰（信息架构 2 分）。扣分点：package. 名称 superdesign-dsh 与仓库名 superdesign-skill 不一致（命名稳定性 1 分）；无 CHANGELOG，仅 0.6.0 版本号（版本与变更 1 分）；无已知局限章节（1 分）；无 FAQ，示例仅有命令示例（1 分）；维护方为未验证的 'Superdesign dev, Inc.'，更新路径依赖闭源云产品（维护责任 1 分）。
证据显示：产出物形态明确（HTML 草稿、design-system.md、演示文稿大纲），命令输出有 agent 优化的约定，可用性尚可（输出可用性 2 分）。扣分点：'Stop shipping AI-slop UI' 与 '设计判断力' 的核心价值主张完全是营销断言，静态审查无法验证其相对 style-preset 技能的差异化价值（边际价值 1 分）；云端服务定价、配额、数据留存均未知，成本收益无法评估（成本收益 1 分）。
证据显示：命令、路径、文件约定都可在安装后直接核对（claim_traceability 未满分原因：'70+ 支持的 agent'、demo 视频、与 vercel-labs/skills 的关系均为外部链接断言，本次未提供佐证文件，评 1 分）；README、package.、LICENSE 之间缺少相互印证（如包名与仓库名冲突），跨来源印证弱（1 分）；营销语言（'AI slop'、'infinite canvas'）与事实陈述混杂，未做区分（1 分）。
- 该技能会引导 agent 读取代码库并将 replica HTML/设计上下文上传到 superdesign.dev 云端，文件中没有任何数据流边界或敏感信息处理说明，使用前请评估代码外发风险。
- package. 自述为 'DeepSeek Harness skill bundle'，与 README 的 Claude Code/Cursor skill 定位不一致，包名 superdesign-dsh 与仓库名也不一致，安装前请核实实际安装内容。
- 核心功能依赖未经验证发布者的全局 npm CLI 和闭源云服务，无定价/配额/数据留存信息，且无回滚或卸载指引。
- 所有能力主张（70+ agents、设计质量差异化）均为静态不可验证的营销断言，建议先在非敏感项目上试用。
这个 Agent 能做什么，适合哪些场景？
Superdesign 是一个面向编码代理的设计技能，仓库为 superdesigndev/superdesign-skill，由 superdesign.dev 这一 AI 产品设计代理驱动。它解决的核心问题是：编码代理写的代码不错，但产出的界面往往是通用布局和默认组件的"AI 味"产品。安装后，代理可以寻找真实的设计方向，在无限画布上生成并迭代高质量 UI、演示文稿和图形，全程不离开终端。它不是简单的主题预设技能，而是会读取你的代码库获取上下文、收集真实风格参考，并生成可分支、可精修的设计草稿；设计完成后首次基于真实代码库设计时，技能会记住项目、草稿、提取的组件和预算化的源上下文包，后续迭代无需重新发现代码库。它与旧版已归档的 superdesign VS Code 扩展是不同项目，当前维护的产品是本技能和 superdesign.dev 网页应用。采用 MIT 许可证。
技能通过 superdesign CLI 驱动设计代理，覆盖五类核心场景：(1) 设计或改进 UI（功能/页面/流程）；(2) 基于可编辑的已批准大纲创建演示文稿；(3) 创建图形（海报、封面、社交帖、广告）；(4) 设置或提取设计系统；(5) 生成配套图片或视频。典型流程是：代理先调查现有 UI 和工作流，把设计系统写入 .superdesign/design-system.md（缺失时先跑设计系统设置流程）；然后在 .superdesign/replica_html_template/<name>.html 中创建现有 UI 的像素级复刻（仅复制现状，不做任何设计）；用 superdesign create-project --title "X" --template <replica.html> 创建项目并生成基线草稿（返回 draftId）；再用 superdesign iterate-design-draft --draft-id <draftId> -p "..." --mode branch --context-file .superdesign/design-system.md 分支出多个方向。灵感与风格工具包括 superdesign search-prompts（搜索提示库）、superdesign get-prompts（按 slug 读取提示详情）、superdesign extract-website --url <url> --design-md（从任意 URL 提取风格指南、design tokens、品牌资产）。流程页面用 superdesign execute-flow-pages 执行，导出用 superdesign get-design --draft-id <id> --output ./design.html，演示用 superdesign create-presentation 基于批准的 slides. 大纲创建。
- 独立开发者用 Claude Code 开发产品，希望重新设计设置页但不想拿到千篇一律的默认 shadcn 界面
- 前端工程师要在现有代码库基础上从零建立设计系统，用 extract-website 收集风格参考再落地为 design-system.md
- 产品/UI 设计师想直接在编码代理的终端工作流里迭代 dashboard 设计，通过 branch 模式一次探索"暗色主题"、"极简留白"等多个方向
- 需要为产品发布会制作演示文稿的团队，先在聊天中批准幻灯片大纲再用 create-presentation 生成
- 市场或运营人员需要海报、封面、社交帖或广告图等图形素材，直接让代理生成
- 多页面用户旅程（如注册→支付流程）的设计，用 execute-flow-pages 批量执行
这个 Agent 有哪些优点和局限？
- 差异化在于真正读取你的代码库并把设计"融入"现有设计系统，而非像风格预设技能那样只是换主题或组件库
- 跨会话连续性：首次基于真实代码库设计后会记住项目、草稿、提取的组件和源上下文预算包，后续未变更的迭代无需重复代码库发现
- 通过 npx skills 支持 70+ 编码代理（Claude Code、Cursor、Codex 等），不锁定单一编辑器；在 Claude Code 还可作命名空间插件随 /plugin update 更新
- 能力覆盖面广：UI 设计、演示文稿、图形（海报/广告）、设计系统提取、图片/视频生成，另有可搜索的提示库和从任意 URL 提取设计 DNA 的工具
- 流程有纪律：强制设计系统文件位置（.superdesign/design-system.md）、复刻模板只含现状不许夹带设计、分支模式让用户给出方向而由设计专家填充细节
- 强依赖 superdesign.dev 云服务和 @superdesign/cli 账户登录，核心设计生成不在本地运行，存在服务可用性和数据外发考虑
- 没有 superdesign CLI 登录与 superdesign.dev 账户就无法工作，属于订阅/账户绑定的采用成本（定价信息在源中未说明）
- 在现有应用上设计时必须先手工产出像素级 HTML 复刻（replica_html_template），且规则严格禁止在其中做任何设计或占位，前期准备工作量不小
- 旧版开源 VS Code 扩展（superdesigndev/superdesign）已归档且是不同项目，从旧版迁移的用户需要区分并切换到新技能/网页应用
- iterate-design-draft 的自动探索模式（--count）默认不推荐使用，提示词只应给方向不应指定颜色风格——对习惯精确控制的设计师是使用约束
如何安装或部署这个 Agent？
1) 安装技能（任一方式，适用于 70+ 支持的编码代理）：
npx skills add superdesigndev/superdesign-skill或作为 Claude Code 插件安装（保持命名空间、可用 /plugin update 更新）：
/plugin marketplace add superdesigndev/superdesign-skill
/plugin install superdesign@superdesign注意：在 Claude Code 中不要同时运行 npx skills add，否则会安装第二份无命名空间的副本。
2) 安装并登录技能驱动的 CLI：
npm install -g @superdesign/cli@latest
superdesign login安装需要 Node.js/npm 运行环境和网络连接；登录需要 superdesign.dev 账户。
如何使用这个 Agent？
在支持的编码代理中直接对话或调用技能命令，例如：
/superdesign:superdesign help me redesign this settings page（Claude Code 插件形式的调用名）
或自然语言："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"。
技能遵循固定 SOP：先调查现有 UI → 确保存在 .superdesign/design-system.md → 用会话的用户输入机制（或聊天）询问需求和品味偏好 → 询问用户是走 superdesign 设计还是直接实现 UI → 若走 superdesign，创建像素级复刻模板、create-project 建项目、iterate-design-draft 分支迭代。关键 CLI 命令：superdesign search-prompts / get-prompts / extract-website（灵感）、create-project / iterate-design-draft --mode branch|replace / execute-flow-pages / get-design（画布）、create-presentation（演示）。命令输出默认为代理优化的紧凑格式（TOON 加 help[] 提示），仅在需要完整机器可读数据时加 --。
这个 Agent 与同类方案有什么区别？
README 明确对比了"风格预设（style-preset）类技能"：后者只是替换主题或组件库，而 Superdesign 会读取代码获取上下文、收集真实风格参考并把设计融入你现有的设计系统。它与已归档的旧项目 superdesigndev/superdesign（VS Code 扩展）是不同产品。