妙多 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.

   打开 IDE 的对话（例如，Cursor 中的 Agent 模式）。

3. 3.

   在 IDE 对话中粘贴容器链接。

4. 4.

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

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

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

常见问题

1. 1.

   妙多提供的设计稿数据是什么格式？

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

2. 2.

   为什么有时生成代码的效果会与设计内容存在差异？

   设计稿太复杂、图层数量过多、AI 编程工具数据处理得不好和大模型的局限性都可能导致生成代码的效果与设计稿存在差异。

   • 设计内容的复杂度：当设计内容中存在多层蒙版、多种布尔运算叠加等复杂编辑时，有可能使导出的 HTML 无法完全还原，或无法生成响应式布局。你可以尝试将视觉设计内容转换为图片，或缩小导出的范围，以简化设计内容的复杂程度。
   • 图层数量：图层数量过多可能会超出大模型的上下文处理能力，从而导致部分内容无法正确还原。你可以尝试缩小导出范围，以避免上下文溢出的问题。
   • AI 编程工具对数据的处理方式：不同的 AI 编程工具在解析和利用设计数据时能力不同，导致生成代码的质量也有所差异。
   • 大模型自身的能力：当前大模型在理解语义、生成高质量代码方面仍有局限，尤其在处理复杂问题时，表现可能不尽完美。选择更先进的大模型通常能获得更好的还原效果。