- 人工智能
- AI 应用
- AI Agent
- 前端
【免费下载链接】superdesign
AI Product Design Agent - Open Source
SuperDesign 是一款运行在 IDE 内部的 AI 产品设计代理扩展：输入一句自然语言提示词，即可在无限画布上生成完整的 UI 界面稿（Mockup）、可复用组件和低保真线框图（Wireframe），并支持 Fork 迭代、复制提示词到 Claude Code / Cursor 等编码代理继续精修。本文以仓库 README.md 为骨架，结合 package.json 配置与src/源码实现，完整讲解安装启动、LLM 提供方配置、本地 OpenAI 兼容服务器接入、设计文件存储结构，以及内置设计代理的四步工作流与系统提示词机制，让读者既能快速跑通，也能理解其底层原理。
项目定位：第一个"住在 IDE 里"的开源设计代理
SuperDesign 是面向开发者的开源设计代理扩展（仓库中的扩展版本号为 0.0.14，见 package.json），核心能力是：直接用自然语言生成 UI 设计。它不是一个独立的网页工具，而是以 VS Code 扩展的形式集成进你的编辑器，通过侧边栏 Chat 面板与模型对话，把生成结果落到本地.superdesign/目录，并在扩展内置的 Canvas 画布中预览。
根据 README.md 的说明，它可与 Cursor、Windsurf、Claude Code 以及原生 VS Code 无缝协作；产品现已演进为 Web 应用形态，但本仓库保留了最初的 IDE 扩展开源实现，供学习、Fork 与扩展使用。
五大核心功能
README 将其功能归纳为五类，每一类对应一种设计任务模式，内置系统提示词中也都给出了各自的专门指令：
- Product Mock（整屏 UI 稿）：从一个提示词瞬间生成完整的 UI 界面屏幕。源码中的设计提示词要求"构建一个单页 HTML，仅包含一个屏幕"，用于将用户的反馈/任务落实为设计稿。
- UI Components（组件）：生成可复用、可直接落入代码的组件。提示词限定"每个 HTML 只放一个组件 + 内部 mock 数据，不要添加其他元素或文字"。
- Wireframes（线框图）：探索低保真布局以快速迭代。提示词要求"极简黑白线条线框图、无颜色、无图片、Balsamiq 风格，用 CSS 占位代替图片"。
- Fork & Iterate（分叉迭代）：轻松复制并演进设计。迭代命名约定为
{current_file_name}_{n}.html，例如对ui_1.html迭代时依次生成ui_1_1.html、ui_1_2.html；默认会并行启动 3 个子代理同时产出多个变体，让用户"一次探索十种方案"。 - Prompt-to-IDE（提示词复制）：把提示词复制进你常用的 AI IDE（Cursor、Windsurf、Claude Code），借助已注入的项目规则继续精修设计。
快速上手：五分钟跑通第一个设计
按 README 的 Getting Started 流程，安装与首次使用共五步：
- 从 Cursor / VS Code Marketplace 安装扩展；
- 打开
SuperDesign侧边栏面板； - 输入提示词（例如"Design a modern login screen"）；
- 查看生成的 Mockup、组件与线框图；
- Fork、微调并粘贴进自己的项目。
从源码看，扩展激活后共注册了一组superdesign.*命令（package.json），其中与使用直接相关的包括：
| 命令 | 说明 |
|---|---|
superdesign.showChatSidebar | 打开 Chat 侧边栏 |
superdesign.openCanvas | 打开 Canvas 画布视图（预览设计稿） |
superdesign.initializeProject | 初始化 Superdesign 项目结构 |
superdesign.clearChat | 清空当前对话 |
superdesign.openSettings | 打开扩展设置 |
superdesign.configureApiKey | 配置 Anthropic API Key |
superdesign.configureOpenAIApiKey/superdesign.configureOpenAIUrl | 配置 OpenAI Key / 自定义 URL |
superdesign.configureOpenRouterApiKey | 配置 OpenRouter API Key |
其中superdesign.openCanvas、superdesign.openSettings、superdesign.clearChat会直接以导航按钮的形式出现在侧边栏标题栏上（见 package.json 的menus.view/title配置），侧边栏本体是一个 id 为superdesign.chatView的 Webview（package.json），其宿主实现位于 src/providers/chatSidebarProvider.ts：它负责把 HTML 注入侧边栏、转发chatMessage/stopChat/changeProvider等消息，并通过ChatMessageService驱动模型对话。
与 Cursor、Windsurf、Claude Code、VS Code 的协作机制
这是 README 强调的差异化能力：SuperDesign 会往你的项目里写入编码代理的设计规则，让 Claude Code、Cursor、Windsurf 在对话时自动"懂得"如何产出可在 SuperDesign 画布中预览的设计稿。
当你执行superdesign.initializeProject后（实现见 src/extension.ts），扩展会在工作区中创建/追加以下文件：
.superdesign/design_iterations/目录：所有设计迭代文件的落盘位置；.superdesign/design_iterations/default_ui_darkmode.css：预置的暗色设计系统默认样式表（包含完整的:root设计令牌、按钮、表单、卡片、徽章、Tab 等组件类）；.cursor/rules/design.mdc：Cursor 规则文件（带 frontmatter 的 Markdown 规则）；CLAUDE.md：Claude Code 项目记忆文件；.windsurfrules：Windsurf 规则文件。
写入上述文件的核心内容（designRuleContent，见 src/extension.ts）约定了设计代理必须遵守的规则：输出文件一律落在.superdesign/design_iterations并按{design_name}_{n}.html命名；必须调用工具（read/write/edit/multiedit/glob/grep/ls/bash/generateTheme）落盘而不是在消息里输出代码；必须以"布局 → 主题 → 动画 → 生成 HTML"四步工作流推进并逐步与用户确认；样式默认基于 Flowbite、避免 indigo/blue、必须响应式、字体从固定 Google Font 清单中选择、CSS 关键属性加!important防止被 Tailwind/Flowbite 覆盖等。
如果使用 Cursor，README 还给出一个进阶建议：将design.mdc中的提示词复制出来，在 Cursor 中创建一个使用同一系统提示词的 Custom Mode，可以获得更好的表现。
使用自己的 Claude Code 或 Cursor 订阅
README 明确回答了一个常见疑问：可以。初始化扩展后，项目里会被加入上述 Cursor/Claude Code 规则，之后你可以直接提示这些编码代理做设计，并通过cmd + shift + p（Windows 为Ctrl+Shift+P）→superdesign: Open Canvas View在 SuperDesign 画布中预览结果。该快捷键提示在 src/extension.ts 的初始化逻辑中按平台自动区分。
这意味着你无需单独为 SuperDesign 付费购买模型额度——底层对话可以复用你已有的 Claude Code / Cursor 订阅与登录态（Claude Code 二进制模式即"本机安装的 claude 可执行文件"驱动）。
LLM 提供方配置详解
扩展的模型接入分为两层，需要区分清楚：
第一层：主 LLM Provider（superdesign.llmProvider）
控制 Chat 侧边栏对话走哪条通路，可选两个枚举值（见 package.json）：
| 配置值 | 说明 | 默认 |
|---|---|---|
claude-api | 使用 Anthropic API Key，通过 Claude Code SDK 与 Claude 通信 | ✅ 默认 |
claude-code | 使用本地claude二进制，具备更强的代码执行能力 | 否 |
对应的 Provider 抽象与工厂实现位于 src/providers/llmProvider.ts 和 src/providers/llmProviderFactory.ts：LLMProviderFactory采用单例 + 缓存，按配置创建ClaudeApiProvider或ClaudeCodeProvider，支持switchProvider动态切换与validateProvider校验。
- Claude API 模式（src/providers/claudeApiProvider.ts）：初始化时读取
superdesign.anthropicApiKey写入process.env.ANTHROPIC_API_KEY，动态导入@anthropic-ai/claude-code的 SDKquery函数发起流式对话；默认maxTurns: 10，默认可用工具为Read / Write / Edit / MultiEdit / Bash / LS / Grep / Glob，权限模式默认acceptEdits，工作目录为工作区.superdesign/（无工作区时回退到系统临时目录）。 - Claude Code 二进制模式（src/providers/claudeCodeProvider.ts）：初始化时依次尝试
claude --version、--help、裸命令来探测二进制是否可用；构建命令行参数时把完整模型 ID 映射为别名（sonnet/haiku/opus），追加--dangerously-skip-permissions与-p提示词，通过 spawn 子进程执行并解析 stdout（先尝试 JSON 解析，失败则按纯文本消息处理）。
第二层：自定义 Agent（superdesign.aiModelProvider与相关 Key）
侧边栏中的"自定义 Agent"通路由 src/services/customAgentService.ts 实现，它基于 AI SDK 的streamText组装工具调用链（read/write/edit/multiedit/glob/grep/ls/bash/generateTheme，见 src/tools/ 各工具实现），支持多步推理（maxSteps: 10，maxTokens: 32000）。其模型提供方由以下配置决定（package.json）：
| 配置项 | 类型/枚举 | 说明 |
|---|---|---|
superdesign.aiModelProvider | openai/anthropic/openrouter/claude-code | 自定义 Agent 的模型提供方，默认anthropic |
superdesign.aiModel | string | 具体模型名（如gpt-4o、claude-3-5-sonnet-20241022、openrouter 风格带 / 的模型 ID） |
superdesign.anthropicApiKey | string | Anthropic API Key |
superdesign.anthropicUrl | string | 自定义 Anthropic URL（用于 localhost:4000 之类的本地代理） |
superdesign.openaiApiKey | string | OpenAI API Key |
superdesign.openaiUrl | string | OpenAI 兼容 Base URL |
superdesign.openrouterApiKey | string | OpenRouter API Key |
customAgentService.getModel()中有个值得注意的推导逻辑：如果设置了aiModel，会根据模型名自动推断提供方——包含/视为 OpenRouter、以claude-开头视为 Anthropic、否则视为 OpenAI；各提供方未指定模型时的默认值分别为gpt-4o、claude-4-sonnet-20250514、anthropic/claude-3-7-sonnet-20250219（可对照 src/providers/chatSidebarProvider.ts 的默认模型映射）。
Claude Code 专属配置
superdesign.llmProvider = claude-code时还有三个专属配置（package.json）：
superdesign.claudeCodePath：claude 二进制路径，默认claude（npm 安装）；若通过 shell 脚本安装则填claude-code；superdesign.claudeCodeModelId：模型 ID 枚举，默认claude-sonnet-4-20250514，另有claude-3-5-sonnet-20241022、claude-3-5-haiku-20241022、claude-3-opus-20240229；superdesign.claudeCodeThinkingBudget：思考预算 Token 数，默认50000。
这些配置由 src/providers/claudeCodeProvider.ts 的loadConfiguration()在初始化时读取并生效。
如何运行本地 OpenAI 兼容服务器
README 提供了接入本地模型（如 LM Studio）的三步配置法：
- 在 AI Model Provider 中选择openai；
- OpenAI API Key 输入框填任意值（本地服务通常不校验 Key）；
- 在 OpenAI Url 输入框填入你的 OpenAI 兼容地址，例如 LM Studio 的
http://127.0.0.1:1234/v1。
对应到源码：customAgentService的 openai 分支使用createOpenAI({ apiKey, baseURL: openaiUrl })构建客户端，openaiUrl正是读取自superdesign.openaiUrl配置（src/services/customAgentService.ts）。也就是说，只要你的本地推理服务暴露了 OpenAI 兼容的/v1接口（LM Studio、Ollama、vLLM 等常见方案均可），就能把 SuperDesign 的设计对话跑在完全本地、私密的模型上。
设计文件存储在哪里
README 明确：生成的设计全部保存在本地.superdesign/目录中。结合源码可以给出更完整的目录语义：
.superdesign/design_iterations/：设计迭代 HTML/SVG 文件的唯一落盘位置（初始化时创建，见 src/extension.ts），同时预置default_ui_darkmode.css默认样式；.superdesign/moodboard/：用户在画布上传的参考图片存储目录（实现见 src/extension.ts，支持 jpg/png/gif/webp/bmp 等格式的 base64 解码落盘）；CLAUDE.md/.cursor/rules/design.mdc/.windsurfrules：面向各编码代理注入的设计规则；design_system/：从截图提取设计系统时生成的design-system.json（design-system_1.json、design-system_2.json…）所在位置（提示词约定，见 src/providers/claudeApiProvider.ts 与 system-prompt.txt）。
Canvas 画布负责把这些文件可视化：它默认按网格布局渲染设计帧（每行 4 帧、帧间距 50px），支持拖拽、缩放（0.1x–5x）、桌面/平板/手机三种视口模式、响应式缩放与层级连线视图（配置见 src/webview/components/CanvasView.tsx）；设计帧支持placeholder/iframe/html三种渲染模式，iframe 模式会注入 CSP 与 viewport meta 以保证安全预览（src/webview/components/DesignFrame.tsx）。
内置设计代理的四步工作流
无论走哪条通路，内置系统提示词（src/providers/claudeApiProvider.ts、system-prompt.txt）都强制设计代理遵循同一条四步流水线，且每步都需要与用户确认后才进入下一步：
- 布局设计：先以纯文本输出界面布局思考，并用 ASCII 线框呈现（提示词内置了完整的 AI 聊天 UI 线框示例，含侧边栏滑出等交互态）；
- 主题设计：必须调用
generateTheme工具生成主题 CSS 文件（工具实现见 src/tools/theme-tool.ts，它校验:root变量、--background/--foreground/--primary/--card/--chart-*/--sidebar-*等完整设计令牌集合后才落盘）； - 动画设计：纯文本输出动画/过渡/微交互方案（内置"微语法"示例，如
userMsg: 400ms ease-out [Y+20→0, X+10→0, S0.9→1]）； - 生成 HTML：为每个组件生成 HTML 再合并为单页，引用第 2 步的主题 CSS 文件，必须使用 write 工具落盘到
.superdesign/design_iterations/。
系统提示词还包含详尽的设计规范：60-30-10 配色比例、4pt/8pt 间距系统、三档字号层级（H1 36px / H2 28px / Body 16px 起步）、触摸目标不小于 48×48px、文字只允许黑/白、通过 CSS 占位而非真实图片（Webview 无法渲染外部图）等。这些约束保证了多模型、多提供方输出的一致性。
FAQ 要点
README 中的 FAQ 同样可以作为使用常识直接采信：
- 是否免费开源？是。开源实现允许 Fork、扩展、混搭；
- 能否自定义设计代理？可以。使用自己的提示词模板、修改行为或添加命令（初始化时注入的
designRuleContent即是一个可编辑的自定义起点）； - SuperDesign 能更新已有 UI 吗？可以。选中组件、描述改动，让代理完成剩余工作；
- 如何参与贡献？Pull Request 是被欢迎的贡献方式。
常见问题排查
- Claude Code 二进制找不到：
ClaudeCodeProvider初始化失败时会提示检查claude --help、which claude（Windows 用where claude），并区分 npm 安装（claude）与 shell 脚本安装（claude-code）两种命令名（src/providers/claudeCodeProvider.ts）；还内置了debugBinaryDetection()可逐一探测claude/claude-code/anthropic三个候选命令。 - API Key 认证错误：
ClaudeApiProvider.isAuthError()通过模式匹配识别authentication failed、invalid api key、401、ANTHROPIC_API_KEY等关键字（src/providers/claudeApiProvider.ts），避免把认证失败当作普通错误弹出重复提示；扩展 0.0.8 版本还专门优化了错误信息路由，把原始 JSON 错误转换为友好的聊天内提示（见 CHANGELOG.md）。 - 无工作区时：所有 Provider 都会回退到系统临时目录（如
superdesign-claude、superdesign-custom），并弹出警告，提示先打开一个工作区再使用。
总体而言，SuperDesign 的价值在于把"设计生成"从独立网页工具搬进开发者已有的工作流：对话在 IDE 侧边栏完成，产物以 HTML/SVG 落盘到本地.superdesign/，画布即时预览，规则文件打通 Claude Code / Cursor / Windsurf——这套"提示词 → 设计稿 → 代码资产"的闭环，是理解 AI 原生设计工作流的一个完整开源样例。
- 人工智能
- AI 应用
- AI Agent
- 前端
【免费下载链接】superdesign
AI Product Design Agent - Open Source
相关推荐
SuperDesign：革命性AI设计代理，在IDE中一键生成UI模型
SuperDesign：革命性AI设计代理，在IDE中一键生成UI模型 想要快速生成UI设计却不想离开代码环境？SuperDesign作为首个开源AI设计代理，
人工智能AI 应用AI Agent前端终极指南：如何使用SuperDesign在IDE中快速生成UI设计
终极指南：如何使用SuperDesign在IDE中快速生成UI设计 在当今快速发展的软件开发领域，设计效率直接影响项目进度。SuperDesign作为首个开源设
人工智能AI 应用AI Agent前端ESLint MCP Server 配置指南：在 VS Code、Cursor 与 Windsurf 中让 LLM 直接驱动 ESLint
ESLint MCP Server 配置指南：在 VS Code、Cursor 与 Windsurf 中让 LLM 直接驱动 ESLint ESLint 的 C
开发工具Lint静态分析代码质量
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
