免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

作者

最近，通义灵码迎来了全新升级！阿里云推出了国内首个支持“自主决策+工具链闭环”的编程智能体，而且针对个人用户是免费的哦！

访问链接：https://lingma.aliyun.com/

【新黑科技功能】

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

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

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

4️⃣ 增加了长期记忆能力。

今天，咱们一起来看看通义灵码这次发布带来的新亮点，并通过将MasterGo设计稿转化为前端代码的实际案例，学习如何在通义灵码中调用MCP服务。

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

通义灵码编程智能体正式上线

通义灵码全新推出的智能体模式，能自主决策、感知环境、使用工具，能够根据开发者的需求，灵活运用工程检索、文件编辑、终端等工具，完成编码任务。同时，开发者还可以配置MCP工具，编码过程更贴合实际工作流程。而之前的AI程序员功能现在改名为“文件编辑”模式了。

免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

率先支持混合推理模型Qwen3

通义灵码现在全面支持Qwen3，这个模型采用了混合专家（MoE）架构，参数量仅为DeepSeek-R1的1/3，也是国内首个“混合推理模型”，它把“快思考”和“慢思考”结合在同一个模型里，简单问题能快速回应，而复杂问题则可以经过多步深入思考，在ChatBot Arena等榜单上，其表现全面超越了R1、OpenAI-o1等全球顶尖模型，成为全球最强的开源模型。

免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

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

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

免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

全新记忆功能（太神奇了！）

通义灵码现在具备长期记忆的能力。在开发者与它的交流中，灵码会逐步积累关于开发者的个人信息、项目和问题等各种细节，并会自动整理和更新这些记忆。这样的记忆功能使得通义灵码能更好地理解开发者，随着时间的推移，它也会变得越来越聪明哦。

免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

实用教程：用通义灵码将 MasterGo 设计稿转换为前端代码

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

设计稿

免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

生成效果

轻松安装通义灵码插件，让开发更高效！

免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

下载安装：主流 IDE 完全兼容

通义灵码插件支持以下 IDE 和操作系统：

  • JetBrains 系列：包括 IntelliJ IDEA 2020.3 及以上版本。
  • Visual Studio Code：版本需在 1.68.0 及以上。
  • Visual Studio：2022 版本 17.3.0 及以上。
  • 操作系统：Windows 7 及更高版本、macOS 和 Linux。

JetBrains 插件市场的安装步骤

以 IntelliJ IDEA 为例，来看看如何安装通义灵码：

  1. 首先打开 IntelliJ IDEA 的设置窗口，在插件市场中搜索“Lingma”，找到通义灵码并点击安装。
  2. 安装完成后，记得重启 IntelliJ IDEA。
免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！
  1. 重启后，在侧边栏找到通义灵码，点击助手窗口中的登录按钮。
免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

4.点击登录后，会跳转到登录页面，登录成功后就可以在 IDE 客户端中使用了。

Visual Studio Code 插件安装小指南

  1. 首先，打开 Visual Studio Code 的扩展窗口，输入“Lingma”进行搜索，找到通义灵码后点击安装就行了。
  2. 安装好之后，别忘了重启 Visual Studio Code。
免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！
  1. 重启后，再次打开 Visual Studio Code。
  2. 接下来，点击侧边栏的通义灵码，助手窗口里会有个登录按钮，直接点击就好。
免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！
  1. 登录后会跳转到一个页面，完成登录就能在 IDE 客户端里开始使用了。

Visual Studio 插件安装小指南

  1. 打开 Visual Studio，点击顶部的扩展-管理扩展，搜索“Lingma”，找到通义灵码后直接安装。
  2. 等安装完成，记得重启 Visual Studio。
免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！
  1. 重启 Visual Studio 后，点击顶部导航栏中的工具选项。

    2. 轻松掌握通义灵码：插件使用小贴士

    免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

    1. 一旦点击登录，你就会被带到登录页面，完成后就能在 IDE 客户端开启你的旅程。

    会话模式的选择技巧

    在通义灵码的新版本中，你可以找到智能问答、文件编辑和智能体三种不同的会话模式。你可以在同一个会话中随意切换，无需重新启动会话，完全根据你的需求来调整。

    免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

    通义灵码智能会话模式

    推荐使用方法

    智能问答

    这是一种专注于研发的问答模式，特别适合处理代码相关的问题。你可以在有编码疑问时选择这个模式，它会根据你的提问和上下文提供解决方案，但不会直接更改你的工程文件。

    文件编辑

    这是一种精准的代码修改模式，支持多个文件的修改。当你需要精准调整代码时，它会结合你的需求和当前的工程环境，帮助你高效完成修改任务，并进行多次迭代和代码审查。

    智能体

    这是一个自动执行编码任务的模式，具备自主决策、环境感知和工具使用能力。它可以根据你的编码需求，利用工程检索、文件编辑和终端等工具，完成从头到尾的编码任务，甚至支持你配置 MCP 工具，确保编码更贴合你的工作流程。

    选择模型的方法

    在使用通义灵码的 IDE 插件时，你可以在智能会话中选择推理服务模型。在会话窗口的输入框中点击菜单，选择你需要的模型。目前支持最新的 Qwen3 系列，包括：qwen3、qwen3-thinking、qwen2.5-max、deepseek-r1 和 deepseek-v3。

    免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

    MCP 服务的设置与使用体验

    如何添加 MCP 服务

    1. 进入 MCP 服务界面

    你可以点击通义灵码的欢迎语中的 MCP 工具链接，或者在右上角头像旁边进入个人设置，然后点击条形框，接下来就能进入 MCP 服务的页面啦。

    免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

    2. 添加服务

    选择方法一：通过 MCP 广场来完成添加

    1. 首先，点击 MCP 广场 标签，就能看到推荐的 MCP 服务列表，还有魔搭社区提供的所有 MCP 服务哦。
    2. 接着，在 MCP 广场 中，随意浏览或者搜索你需要的 MCP 服务，点击安装后，就能一键搞定自动安装的步骤。
    3. 安装完成之后，返回我的服务页面，你就能看到新装的服务了，图标会显示为，表示连接已经成功，可以正常使用。展开详情后，还能看到 MCP 提供的工具列表。

      4. ### 手动添加MCP服务的简易指南

      免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

      方法二：手动添加服务

      1. 在 MCP 服务页面的右上角点击“+”，然后选择合适的方式进行添加：

      手动添加方式：

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

配置文件添加：

  • 在 JSON 配置文件中，增加相应的服务信息。

2. 完成添加后，你就能看到新装的服务了。若图标显示正常，说明连接成功，可以开始使用。展开详情还会看到 MCP 提供的工具列表。

免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

实践分享：用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服务页面完成服务连接的配置。

    2. 如何轻松设置MCP服务

    免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！
    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，轻松将设计稿转为前端代码！
  1. 配置完成后，开关会默认为打开状态，图标也会显示连接成功，可以放心使用了。
免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！

使用 MCP工具的步骤

  1. 在通义灵码的IDE窗口左下角切换到智能体模式，并在对话框中输入提示内容。

记得把提示中的URL换成你实际设计稿的链接哦。

轻松搭建网页，通义灵码让你事半功倍！

要实现前端代码，可以参考这个mastergo的设计图哦：点击这里。

设计图
  1. 如果你需要使用 MCP 工具，记得先确认一下提示再继续哦。
工具使用
  1. 完成问答互动后，别忘了检查生成的代码，确保它符合你的需求哦。
代码审查

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

而现在，只需要一句话——“帮忙根据设计稿开发页面”，通义灵码就能动用 MCP 工具来读取设计稿，依据你的编码习惯选好技术栈，自动生成工程文件，还能定义开发规范，实时告诉你效果，甚至生成研发文档。整个过程只要一句话和点几下确认键就搞定了，真是太方便了！

想要探索更多可能性？点击下面的链接，和通义灵码一起开启新旅程吧！

https://click.aliyun.com/m/1000403627/

来源：今日头条
原文标题：用通义灵码全新智能体+MCP实现从设计稿到前端代码，个人免费用 – 今日头条
原文链接：https://www.toutiao.com/article/7502261214442013223/
声明：
文章来自网络收集后经过ai改写发布，如不小心侵犯了您的权益，请联系本站删除，给您带来困扰，深表歉意！

《免费体验通义灵码智能体与MCP，轻松将设计稿转为前端代码！》有7条评论

  1. 通义灵码的升级真是太棒了，尤其是自主决策和长期记忆功能，让开发更加智能化，期待能在实际项目中应用！

    回复

  2. 这次通义灵码的升级真是令人兴奋，尤其是混合推理模型Qwen3的支持，让我对处理复杂问题充满期待。希望能尽快体验一下！

    回复

  3. 通义灵码的智能体模式真的很有前景，自主决策和工具使用的能力让开发者的工作效率大幅提升，期待更多实用功能的推出。

    回复

  4. 通义灵码的长期记忆功能太厉害了，能够逐步了解开发者的需求，提升工作效率，期待未来的更多应用场景！

    回复

  5. 通义灵码的工具链闭环设计真的很贴心，能够更好地满足开发者的实际需求，提升编码效率，期待更多新功能！

    回复

  6. 通义灵码的智能体模式真是个好主意！自主决策和工具的结合，能让开发者省去很多繁琐的步骤，期待更多实用案例的分享。

    回复

  7. 通义灵码的混合推理模型Qwen3表现超出预期，处理复杂问题的能力令人印象深刻，希望能在实际项目中得到应用！

    回复

发表评论