Repolode
提交项目
superdesigndev

superdesigndev/superdesign-skill

为 Claude Code、Cursor 等编码智能体提供设计能力的技能包，用于生成和迭代 UI、演示文稿与图形。

可替代:Figma

在 GitHub 查看官网
Star
953
Fork
76
未关闭 Issue
8
最近提交
3个月前

这是什么？

Superdesign 是一个面向编码智能体的设计技能包，可安装到 Claude Code、Cursor、Codex 等 70 多种智能体中。没有它时，智能体生成的界面往往千篇一律，多为组件库默认样式。安装后，智能体会读取现有代码作为上下文，从提示词库或网站 URL 收集风格参考，并在无限画布上生成多个可分支的设计草稿。

它覆盖的场景包括设计或改进页面与流程、在 .superdesign/design-system.md 中维护设计系统、根据确认后的大纲生成演示文稿，以及制作海报和社交媒体图片。草稿可以替换、分支出多个变体，也可以扩展为多页面的用户流程。这些操作通过配套的命令行工具 @superdesign/cli 完成，需单独安装并登录。

安装方式为 npx skills add，在 Claude Code 中也可以作为带命名空间的插件安装。该项目与 superdesign.dev 网页应用同步维护。

核心功能

  • 01在无限画布上生成多个可分支的 UI 设计草稿。
  • 02读取现有代码作为上下文，使设计与当前组件保持一致。
  • 03为项目建立并保存设计系统文件。
  • 04根据确认的有序大纲生成演示文稿。
  • 05检索提示词库，并从网站 URL 提取设计风格信息。

适用场景

  • 重新设计看起来像默认 AI 生成样式的设置页或仪表盘。
  • 从现有前端代码库中建立设计系统。
  • 根据确认的大纲制作产品发布演示文稿。
  • 为产品制作海报、封面或社交媒体图片。

快速上手

  1. 1

    为你的编程代理安装该技能

    npx skills add superdesigndev/superdesign-skill
  2. 2

    安装 Superdesign CLI

    npm install -g @superdesign/cli@latest
  3. 3

    登录 Superdesign

    superdesign login
  4. 4

    让代理设计内容，例如：/superdesign improve the design of my dashboard

使用前须知

  • 完整使用流程需要 superdesign.dev 账户，并通过 CLI 登录。
  • 该技能需配合编程代理使用，需先安装一个支持的代理才能发挥作用。
  • README 未说明 superdesign.dev 服务的费用或使用限制。

收录于专题

AI 编程智能体的 UI 设计技能Claude Code 工具、技能与插件AI 编程助手与编码 AgentAI Agent 技能包前端框架与界面组件

标签

#agent-skills#ai-design#claude-code#ui-design#frontend#coding-agent#design-system#claude-skill#claude-skills#cursor

常见问题

superdesign-skill 是什么？
为 Claude Code、Cursor 等编码智能体提供设计能力的技能包，用于生成和迭代 UI、演示文稿与图形。 Superdesign 是一个面向编码智能体的设计技能包，可安装到 Claude Code、Cursor、Codex 等 70 多种智能体中。没有它时，智能体生成的界面往往千篇一律，多为组件库默认样式。安装后，智能体会读取现有代码作为上下文，从提示词库或网站 URL 收集风格参考，并在无限画布上生成多个可分支的设计草稿。
superdesign-skill 可以免费使用吗？用的什么许可证？
superdesign-skill 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
superdesign-skill 还在维护吗？
半年内有更新。superdesign-skill 最近一次提交是在 2026年8月21日。
superdesign-skill 适合用来做什么？
重新设计看起来像默认 AI 生成样式的设置页或仪表盘。 从现有前端代码库中建立设计系统。 根据确认的大纲制作产品发布演示文稿。 为产品制作海报、封面或社交媒体图片。
superdesign-skill 怎么安装和运行？
为你的编程代理安装该技能: npx skills add superdesigndev/superdesign-skill 安装 Superdesign CLI: npm install -g @superdesign/cli@latest 登录 Superdesign: superdesign login 让代理设计内容，例如：/superdesign improve the design of my dashboard
在哪里获取 superdesign-skill？
源代码和安装说明在 GitHub 上：https://github.com/superdesigndev/superdesign-skill

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目