Superdesign 设计技能
让编码智能体具备真正的设计判断力，告别千篇一律的 AI 风格界面，直接产出可上线的高质量 UI、演示文稿和营销图形。
文档在关键风险点有明确披露：生成前要求免费报价并逐字确认积分消耗（confirm-generation --credits 必须与报价一致），禁止批量上传仓库、禁止将本地路径写入草稿 HTML，指令明确区分参考素材/品牌资产/内容素材。但整个技能把用户代码上下文（含完整组件源码）发送到第三方云端 superdesign.dev，数据流出范围与保留策略未说明；CLI 通过 npx @latest 拉取未锁定版本，供应链不可审计；无回滚/删除机制说明。扣分项：数据流透明度不完整、依赖未锁定、缺少恢复路径。
静态阅读显示内聚性较好：决定性的 init 完成判定、Step 1 的确定性检查、明确的失败规则（至多重试一次，登录失败即停，提供 design-with-your-model 降级路径）、幂等的 confirm-generation 恢复规则。但全部关键路径依赖远端 CLI 与云端服务，本地无任何测试、无示例输出、无对异常输入（如 payload 400 的具体表现）的验证。静态上限 10，扣分项：无测试覆盖、错误反馈质量未经证实。
触发语义写得非常细致：description 覆盖 UI/演示/图形/资产各场景，SKILL.md 对有码/无码、图形/演示/资产生成的 init 豁免规则明确，非适用边界（如无 shell 环境即停）清楚。但核心功能完全依赖 npx 拉取的 CLI 与 superdesign.dev 海外云端服务（登录、画布、生成均在其上），对中国大陆网络的可达性未声明且很可能受限；无中文支持说明。扣分项：目标环境可达性风险未披露。
信息架构分层良好（SKILL.md 主流程 + references/ 按场景渐进加载），MIT 许可明确，README 区分了旧 VS Code 扩展与新技能，废弃转发文件有清理计划。但技能本身无版本号或变更日志（package. 的 0.6.0 面向另一打包格式）、无已知限制章节、维护责任与更新路径依赖未验证的发布方；INSTALL.md 与 CLI 行为之间的假设较多。扣分项：版本治理缺失、维护路径不透明。
工作流设计完整（简报确认、大纲审批、分支迭代、降级路径），且有合理的边际价值论证（读取代码上下文、跨模型对比、跨会话恢复）。但静态审阅无法验证任何实际产出可直接使用；README 的效果主张仅配一个 YouTube 演示视频；生成消耗积分，成本收益比未量化。静态上限 7，扣分项：无代表性输出证据、成本未披露完整。
仓库内无可执行的测试、无 CI 证据材料、无第三方复现；仅有营销性 README、演示视频链接和自述的工作流。安装命令与 CLI 标志声称可在 --help 中核实，但本审阅未执行。扣分项：核心价值主张几乎全部为作者自述，缺乏可审计的一手材料。
- 技能将用户代码上下文与设计数据上传至海外第三方云服务 superdesign.dev，数据流出范围与保留策略未披露；中国大陆网络可达性存疑，建议自行测试后再用于生产。
- CLI 通过 npx @latest 拉取未锁定版本，供应链不可审计；建议审查 CLI 源码或锁定版本。
- 图像/视频生成消耗积分，成本在生成前才会以报价形式出现；请逐次确认报价。
- 静态审阅未执行任何命令；所有工作流效果均为文档自述，未经独立复现。
- 发布方未经 FollowSkills 验证，维护责任与更新路径不明确。
这个 Skill 能做什么，适合哪些场景？
Superdesign 是一个面向编码智能体（Claude Code、Cursor、Codex 等 70+ 客户端）的设计技能，通过命令行驱动 superdesign.dev 的 AI 产品设计智能体。它在无限画布上生成并迭代 UI 草稿、幻灯片和图形，支持多个主流模型并排对比探索。与单纯换主题的技能不同，它会读取你的代码库建立设计上下文，把设计融入现有设计系统。它还支持跨会话记忆，续做设计时无需重复分析代码库。
技能运行完全依赖其 CLI（npx --yes @superdesign/cli@latest）：先做预检和登录（superdesign login），再按场景路由——有真实前端代码库时先运行 repo init，把组件、布局、路由、主题、页面依赖树等六份上下文写入 .superdesign/init/；无代码库或做海报/演示等独立任务时改为对话收集设计简报。之后通过 CLI 创建项目、基于现有 UI 的像素级 HTML 副本播种基线草稿，用 create-design-draft / iterate-design-draft（replace 或 branch 模式）生成和迭代设计，用 execute-flow-pages 做多页面流程，用 create-presentation 生成幻灯片，用 extract-website 从任意 URL 提取设计基因到 design-system.md，并可用 search-prompts 检索灵感提示词库。每次命令输出包含画布 URL 和预览链接；部分场景还支持生成配套图片/视频资产。
- 独立开发者或小团队用 Claude Code 改版设置页、仪表盘等界面，希望草稿看起来经过设计而非默认 shadcn 风格
- 已有前端代码库的工程师想让智能体先分析代码、建立 design-system.md，再在其上设计新功能页面
- 产品团队需要从竞品或参考网站 URL 提取设计语言（配色、字体、令牌）到可复用的设计系统文件
- 需要为产品发布制作可编辑的 PPTX 演示文稿或海报、社媒图等营销图形的创作者
- 想在同一任务里对比多个顶级设计模型的不同方向草稿，再选定一个继续细化
- 在多次会话间持续推进同一项目，希望智能体记住项目、草稿和上下文包直接热恢复
这个 Skill 有哪些优点和局限？
- 不止换皮肤：读取真实代码库上下文，把设计融入现有设计系统而非套用默认组件库
- 支持多模型并排对比与 replace/branch 两种迭代模式，便于探索不同设计方向
- 跨会话记忆：.superdesign/resume. 记录项目、草稿和上下文包，续做免于重复代码库分析
- 场景覆盖完整：UI、多页流程、演示文稿（可导出 PPTX）、海报图形、图片/视频资产
- MIT 许可，支持 70+ 编码智能体，也可直接用 superdesign.dev 网页版
- 完全依赖其闭源 CLI 和 superdesign.dev 云服务，需登录账号，生成消耗付费额度
- 没有 shell 执行能力的环境（如无 Work 模式的聊天界面）无法使用
- 无代码库的纯前端环境证据（如 Windows 原生、CI headless 浏览器场景）未在文档中详述
- 仓库未展示测试套件；README 提醒旧版开源 VS Code 扩展已归档，与本技能是不同项目，注意区分
如何安装这个 Skill？
任意编码智能体：运行 npx skills add superdesigndev/superdesign-skill。Claude Code 也可作为插件安装以保持命名空间：先 /plugin marketplace add superdesigndev/superdesign-skill，再 /plugin install superdesign@superdesign（两种方式不要同时使用）。无论哪种方式，还需全局安装 CLI：npm install -g @superdesign/cli@latest，然后运行 superdesign login 完成认证。技能路径为 skills/superdesign/SKILL.md。
如何使用这个 Skill？
安装后直接与智能体对话即可，例如："/superdesign 帮我重新设计这个设置页"、"/superdesign 从当前代码库搭建设计系统"、"/superdesign 创建一份 8 页的产品发布演示"。智能体会先做 CLI 预检确认登录状态，判断工作区是否有前端代码库（决定走 init 还是简报路径），然后在画布上生成草稿。每个项目/草稿命令会返回 canvas 链接（可加 ?live=1 看实时生成）和 preview 链接，你可以直接在画布上留反馈让智能体迭代。注意：每次生成消耗额度，智能体会在生成前让你确认方向。
这个 Skill 与同类方案有什么区别？
README 明确与'风格预设类技能'对比：后者只是换主题或换组件库，Superdesign 则把设计融入你现有的设计系统，读取代码上下文并产出可分支迭代的草稿。它也替代了其自身已归档的旧开源 VS Code 扩展 superdesigndev/superdesign。