© 2026FindAgent  · @simprr
返回列表
s

superdesigndev/superdesign

AI Product Design Agent - Open Source

⭐

6.2k

Stars

🔱

692

Forks

👁

44

Watchers

📋

72

Issues

TypeScriptNOASSERTION创建于 2025/6/20更新于 今天
在 GitHub 上查看访问主页
README
由 Gemini 翻译整理

🧠 SuperDesign — 集成在 IDE 中的 AI 设计助手

🆕 新功能: SuperDesign Chrome 扩展程序 - 克隆任何网站及 UI


SuperDesign Cover

作者: AI Jason

SuperDesign 是第一个直接运行在 IDE 内部的开源设计助手。 你可以直接通过自然语言提示词(Prompt)生成 UI 原型图、组件和线框图。 它可与 Cursor、Windsurf、Claude Code 以及标准的 VS Code 无缝协作。

✨ “既然可以探索十种方案,为什么要只设计一种呢?” — SuperDesign

加入 Discord

在 Hackernews 为我们投票

安装指南


🎬 演示视频(点击播放)

SuperDesign Demo


🚀 核心功能

  • 🖼️ 产品原型(Product Mock): 通过单一提示词瞬间生成完整的 UI 界面
  • 🧩 UI 组件(UI Components): 创建可复用的组件,直接拖入代码中使用
  • 📝 线框图(Wireframes): 探索低保真布局,实现快速迭代
  • 🔁 分支与迭代(Fork & Iterate): 轻松复制并演进你的设计方案
  • 📥 提示词转 IDE(Prompt-to-IDE): 将提示词复制到你常用的 AI IDE(Cursor, Windsurf, Claude Code)中

🧠 可与 Cursor, Windsurf, Claude Code, VS Code 完美配合

👉 点击此处安装


🛠️ 快速入门

  1. 从 Cursor/VS Code 插件市场安装扩展
  2. 打开 SuperDesign 侧边栏面板
  3. 输入提示词(例如:"设计一个现代化的登录界面")
  4. 查看生成的原型图、组件和线框图
  5. 进行分支(Fork)、微调,并将代码粘贴到你的项目中

我可以使用自己的 Claude Code 或 Cursor 订阅吗?

可以。在初始化 SuperDesign 扩展后,系统会添加一些 Cursor/Claude Code 规则,这样你就可以提示 Agent 进行设计,并在 SuperDesign 画布中预览(快捷键:cmd + shift + p -> 选择 superdesign: open canva)。

如果你使用的是 Cursor,我强烈建议将 design.mdc 中的提示词复制出来,并在 Cursor 中创建一个具有相同系统提示词(System Prompt)的自定义模式(Custom Mode);这会为你带来更好的表现。

操作说明(点击播放): Instruction video

如何运行本地兼容 OpenAI 的服务器?

  1. 在 AI 模型提供商(Ai Model Provider)中选择 OpenAI
  2. 在 OpenAI API Key 输入框中随意输入内容
  3. 在 OpenAI Url 输入框中添加你的 URL(例如:http://127.0.0.1:1234/v1,适用于 LM Studio)

📂 我的设计保存在哪里?

你生成的设计会自动保存在本地的 .superdesign/ 文件夹中。


❓ 常见问题

它是免费且开源的吗?
是的!我们是开源项目 — 你可以随意 Fork、扩展或重新制作它。

我可以自定义设计助手吗?
可以 — 你可以使用自己的提示词模板、修改行为或添加自定义命令。

SuperDesign 可以更新现有的 UI 吗?
当然可以 — 选择一个组件,描述你需要修改的地方,剩下的交给 Agent 处理。

如何参与贡献?
欢迎提交 Pull requests。欢迎 Star 本仓库并在 Discord 加入我们!


🔗 相关链接

  • 🌐 官方网站:https://superdesign.dev/ide-extension
  • 📦 GitHub:https://github.com/superdesigndev/superdesign
  • 💬 Discord:加入社区
  • 🐦 Twitter / X:@SuperDesignDev
贡献者
JaCbR
项目信息
默认分支main
LicenseOther
创建时间2025/6/20
最近更新今天
GAI 中文摘要

SuperDesign 是一款集成在 IDE 中的开源 AI 设计代理工具,旨在通过自然语言提示词直接生成 UI 原型、组件和线框图。该项目通过将设计流程引入代码开发环境,帮助开发者高效地进行界面构思与迭代,极大简化了从设计草图到代码实现的转化过程。

基于自然语言提示词即时生成完整的 UI 界面预览。 自动创建可直接复用并植入项目代码的 UI 组件。 支持快速生成低保真线框图,以便进行高频次的方案探索与迭代。 提供便捷的复制与分支功能,允许用户对现有设计进行修改和演变。 无缝对接 Cursor、Windsurf、Claude Code 等 AI 驱动的开发环境,实现设计即代码的流畅工作流。

该项目适用于需要快速构建产品原型的前端开发者、独立开发者及 UI/UX 设计师,特别是在使用 AI 辅助编码工具进行敏捷开发时,能够极大提升界面设计与实现的协作效率。