人工智能AI 应用AI Agent前端【免费下载链接】superdesignAI Product Design Agent - Open Source项目地址https://gitcode.com/gh_mirrors/su/superdesign点击查看免费下载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 IDECursor、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 Keysuperdesign.configureOpenAIApiKey/superdesign.configureOpenAIUrl配置 OpenAI Key / 自定义 URLsuperdesign.configureOpenRouterApiKey配置 OpenRouter API Key其中superdesign.openCanvas、superdesign.openSettings、superdesign.clearChat会直接以导航按钮的形式出现在侧边栏标题栏上见 package.json 的menus.view/title配置侧边栏本体是一个 id 为superdesign.chatView的 Webviewpackage.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.mdcCursor 规则文件带 frontmatter 的 Markdown 规则CLAUDE.mdClaude Code 项目记忆文件.windsurfrulesWindsurf 规则文件。写入上述文件的核心内容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 覆盖等。如果使用 CursorREADME 还给出一个进阶建议将design.mdc中的提示词复制出来在 Cursor 中创建一个使用同一系统提示词的 Custom Mode可以获得更好的表现。使用自己的 Claude Code 或 Cursor 订阅README 明确回答了一个常见疑问可以。初始化扩展后项目里会被加入上述 Cursor/Claude Code 规则之后你可以直接提示这些编码代理做设计并通过cmd shift pWindows 为CtrlShiftP→superdesign: Open Canvas View在 SuperDesign 画布中预览结果。该快捷键提示在 src/extension.ts 的初始化逻辑中按平台自动区分。这意味着你无需单独为 SuperDesign 付费购买模型额度——底层对话可以复用你已有的 Claude Code / Cursor 订阅与登录态Claude Code 二进制模式即本机安装的 claude 可执行文件驱动。LLM 提供方配置详解扩展的模型接入分为两层需要区分清楚第一层主 LLM Providersuperdesign.llmProvider控制 Chat 侧边栏对话走哪条通路可选两个枚举值见 package.json配置值说明默认claude-api使用 Anthropic API Key通过 Claude Code SDK 与 Claude 通信✅ 默认claude-code使用本地claude二进制具备更强的代码执行能力否对应的 Provider 抽象与工厂实现位于 src/providers/llmProvider.ts 和 src/providers/llmProviderFactory.tsLLMProviderFactory采用单例 缓存按配置创建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 解析失败则按纯文本消息处理。第二层自定义 Agentsuperdesign.aiModelProvider与相关 Key侧边栏中的自定义 Agent通路由 src/services/customAgentService.ts 实现它基于 AI SDK 的streamText组装工具调用链read/write/edit/multiedit/glob/grep/ls/bash/generateTheme见 src/tools/ 各工具实现支持多步推理maxSteps: 10maxTokens: 32000。其模型提供方由以下配置决定package.json配置项类型/枚举说明superdesign.aiModelProvideropenai/anthropic/openrouter/claude-code自定义 Agent 的模型提供方默认anthropicsuperdesign.aiModelstring具体模型名如gpt-4o、claude-3-5-sonnet-20241022、openrouter 风格带 / 的模型 IDsuperdesign.anthropicApiKeystringAnthropic API Keysuperdesign.anthropicUrlstring自定义 Anthropic URL用于 localhost:4000 之类的本地代理superdesign.openaiApiKeystringOpenAI API Keysuperdesign.openaiUrlstringOpenAI 兼容 Base URLsuperdesign.openrouterApiKeystringOpenRouter API KeycustomAgentService.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.jsonsuperdesign.claudeCodePathclaude 二进制路径默认claudenpm 安装若通过 shell 脚本安装则填claude-codesuperdesign.claudeCodeModelId模型 ID 枚举默认claude-sonnet-4-20250514另有claude-3-5-sonnet-20241022、claude-3-5-haiku-20241022、claude-3-opus-20240229superdesign.claudeCodeThinkingBudget思考预算 Token 数默认50000。这些配置由 src/providers/claudeCodeProvider.ts 的loadConfiguration()在初始化时读取并生效。如何运行本地 OpenAI 兼容服务器README 提供了接入本地模型如 LM Studio的三步配置法在 AI Model Provider 中选择openaiOpenAI 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.jsondesign-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 [Y20→0, X10→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 claudeWindows 用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前端【免费下载链接】superdesignAI Product Design Agent - Open Source项目地址https://gitcode.com/gh_mirrors/su/superdesign点击查看免费下载相关推荐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 直接驱动 ESLintESLint MCP Server 配置指南在 VS Code、Cursor 与 Windsurf 中让 LLM 直接驱动 ESLint ESLint 的 C开发工具Lint静态分析代码质量创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考