s
superdesigndev/superdesign
AI Product Design Agent - Open Source
TypeScriptNOASSERTION创建于 2025/6/20更新于 今天
README
由 Gemini 翻译整理
🧠 SuperDesign — 集成在 IDE 中的 AI 设计助手
🆕 新功能： SuperDesign Chrome 扩展程序 - 克隆任何网站及 UI
作者： AI Jason
SuperDesign 是第一个直接运行在 IDE 内部的开源设计助手。 你可以直接通过自然语言提示词（Prompt）生成 UI 原型图、组件和线框图。 它可与 Cursor、Windsurf、Claude Code 以及标准的 VS Code 无缝协作。
✨ “既然可以探索十种方案，为什么要只设计一种呢？” — SuperDesign
🎬 演示视频（点击播放）
🚀 核心功能
- 🖼️ 产品原型（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 完美配合
👉 点击此处安装
🛠️ 快速入门
- 从 Cursor/VS Code 插件市场安装扩展
- 打开
SuperDesign侧边栏面板 - 输入提示词（例如："设计一个现代化的登录界面"）
- 查看生成的原型图、组件和线框图
- 进行分支（Fork）、微调，并将代码粘贴到你的项目中
我可以使用自己的 Claude Code 或 Cursor 订阅吗？
可以。在初始化 SuperDesign 扩展后，系统会添加一些 Cursor/Claude Code 规则，这样你就可以提示 Agent 进行设计，并在 SuperDesign 画布中预览（快捷键：cmd + shift + p -> 选择 superdesign: open canva）。
如果你使用的是 Cursor，我强烈建议将 design.mdc 中的提示词复制出来，并在 Cursor 中创建一个具有相同系统提示词（System Prompt）的自定义模式（Custom Mode）；这会为你带来更好的表现。
操作说明（点击播放）：
如何运行本地兼容 OpenAI 的服务器？
- 在 AI 模型提供商（Ai Model Provider）中选择 OpenAI
- 在 OpenAI API Key 输入框中随意输入内容
- 在 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