a2a mcp
Back to MCP Servers
AIDesigner MCP Server logo
mcp-server357

AIDesigner MCP Server

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

XFacebookLinkedInRedditHacker News

概述

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 获取更多信息、观看实时演示并了解最新动态。

Tags

MCPMCP服务器UI设计前端开发Claude CodeCursorAI编码设计系统Tailwind组件库

Related Entries

Keep exploring similar tools and resources in this category.

Browse MCP Servers
Agent Reach logo

Agent Reach

MCP Servers

Agent Reach is an open-source CLI and Agent Skill that installs, routes, and health-checks upstream tools for web, social, GitHub, video transcript, RSS, and search access. It is not documented as a standalone MCP server; some channels use MCP-backed upstream tools such as mcporter/Exa, xiaohongshu-mcp, and linkedin-scraper-mcp.

Design Bridge MCP logo

Design Bridge MCP

MCP Servers

Design Bridge MCP connects Framer projects to Claude, Cursor, and other MCP-compatible assistants for AI-driven canvas and project automation.

viewmax mcp logo

viewmax mcp

MCP Servers

ViewMax MCP is a hosted Streamable HTTP MCP server for generating AI video, images, music, speech, and sound effects, with tools for model discovery, task polling, and credit checks. Official setup is documented for Claude Web/Desktop, Claude Code, Cursor, Codex, and SDK clients.

Cursor MCP logo

Cursor MCP

MCP Servers

Cursor MCP is Cursor's Model Context Protocol client support for connecting the Cursor editor and Cursor CLI agent to external MCP servers. Official docs cover stdio, SSE, Streamable HTTP, mcp.json configuration, OAuth, Marketplace plugins, and CLI management commands.

code base memory mcp logo

code base memory mcp

MCP Servers

Codebase Memory is an open-source MCP server that indexes local codebases into a persistent knowledge graph for AI coding agents. It exposes structural code search, call-path tracing, impact analysis, architecture summaries, Cypher-style graph queries, ADR management, and related code-intelligence tools over stdio.

RevenueCat MCP Server logo

RevenueCat MCP Server

MCP Servers

RevenueCat MCP Server lets AI assistants manage RevenueCat subscription infrastructure through natural language, including projects, apps, products, entitlements, offerings, paywalls, and analytics.