AIDesigner MCP Server

概述

AIDesigner MCP Server 是一款轻量级的**模型上下文协议（MCP）**服务器，它在强大的 AI 编程助手与专业的 UI/UX 设计之间架起了桥梁。它解决了 Claude Code 等工具一个最大的弱点——较弱的原生 UI 设计能力——通过在编辑器内部直接为它们提供智能设计工具访问。

该服务器读取您项目的框架、组件库、CSS/Tailwind 令牌和设计系统，然后生成可直接用于生产的 UI 代码，无缝融入您现有的技术栈。无需再在 Figma 和代码编辑器之间切换，也无需手动修复 AI 生成的设计。

主要特性

• 代码库感知的设计生成：在创建 UI 之前分析您的项目，以理解框架、组件和令牌。
• generate_design 工具：将自然语言提示转化为可直接用于生产的 UI 组件和页面。 . -, refine_design 工具：使用对话式指令迭代改进布局、颜色、间距和样式。 , 直接代码集成：输出的代码可以直接放入您的代码库，无需手动调整。 , OAuth 认证：安全的登录流程，令牌刷新由 MCP 主机自动处理。 , 广泛兼容性：支持 Claude Code、Codex、Cursor、VS Code（Copilot Agent 模式）和 Windsurf。 , 零摩擦设置：通过一条 npx 命令即可安装和配置。

支持的 AI 编程工具

1. Claude Code：支持完整的工作流，包括 /mcp 命令和专用代理。
2. Cursor：无缝集成，支持 AI 驱动的编辑。
3. Codex：支持项目级配置。
4. VS Code / GitHub Copilot：兼容代理模式。
5. Windsurf：支持用户范围配置。

安装与设置

1. 在您的项目中运行初始化命令：

   npx -y @aidesigner/agent-skills init <host> --trust-project
   

   （将 <host> 替换为 codex、cursor 等）。

2. CLI 将注册 MCP 服务器并打开浏览器窗口进行 OAuth 登录。

3. 通过您 AI 助手的 MCP 面板连接（例如，在 Claude Code 中运行 /mcp 并选择 "aidesigner"）。

4. 开始输入提示："生成一个支持深色模式的现代化定价页面" 或 "优化这个仪表盘，使其使用我们的品牌颜色。"

详细的设置指南、工具参考和故障排除请查阅 官方文档 。

使用场景

1. 快速前端原型设计：几分钟内从想法到精美的 UI，无需离开编辑器。
2. 设计系统合规：确保所有生成的组件都遵循您现有的令牌和组件规范。
3. 迭代式 UI 优化：使用自然语言调整布局、可访问性或响应式设计。
4. 全栈开发：与编码代理结合，构建包含美观界面的完整功能。
5. 团队协作：在 AI 辅助开发和手动开发中保持一致的设计质量。

技术细节

• 协议：采用模型上下文协议（MCP）——实现标准化工具和上下文接口。
• 分发方式：通过 npm（@aidesigner/agent-skills 及相关包）进行分发。
• 认证方式：基于 OAuth 的认证机制，支持自动令牌管理。
• 开发状态：正在积极开发中；v0.1.0 版本已发布，在 Product Hunt 平台上获得了强劲的早期采用。

AIDesigner MCP 将 AI 编程助手从代码生成器转变为完整的设计与编码伙伴，让每位开发者都能轻松创建美观且达到生产级标准的用户界面。

访问 aidesigner.ai 获取更多信息、观看实时演示并了解最新动态。