# AIDesigner MCP Server

一款轻量级的 MCP 服务器，为 Claude Code、Cursor、Codex、VS Code/Copilot 和 Windsurf 等 AI 编码助手赋能，使其能够在你的代码库中直接生成、优化并集成生产就绪的 UI 设计。

Canonical URL: https://a2a-mcp.org/entry/aidesigner-mcp-zh

Language: zh

Category: MCP Servers

Updated: 2026-04-08

## 概述

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.  在您的项目中运行初始化命令：
    ```bash
    npx -y @aidesigner/agent-skills init <host> --trust-project
    ```
    （将 `<host>` 替换为 `codex`、`cursor` 等）。

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

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

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

详细的设置指南、工具参考和故障排除请查阅 [官方文档](https://www.aidesigner.ai/docs/mcp)。

## 使用场景

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

## 技术细节

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

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

访问 [aidesigner.ai](https://www.aidesigner.ai/) 获取更多信息、观看实时演示并了解最新动态。

## Tags

- MCP
- MCP服务器
- UI设计
- 前端开发
- Claude Code
- Cursor
- AI编码
- 设计系统
- Tailwind
- 组件库

## Sources

- [Project website](https://www.aidesigner.ai/docs/mcp)