妙多 MCP

妙多 MCP 服务器支持通过 API 读取设计稿数据，集成到本地 IDE 中结合 AI 编程工具使用，即可智能化生成代码。

关于 MCP

模型上下文协议 （MCP） 是一种开放协议，它标准化了应用程序向 LLM 提供上下文和工具的方式。MCP 允许你通过标准化接口将代理连接到各种数据源和工具，从而扩展代理的功能。

MCP 遵循客户端-服务器架构：

• MCP 客户端 （如 Cursor、VS Code 等 IDE）连接到 MCP 服务器并代表 AI 模型请求操作。
• MCP 服务器（如妙多 MCP）则是通过标准化协议公开特定功能的轻量级程序。它充当 AI 客户端与外部工具或数据源之间的中介。
• 模型上下文协议 (MCP) 定义客户端和服务器之间通信的消息格式。

使用妙多 MCP

1. 1.

   将妙多 MCP 集成到 IDE 中。

   1. a.打开任意妙多文件，点击工具栏右侧的 或使用快捷键 ⇧ Shift + D ，切换至研发模式。
   2. b.点击「主菜单」-「帮助与账号」，选择「妙多 MCP」，即可查看不同 IDE 的 MCP 配置方式。

   配置完成之后，如 MCP 未正常运行，可尝试重启 IDE。

2. 2.

   在妙多文件中复制容器链接。

   1. a.在画布内右键点击要生成代码的容器图层。
   2. b.光标悬停在「复制为」，选择「复制链接」。
3. 3.

   打开 IDE 的对话（例如，Cursor 中的 Agent 模式），在对话中粘贴容器链接。

4. 4.

   针对妙多设计稿给出相关指令，例如：

   • 帮我创建一个 React 项目。
   • 帮我基于这个设计稿，在 components 目录下创建一个新的组件。
5. 5.

   IDE 将自动使用妙多 MCP，从妙多获取相关设计稿数据，并编写代码。

常见问题

1. 1.

   为什么妙多 MCP 配置完成后无法正常启用？ 已知部分 IDE 在启动 npx MCP Server 时，可能出现偶发性失败。若你已按照文档中的提示完成以下操作：

   • 本地安装 Node.js（≥18 版本）。
   • 完成配置后已重启 IDE。

   如依然无法正常启动妙多 MCP，建议尝试重启电脑，通常可以解决该问题。

2. 2.

   妙多提供的数据是什么格式？ 妙多 MCP 服务器支持导出设计内容的 HTML 数据。相较于设计内容的 JSON 数据，HTML 格式更便于让大模型理解界面结构与视觉层级，从而生成高还原度的前端代码。

3. 3.

   哪些因素会影响生成代码的效果？ 生成代码的效果受多方面因素影响，包括设计内容的复杂度、图层数量、代码生成类型、AI 编程工具对数据的处理方式以及所用大模型的能力。具体如下：

   • 设计内容的复杂度：当设计内容中存在多层蒙版、多种布尔运算叠加等复杂编辑时，可能使导出的 HTML 难以完全还原，或无法生成响应式布局。你可以尝试将视觉设计内容转换为图片，或缩小导出的范围，以简化设计内容的复杂度。
   • 图层数量：图层数量过多可能会超出大模型的上下文处理能力，导致部分内容无法正确生成。你可以尝试缩小导出范围，以避免上下文溢出的问题。
   • 生成代码的类型：当前结合 AI 编程工具生成代码的原理是，模型读取妙多 MCP 导出的 HTML 数据，再将其转换为目标 UI 框架代码。目前对 React 框架的支持效果较好。 如需生成其他框架，可补充一些上下文信息（如框架文档），再尝试生成。
   • AI 编程工具对数据的处理方式：不同的 AI 编程工具在解析和利用设计数据时能力不同，导致生成代码的质量也有所差异。
   • 大模型自身的能力：当前大模型在理解语义、生成高质量代码方面仍有局限，尤其在处理复杂问题时，表现可能不尽完美。选择更先进的大模型通常能获得更好的还原效果（如 Claude 4.0 、 Gemini 2.5 pro）。