网站导航
> 技术文档 > 通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

网友: 技术文档 2025-09-02 19:02:33

近期，通义灵码全新升级：阿里云发布国内首个支持「自主决策+工具链闭环」的编程智能体，面向个人免费！

网址：https://lingma.aliyun.com/

【最新黑科技功能】

1️⃣ 通义灵码新增智能体模式，具备自主决策、环境感知、工具使用等能力。

2️⃣ 支持国内首个混合推理模型 Qwen3。

3️⃣ 全面支持 MCP 能力，深度集成国内最大 MCP 中文社区，涵盖十大热门领域 2400+ MCP 服务。

4️⃣ 新增长期记忆能力。

今天，就让我们一起了解通义灵码本次发布又带来了哪些新的亮点，并以将 MasterGo 设计稿转化为前端代码的实践为例，学习如何在通义灵码中调用 MCP 服务。

通义灵码全新升级亮点速览

通义灵码编程智能体上线

通义灵码新增智能体模式，具备自主决策、环境感知、工具使用等能力，可以根据开发者的编码诉求，使用工程检索、文件编辑、终端等工具，可以端到端地完成编码任务。同时，支持开发者配置 MCP 工具，编码更加贴合开发者工作流程。原 AI 程序员功能更名为“文件编辑”模式。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

支持国内首个混合推理模型 Qwen3

通义灵码现在已全面支持 Qwen3，Qwen3 采用混合专家（MoE）架构，参数量仅为 DeepSeek-R1 的 1/3，也是国内首个“混合推理模型”，“快思考”与“慢思考”集成进同一个模型，对简单需求可“秒回”答案，对复杂问题可多步骤“深度思考”，在 ChatBot Arena 等榜单中性能全面超越 R1、OpenAI-o1 等全球顶尖模型，登顶全球最强开源模型。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

全面支持 MCP 能力，深度集成国内最大 MCP 中文社区

通义灵码编程智能体支持 MCP 工具使用，根据用户需求描述，通过模型自主规划，实现 MCP 工具调用，并深度集成国内最大的 MCP 中文社区——魔搭 MCP 广场，涵盖开发者工具、文件系统、搜索、地图等十大热门领域 2400+ MCP 服务，全面拓宽 AI 编码助手能力边界，更加贴合开发者工作流程。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

新增记忆能力（超酷！！）

新增长期记忆能力，在开发者与灵码的对话过程，会逐渐形成针对开发者个人、工程、问题等相关的丰富记忆，并自动进行相关的记忆整理和更新。记忆能力可以帮助通义灵码更好地和开发者互动，随着时间流逝，也能够让通义灵码越来越懂开发者。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

保姆教程：用通义灵码将 MasterGo 设计稿转化为前端代码

Demo 速览与效果展示：

点击立即观看：https://mp.weixin.qq.com/s/QRBjf0kKOCPoXJvmcPbF8A

效果预览：设计稿与生成结果对比

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

1. 下载安装：主流 IDE 兼容

通义灵码插件兼容以下 IDE 版本和操作系统：

  • JetBrains IDEs: IntelliJ IDEA 等 2020.3 及以上版本。
  • Visual Studio Code: 1.68.0 及以上版本。
  • Visual Studio: 2022 17.3.0 及以上版本。
  • 操作系统：Windows 7及以上、macOS、Linux。
JetBrains IDEs 插件市场安装指南

我们以在 IntelliJ IDEA 中安装通义灵码为例：

  1. 打开 IntelliJ IDEA 设置窗口，在插件市场中搜索 Lingma，找到通义灵码后单击安装。

  2. 安装完成后，重启 IntelliJ IDEA。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

  1. 重启 IntelliJ IDEA 后，单击侧边导航的通义灵码，在通义灵码助手的窗口单击登录按钮。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

  1. 单击登录后，将前往登录页面，完成登录后可进入 IDE 客户端开始使用。
Visual Studio Code 插件市场安装指南

  1. 打开 Visual Studio Code 扩展窗口，搜索 Lingma，找到通义灵码后单击安装。

  2. 安装完成后，请重启 Visual Studio Code。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

  1. 安装完成后，重启 Visual Studio Code。

  2. 重启 Visual Studio Code 后，单击侧边导航的通义灵码，在通义灵码助手的窗口单击登录按钮。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

  1. 单击登录后，将前往登录页面，完成登录后可进入 IDE 客户端开始使用。
Visual Studio 插件市场安装指南

  1. 打开 Visual Studio 顶部扩展-管理扩展窗口，搜索 Lingma，找到通义灵码后单击安装。

  2. 安装完成后，重启 Visual Studio。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

  1. 重启 Visual Studio 后，单击顶部导航工具

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

  1. 单击登录后，将前往登录页面，完成登录后可前往 IDE 客户端开始使用

2. 如何选择会话模式

通义灵码新版本提供智能问答、文件编辑、智能体三种模式，支持同一个会话流中切换智能问答、文件编辑、智能体模式，开发者在会话过程中，无需新建会话即可根据诉求自由切换会话模式：

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

3. 如何选择模型

通义灵码 IDE 插件在智能会话中支持选择推理服务模型。在智能会话窗口的输入框中，单击模型选择的下拉菜单即可选择所需模型。目前支持最新 Qwen3 系列模型，可选模型为：qwen3、qwen3-thinking、qwen2.5-max、deepseek-r1、deepseek-v3。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

MCP 服务配置与使用实践

添加 MCP 服务
1. 进入 MCP 服务页面

单击通义灵码欢迎语中的 MCP 工具链接，或在右上角头像处进入个人设置，单击条形框，进入 MCP 服务页面。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

2. 添加服务
方式一：通过 MCP 广场完成添加

  1. 单击 MCP 广场标签，可以看到推荐的 MCP 服务列表以及魔搭社区提供的全部 MCP 服务。

  2. 在 MCP 广场 中，浏览或搜索所需 MCP 服务，单击 安装 完成一键自动安装。

  3. 安装完成后，返回我的服务页面，即可看到新安装的服务。图标显示为通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码，表示连接成功可正常使用。展开详情，可以看到 MCP 提供的工具列表。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

方式二：通过手动方式完成添加
  1. 在 MCP 服务页面右上角单击“+”选择以下方式完成添加：

  • 手工添加：

    • STDIO 类型：填写名称、命令、参数和环境变量（选填）。
    • SSE 类型：填写名称和服务地址。

  • 配置文件添加：

    • 在 JSON 配置文件中增加服务对应的JSON配置信息。
  1. 添加完成后，即可看到新安装的服务。图标显示为通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码，表示连接成功可正常使用。展开详情，可以看到 MCP 提供的工具列表。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

使用实践：使用 MCP 工具实现通义灵码官网从设计稿到页面开发

在 UI 设计到前端代码的转化场景中（如通过 MasterGo 平台实现设计稿智能生成代码），传统开发模式常面临样式还原度低、多端适配繁琐及代码维护成本高等挑战。MCP 服务通过智能解析设计稿结构与样式规则，自动生成符合企业设计规范的前端代码，实现高保真视觉还原与多端适配，减少人工编写重复代码的工作量，保障代码可维护性。

MCP 配置与设计稿
{ \"mcpServers\": { \"mastergo-magic-mcp\": { \"command\": \"npx\", \"args\": [ \"-y\", \"@mastergo/magic-mcp\", \"--token=\", \"--url=https://mastergo.com\" ], \"env\": {} } }}

设计稿与 MasterGo MCP 源码

  • 灵码官网设计稿示例：

    https://mastergo.com/file/157557668024262?page_id=1%3A1303&layer_id=1%3A1500

  • MasterGo MCP 源码：

    https://github.com/mastergo-design/mastergo-magic-mcp?tab=readme-ov-file

添加 MCP 服务
  1. 进入个人设置中的 MCP 服务，然后在 MCP 服务页面，完成 MCP 服务连接配置。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

  1. 在 MCP 服务面板填写参数信息如下：
  • 名称：mastergo
  • 类型：STDIO
  • 命令：npx
  • 参数：请获取您的 MasterGo 个人 token（获取方式：https://github.com/mastergo-design/mastergo-magic-mcp?tab=readme-ov-file#obtaining-mg_mcp_token），并将其替换为实际值。
  • 环境变量（选填）
-y @mastergo/magic-mcp --token= --url=https://mastergo.com

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

  1. 配置完成后，开关默认打开状态，并且图标显示为通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码，表示连接成功可正常使用。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

使用 MCP 工具
  1. 在通义灵码的 IDE 对话框左下角切换为智能体模式，并在对话框中输入提示词。

需替换提示词中的 URL 为您的实际设计稿地址。

根据这个 mastergo 的设计图实现前端代码：

https://mastergo.com/file/157557668024262?page_id=1%3A1303&layer_id=1%3A1500

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

  1. 如果需要调用 MCP 工具系统提示等待您的确认再继续执行。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

  1. 问答交互完成后，您可以审查生成的代码结果，确保其符合预期并满足您的需求。

通义灵码智能体+MCP：将 MasterGo 设计稿转化为前端代码_mastergo生成的ai页面怎么转换成代码

以前，搭建一个网页至少需经历项目初始化、组件开发、状态管理、交互实现、响应式布局、性能优化等步骤。

今天，只需一句话——“帮忙根据设计稿开发页面”，通义灵码就能调用 MCP 工具读取设计稿，根据用户的编码习惯，选择合适的技术栈、自动创建好工程文件、定义开发规范，实时反馈生成效果，甚至生成研发文档。整个过程用户只需要一句话和点几个确认键即可。

点击此处，用通义灵码探索无限可能。

MCP 使用指南：https://help.aliyun.com/zh/lingma/user-guide/guide-for-using-mcp

网络标签：

相关问题