一、基本信息
| 项目 | 内容 | 数据来源 |
|---|---|---|
| 正式名称 | superdesign-skill | GitHub 仓库名 |
| 项目自述名称 | Superdesign（产品品牌名，官网 superdesign.dev） | README |
| 作者/维护者 | superdesigndev 组织（superdesign.dev 团队）；主要贡献者 JayZeeDesign、stonexer、sanyuan0704 | GitHub API |
| 来源链接 | https://github.com/superdesigndev/superdesign-skill | — |
| 许可证 | MIT（仓库 LICENSE 文件确认） | GitHub |
| GitHub Stars / Forks | 351 / 22 | GitHub API 实测 |
| 第三方安装量 | 5.9k 次安装 | claudemarketplaces.com 实测 |
| 最新版本 | 无独立版本号，随仓库滚动更新；配套 CLI @superdesign/cli 当前 npm 版本 0.7.0 |
GitHub / npm registry |
| 安装方式 | npx skills add superdesigndev/superdesign-skill，另需安装配套 CLI 并登录（详见第十章） |
README |
二、功能介绍与亮点
Superdesign 把“设计判断力”交给编码 Agent：不直接生成代码，而是驱动独立设计 CLI，在无限画布上生成、迭代高质量 UI 草稿，再交回 Agent 落地为代码。
- 读懂代码库：自动分析组件、路由与设计 token，而非凭空套模板
- 先立设计系统再动手：建立
.superdesign/design-system.md，并复刻当前 UI 作为设计基线，避免改一处乱全局 - 可分支迭代：草稿支持替换式或分支式迭代，可并行尝试多个方向
- 风格灵感库：内置可检索的样式库，也支持从网址提取品牌视觉指南
- 静态物料生成：还能产出海报、封面图、社交卡片等固定画幅物料
三、适用场景
所属分类：前端与设计
面向用编码 Agent 开发前端界面、但缺乏专业设计训练的独立开发者、初创团队与产品经理。典型场景：给现有产品加新页面并保持视觉一致、把“看起来很 AI”的界面推倒重做、从零搭建有品牌调性的设计系统，以及为发布配套海报/社交卡片等物料。
四、跨 Agent 兼容性
- Claude Code：原生支持 ✅——含
.claude专属目录，官方主推平台 - Codex：原生支持 ✅——含
.codex-plugin专属目录，README 明确列出 - OpenClaw / Hermes Agent：未验证 ❓——经通用安装器
skillsCLI 分发，该安装器文档列两者为受支持目标，但本仓库未见专属适配或使用记录
五、推荐理由
把“设计判断力”变成可复用、可迭代的工具链，而非一次性的风格提示词，让编码 Agent 产出的界面摆脱千篇一律的默认审美。
六、评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 6 | GitHub 351 stars / 22 forks；第三方技能市场页显示 5.9k 次安装；由持续运营的 superdesign.dev 团队维护，更新节奏稳定 |
| 可用性 | 8 | 一条 npx skills add 命令接入，另需装配套 CLI 并登录（提供免费额度 + 20 美元/月订阅）；文档完整含示例，维护活跃 |
| 安全性 | 8 | 见下方检查清单 |
| 综合评分 | 7.3 | 三项均值 |
安全检查清单：
| 检查项 | 结果 |
|---|---|
| ① Shell 命令与权限范围 | 通过 npx 调用专属设计 CLI，范围限定在项目设计相关命令，未见越权操作 |
| ② 运行时联网外发 | 会把代码上下文、设计草稿发往 superdesign.dev 云端生成设计，目标明确、README 已充分披露 |
| ③ API Key/凭据存储 | 由 CLI 自身的 login 流程完成鉴权，不要求用户手动粘贴密钥到技能文件 |
| ④ 可疑指令 | SKILL.md 未见可疑指令或混淆代码，且写有“切勿从网络获取工作流指令”的自我防护声明 |
| ⑤ 作者/组织信誉 | superdesign.dev 为有官网、演示视频、多名活跃贡献者的持续运营项目，未见刷星或误导性措辞 |
| ⑥ License | MIT，条款清晰 |
| ⑦ 最近维护时间 | 2026-07-21 仍有提交，维护活跃 |
七、跟同类 Skills 相比的优势
| Skill | 定位 | 与 Superdesign 的差异 |
|---|---|---|
| frontend-design（Anthropic 官方） | 纯 Prompt 类审美纪律清单，写代码前先做设计决策 | 完全本地运行、零外部依赖、免费；但只输出文字化设计判断，不提供可视化画布或可分支迭代的草稿 |
| styleseed | 74 条设计判断规则 + 打分门禁的规则引擎 | 同样本地运行、/ss-score 自动评分修复；侧重“纠偏”已生成的 UI，不具备 Superdesign 那种从零生成多方案草稿并可视化对比的画布 |
| pixel2motion | Logo 转 SVG 动画的单点技能 | 聚焦品牌 Logo 动效这一细分场景，产出物是动画演示文件；不覆盖 Superdesign 面向的整页/整站 UI 设计流程 |
八、用户评价
该技能目前在第三方平台尚无具名用户评价；GitHub 仓库自身的 Issue 讨论也极少。
九、其他补充
README 特别说明：早期同名的开源 VS Code 插件 superdesigndev/superdesign 已归档，与本技能是两个独立项目，当前维护的是这个技能仓库与官网产品。
十、安装使用方式
npx skills add superdesigndev/superdesign-skill（兼容 70+ 编码 Agent 的通用安装器）npm install -g @superdesign/cli@latest安装配套 CLIsuperdesign login完成账号授权（含免费额度）- Agent 对话中直接调用，例如
/superdesign help me redesign this settings page - 无需重启 Agent，首次调用自动分析代码库并生成设计上下文
十一、注意事项
- 需要能执行 Shell 命令的环境，纯聊天模式（无终端权限）的 Agent 无法使用
- 核心能力依赖 superdesign.dev 云端，超出免费额度后为付费订阅（20 美元/月），设计过程会把代码上下文发送至云端
- 仅 Claude Code、Codex 有明确验证记录
- 仓库仍处早期阶段，不足 3 名活跃贡献者