superdesign

GitHub
6.3k 695 非常简单 1 次阅读 今天NOASSERTIONAgent插件
AI 解读 由 AI 自动生成,仅供参考

SuperDesign 是一款开源的 AI 产品设计助手,它直接嵌入在开发者熟悉的 IDE(如 VS Code、Cursor、Windsurf 等)中。只需输入自然语言描述,它就能即时生成完整的 UI 界面原型、可复用的代码组件以及低保真线框图,让设计构思瞬间可视化。

对于需要在编码过程中快速验证想法或构建原型的开发者而言,SuperDesign 有效解决了传统设计中“写代码”与“画界面”割裂的痛点。它无需切换繁琐的外部设计软件,让用户能在编码环境中直接通过对话探索多种设计方案,并支持对现有界面进行迭代修改,极大提升了从创意到实现的效率。

这款工具特别适合全栈开发者、前端工程师以及希望快速原型化的产品团队。其独特的技术亮点在于深度的 IDE 集成能力:生成的提示词可无缝流转至 Cursor 或 Claude Code 等 AI 编程环境继续开发;同时支持连接本地部署的 OpenAI 兼容模型(如 LM Studio),兼顾了隐私性与灵活性。作为一个完全开源的项目,SuperDesign 鼓励用户自定义智能体行为或贡献代码,真正实现了设计流程的开放与自由。

使用场景

一位全栈开发者正在为初创公司快速构建一个 SaaS 仪表盘,需要在半天内完成从概念到前端代码的落地。

没有 superdesign 时

  • 设计割裂:开发者需在 Figma 中手动绘制草图,再切换回 VS Code 编写代码,上下文频繁中断导致效率低下。
  • 迭代缓慢:调整布局或配色需要重新绘图并手动修改 CSS,尝试三种不同方案往往耗费数小时。
  • 组件复用难:缺乏标准化的 UI 组件库,每次新建页面都要重复编写按钮、卡片等基础代码,容易出错。
  • 沟通成本高:非设计出身的开发者难以将抽象需求转化为具体视觉稿,常因“感觉不对”而反复返工。

使用 superdesign 后

  • IDE 内闭环:直接在 Cursor 侧边栏输入“生成现代深色模式仪表盘”,superdesign 即刻产出高保真界面与对应代码,无需切换工具。
  • 极速多方案探索:通过"Fork & Iterate"功能,一键复制并微调出十种不同布局风格,几分钟内即可确定最佳视觉方向。
  • 智能组件生成:输入自然语言指令即可创建可复用的 React/Vue 组件,直接拖入项目工程,确保代码规范统一。
  • 实时反馈优化:选中已有组件描述“增加圆角并改变主色调”,superdesign 自动更新设计与代码,实现所见即所得的敏捷开发。

superdesign 将原本耗时数天的“设计 - 编码”循环压缩至分钟级,让开发者能专注于业务逻辑而非视觉细节的反复打磨。

运行环境要求

操作系统
  • 未说明 (作为 IDE 扩展,通常支持 Windows
  • macOS
  • Linux)
GPU

未说明

内存

未说明

依赖
notes该工具主要作为 IDE(如 Cursor, Windsurf, VS Code)的扩展插件运行,而非独立的本地深度学习模型服务。因此 README 中未列出具体的 GPU、内存或 Python 版本要求。它支持连接外部 AI 模型提供商(如 OpenAI API 或本地兼容服务器如 LM Studio),若用户选择自行部署本地模型服务,则需参考相应模型(如 LLM)的硬件需求。设计文件本地存储在 .superdesign/ 目录中。
python未说明
Cursor
Windsurf
Claude Code
VS Code
superdesign hero image

快速开始

🧠 SuperDesign — 你的 IDE 中的 AI 设计代理

🆕 新增: SuperDesign Chrome 扩展 - 克隆任何网站和 UI


SuperDesign 封面

作者: AI Jason

SuperDesign 是首个开源设计代理,直接嵌入到你的 IDE 中。
你可以通过自然语言提示直接生成 UI 原型、组件和线框图。
与 Cursor、Windsurf、Claude Code 以及普通的 VS Code 无缝协作。

✨ “为什么只设计一个方案,而不去探索十个呢?” — SuperDesign

加入 Discord

在 Hackernews 上点赞

安装指南


🎬 演示视频(点击播放)

SuperDesign 演示


🚀 功能

  • 🖼️ 产品原型:只需一个提示即可快速生成完整的 UI 界面
  • 🧩 UI 组件:创建可复用的组件,直接拖拽到代码中
  • 📝 线框图:探索低保真布局,实现快速迭代
  • 🔁 复制并迭代:轻松复制和演化设计
  • 📥 提示转 IDE:将提示复制到你最喜欢的 AI IDE 中(Cursor、Windsurf、Claude Code)

🧠 与 Cursor、Windsurf、Claude Code、VS Code 完美兼容

👉 立即安装


🛠️ 开始使用

  1. 从 Cursor/VS Code 插件市场安装扩展程序
  2. 打开 SuperDesign 侧边栏面板
  3. 输入提示(例如:“设计一个现代登录界面”
  4. 查看生成的原型、组件和线框图
  5. 复制、调整并粘贴到你的项目中

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

是的,初始化 SuperDesign 扩展后,会添加一些 Cursor/Claude Code 的规则,这样你就可以通过提示让代理在 SuperDesign 画布上进行设计和预览(cmd + shift + p -> superdesign: open canva)。

如果你使用 Cursor,我强烈建议将提示复制到 'design.mdc' 文件中,并在 Cursor 中创建一个自定义模式,使用相同的系统提示;这样可以获得更好的性能。

教程在这里(点击播放): 教程视频

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

  1. 在 AI 模型提供商中选择 OpenAI
  2. 在 OpenAI API 密钥输入框中填入任意内容
  3. 在 OpenAI URL 输入框中添加你的 OpenAI 地址(例如:http://127.0.0.1:1234/v1 用于 LM Studio)

📂 我的设计保存在哪里?

你生成的设计会本地保存在 .superdesign/ 目录下。


❓ 常见问题解答

它是免费且开源的吗?
是的!我们是开源项目——你可以 fork、扩展或 remix。

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

SuperDesign 能否更新现有的 UI?
完全可以——选择一个组件,描述更改内容,剩下的就交给代理完成。

image

我如何贡献?
欢迎提交 Pull Request。给仓库点个 star,并加入我们的 Discord 社区吧!


🔗 链接

常见问题

相似工具推荐

openclaw

OpenClaw 是一款专为个人打造的本地化 AI 助手,旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚,能够直接接入你日常使用的各类通讯渠道,包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息,OpenClaw 都能即时响应,甚至支持在 macOS、iOS 和 Android 设备上进行语音交互,并提供实时的画布渲染功能供你操控。 这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地,用户无需依赖云端服务即可享受快速、私密的智能辅助,真正实现了“你的数据,你做主”。其独特的技术亮点在于强大的网关架构,将控制平面与核心助手分离,确保跨平台通信的流畅性与扩展性。 OpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者,以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力(支持 macOS、Linux 及 Windows WSL2),即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你

349.3k|★★★☆☆|1周前
Agent开发框架图像

stable-diffusion-webui

stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面,旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点,将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。 无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师,还是想要深入探索模型潜力的开发者与研究人员,都能从中获益。其核心亮点在于极高的功能丰富度:不仅支持文生图、图生图、局部重绘(Inpainting)和外绘(Outpainting)等基础模式,还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外,它内置了 GFPGAN 和 CodeFormer 等人脸修复工具,支持多种神经网络放大算法,并允许用户通过插件系统无限扩展能力。即使是显存有限的设备,stable-diffusion-webui 也提供了相应的优化选项,让高质量的 AI 艺术创作变得触手可及。

162.1k|★★★☆☆|1周前
开发框架图像Agent

everything-claude-code

everything-claude-code 是一套专为 AI 编程助手(如 Claude Code、Codex、Cursor 等)打造的高性能优化系统。它不仅仅是一组配置文件,而是一个经过长期实战打磨的完整框架,旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。 通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能,everything-claude-code 能显著提升 AI 在复杂任务中的表现,帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略,使得模型响应更快、成本更低,同时有效防御潜在的攻击向量。 这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库,还是需要 AI 协助进行安全审计与自动化测试,everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目,它融合了多语言支持与丰富的实战钩子(hooks),让 AI 真正成长为懂上

160k|★★☆☆☆|今天
开发框架Agent语言模型

opencode

OpenCode 是一款开源的 AI 编程助手(Coding Agent),旨在像一位智能搭档一样融入您的开发流程。它不仅仅是一个代码补全插件,而是一个能够理解项目上下文、自主规划任务并执行复杂编码操作的智能体。无论是生成全新功能、重构现有代码,还是排查难以定位的 Bug,OpenCode 都能通过自然语言交互高效完成,显著减少开发者在重复性劳动和上下文切换上的时间消耗。 这款工具专为软件开发者、工程师及技术研究人员设计,特别适合希望利用大模型能力来提升编码效率、加速原型开发或处理遗留代码维护的专业人群。其核心亮点在于完全开源的架构,这意味着用户可以审查代码逻辑、自定义行为策略,甚至私有化部署以保障数据安全,彻底打破了传统闭源 AI 助手的“黑盒”限制。 在技术体验上,OpenCode 提供了灵活的终端界面(Terminal UI)和正在测试中的桌面应用程序,支持 macOS、Windows 及 Linux 全平台。它兼容多种包管理工具,安装便捷,并能无缝集成到现有的开发环境中。无论您是追求极致控制权的资深极客,还是渴望提升产出的独立开发者,OpenCode 都提供了一个透明、可信

144.3k|★☆☆☆☆|2天前
Agent插件

ComfyUI

ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎,专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式,采用直观的节点式流程图界面,让用户通过连接不同的功能模块即可构建个性化的生成管线。 这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景,也能自由组合模型、调整参数并实时预览效果,轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性,不仅支持 Windows、macOS 和 Linux 全平台,还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构,并率先支持 SDXL、Flux、SD3 等前沿模型。 无论是希望深入探索算法潜力的研究人员和开发者,还是追求极致创作自由度的设计师与资深 AI 绘画爱好者,ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能,使其成为当前最灵活、生态最丰富的开源扩散模型工具之一,帮助用户将创意高效转化为现实。

109.2k|★★☆☆☆|今天
开发框架图像Agent

gemini-cli

gemini-cli 是一款由谷歌推出的开源 AI 命令行工具,它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言,它提供了一条从输入提示词到获取模型响应的最短路径,无需切换窗口即可享受智能辅助。 这款工具主要解决了开发过程中频繁上下文切换的痛点,让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用,还是执行复杂的 Git 操作,gemini-cli 都能通过自然语言指令高效处理。 它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口,具备出色的逻辑推理能力;内置 Google 搜索、文件操作及 Shell 命令执行等实用工具;更独特的是,它支持 MCP(模型上下文协议),允许用户灵活扩展自定义集成,连接如图像生成等外部能力。此外,个人谷歌账号即可享受免费的额度支持,且项目基于 Apache 2.0 协议完全开源,是提升终端工作效率的理想助手。

100.8k|★★☆☆☆|1周前
插件Agent图像