一、安装扩展
打开 IDE（支持 Cursor、Windsurf、VS Code）。
进入扩展市场：在侧边栏点击扩展图标（或按快捷键）。
搜索并安装：搜索“SuperDesign”，点击安装按钮[^5][^7][^12]。
二、初始化扩展（推荐）
运行初始化命令：在 IDE 中按
Cmd + Shift + P（或Ctrl + Shift + P），输入并执行superdesign: initialize。验证安装：执行
superdesign: open canva打开设计画布，确认扩展正常工作[^6]。
如果使用 Cursor，建议将
design.mdc中的提示词复制到 Cursor 自定义模式中，以提升生成效果[^6]。
三、使用 SuperDesign 生成设计
1. 输入设计提示
打开侧边栏：点击 IDE 侧边栏的 SuperDesign 图标，或使用快捷键打开面板。
输入自然语言描述：在侧边栏面板中输入具体的设计需求，例如：
“设计一个现代风格的登录页面，包含用户名、密码输入框和登录按钮”
“创建一个移动端电商产品卡片，简约风格，蓝色主题”[^5][^6][^12]
2. 查看与选择设计方案
生成设计：输入提示后，SuperDesign 会快速生成多个 UI 设计方案、组件或线框图。
预览与比较：在画布中查看不同方案，选择最适合的进行后续调整[^5][^6][^12]。
3. 调整与迭代设计
分叉设计：使用“分叉”功能创建设计变体，快速尝试不同布局、颜色或样式。
实时调整：在画布中拖拽元素调整布局，实时预览效果，满意后导出代码或图像[^5][^6][^12]。
四、导出与应用设计
导出代码：点击“导出”按钮，选择导出为 HTML、CSS 或图像文件，直接应用到项目中。
本地管理：所有设计文件保存在项目目录下的
.superdesign/文件夹中，方便随时查看和复用[^6][^7][^12]。
五、进阶使用技巧
并行设计：一次输入可生成多个设计变体（如 3 种不同风格的计算器 UI），加速创意验证[^12]。
修改现有组件：选中已有 UI 代码，运行
superdesign: update，输入修改需求（如“将按钮颜色改为红色，增大字体”），快速更新设计[^6][^12]。
六、常见问题解答
表格
复制
| 问题 | 解答 |
|---|---|
| 是否免费 | 完全免费，开源项目[^6][^12] |
| 支持哪些 IDE | Cursor、Windsurf、VS Code，未来可能扩展更多[^1][^7][^12] |
| 如何保存设计 | 自动保存在本地 .superdesign/ 目录，方便随时查看和复用[^6][^12] |
| 能否生成复杂 UI | 可以，但效果取决于描述的详细程度，建议提供具体需求[^6][^12] |
通过以上步骤，你可以轻松在 IDE 中使用 SuperDesign 快速生成、调整和管理 UI 设计，大幅提升设计与开发效率。