使用说明
🧠 SuperDesign MCP服务器——克劳德代码的AI设计代理
🆕 新 SuperDesign Chrome扩展程序 -克隆任何网站和UI
通过： AI杰森 Johnson（MCP服务器）
SuperDesign是第一个 开源设计代理 它就存在于你的IDE中。
直接从自然语言提示生成UI模型、组件和线框。
与Cursor、Windsurf、Claude Code和普通VS Code无缝协作。
✨ “当你可以探索十个选项时，为什么要设计一个选项？”——SuperDesign
如何在CLAUDE代码CLI中安装/添加MCP服务器
cd到superdesign mcp服务器/superdesign macp服务器并运行shell：
将mcp添加到claude-code-cli.sh
如果你不想再次构建mcp，你可以运行cmd：
claude mcp remove superdesign -s user
claude mcp add --transport stdio --scope user superdesign \
--env AI_PROVIDER="custom-api" --env SECURITY_MODE="strict" \
--env WORKSPACE_ROOT="$pwd" \
-- \
npx tsx "$pwd/src/index.ts"
claude mcp列表#查看mcp是否已添加
🎬 演示视频（点击播放）
🚀 特性
- 🖼️ 产品模拟：从单个提示立即生成完整的UI屏幕
- 🧩 UI组件：创建可以放入代码中的可重用组件
- 📝 线框图：探索低保真度布局以实现快速迭代
- 🔁 分叉和迭代：轻松复制和改进设计
- 📥 提示IDE：将提示复制到您最喜欢的AI IDE中（Cursor、Windsurf、Claude Code）
🧠 适用于Cursor、Windsurf、Claude Code、VS Code
👉 在此处安装
🛠️ 入门指南
- 安装扩展 来自Cursor/VS代码市场
- 打开
SuperDesign侧边栏面板 - 键入提示（例如。， “设计现代登录屏幕”)
- 查看生成的模型、组件和线框
- 分叉、调整并粘贴到您的项目中
我可以使用我自己的Claude Code或Cursor订阅吗？
是的，初始化superdesign扩展后，将添加一些游标/claude代码规则，因此您可以提示代理在superdesign canva中进行设计和预览（cmd+shift+p->superdesign:open canva）
如果使用游标，我强烈建议复制“design.mdc”中的提示，并在游标中创建一个具有相同系统提示的自定义模式；这应该会给你带来更好的表现
这里的说明（点击播放）：
如何运行本地OpenAI兼容服务器？
- 在ai模型提供程序上选择打开ai
- 在Openai Api键输入中输入任何内容
- 在OpenAi Url输入上添加您的OpenAi Url（示例：http://127.0.0.1:1234/v1LM工作室）
📂 我的设计存储在哪里？
您生成的设计保存在本地 .superdesign/.
❓ 常见问题解答
它是免费和开源的吗？
对！我们是开源的——分叉、扩展、混音。
我可以定制设计代理吗？
是的——使用您自己的提示模板、修改行为或添加命令。
SuperDesign可以更新现有的UI吗？
当然——选择一个组件，描述更改，让代理完成剩下的工作。
我如何做出贡献？
欢迎拉取请求。签署回购协议，加入我们 Discord 的中文翻译是“不和谐”或“纷争”。!
🔗 链接
- 🌐 网站： https://superdesign.dev/ide-extension
- 📦 github： https://github.com/superdesigndev/superdesign
- 💬 不一致： 加入社区
- 🐦 推特/X： @SuperDesignDev
