🧠 AI设计代理

SuperDesign

首个生活在IDE中的开源设计代理，通过自然语言提示生成UI mockups、组件和线框图，让设计变得简单高效。

1.6K+ GitHub Stars
TypeScript Language
MIT License
📦 查看源码 🚀 快速开始
🎨
AI Design Agent
在IDE中直接生成设计

核心特性

为什么只设计一个选项，当你可以探索十个？SuperDesign让设计变得更加高效和创新。

🖼️

Product Mock

从单个提示瞬间生成完整的UI界面，支持多种设计风格和布局选择。

🧩

UI Components

创建可重用的组件，直接拖拽到你的代码中，支持React、Vue等主流框架。

📝

Wireframes

探索低保真布局，快速迭代设计想法，为产品原型提供坚实基础。

🔁

Fork & Iterate

轻松复制和演进设计，创建多个变体，找到最佳解决方案。

📥

Prompt-to-IDE

将提示复制到Cursor、Windsurf、Claude Code等AI IDE中，无缝集成开发流程。

⚡

多AI支持

支持Anthropic、OpenAI、OpenRouter等多个AI提供商，选择最适合的模型。

技术架构

基于现代Web技术栈构建，支持多种AI模型和IDE环境

⚛️

前端技术

  • React 19.1.0 + TypeScript
  • VS Code Extension API
  • ESBuild 构建工具
  • React Markdown 渲染
  • Lucide React 图标库
🤖

AI 集成

  • Anthropic Claude API
  • OpenAI GPT 系列
  • OpenRouter 多模型
  • AI SDK 统一接口
  • 流式响应支持
🛠️

开发工具

  • 文件读写工具
  • 代码编辑工具
  • Bash 命令执行
  • 文件搜索和匹配
  • 主题定制工具

安装指南

选择适合你的安装方式，快速开始使用SuperDesign

1. 打开扩展市场

在VS Code、Cursor或Windsurf中打开扩展市场

快捷键 
Ctrl+Shift+X (Windows/Linux)
Cmd+Shift+X (macOS)

2. 搜索SuperDesign

在搜索框中输入"superdesign"

搜索关键词 
superdesign

3. 安装扩展

点击"Install"按钮完成安装

4. 配置API密钥

安装完成后，配置你的AI API密钥

命令面板 
Ctrl+Shift+P > SuperDesign: Configure API Key

1. 下载VSIX文件

从GitHub Releases页面下载最新的.vsix文件

下载链接 
https://github.com/superdesigndev/superdesign/releases

2. 安装VSIX文件

使用VS Code命令安装扩展

命令行 
code --install-extension superdesign-0.0.11.vsix

1. 克隆仓库

Git 
git clone https://github.com/superdesigndev/superdesign.git
cd superdesign

2. 安装依赖

NPM 
npm install

3. 构建扩展

构建 
npm run package

4. 开发模式

开发 
npm run watch

使用示例

通过实际示例了解SuperDesign的强大功能

🎨 生成登录界面

Product Mock

使用自然语言描述生成完整的登录界面设计

提示示例 
设计一个现代化的登录界面，包含邮箱和密码输入框，
使用深色主题，添加社交登录按钮，整体风格简洁专业

🧩 创建按钮组件

UI Component

生成可重用的React按钮组件

提示示例 
创建一个React按钮组件，支持primary、secondary、danger三种样式，
包含loading状态，支持图标，使用TypeScript

📝 设计仪表板布局

Wireframe

快速创建仪表板的线框图布局

提示示例 
设计一个数据仪表板的线框图，包含侧边栏导航、
顶部搜索栏、主要内容区域和统计卡片