Datawhale

 Datawhale干货 

最新:AI编程助手,通义灵码

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

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

【最新黑科技功能】

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

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

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

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

最新MCP功能的保姆级教程

教程内容:用通义灵码将 MasterGo 设计稿转化为前端代码

效果速览:设计稿与生成结果对比

设计稿

Image

生成效果

Image

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. 1. 打开 IntelliJ IDEA 设置窗口,在插件市场中搜索 Lingma,找到通义灵码后单击安装。
  2. 2. 安装完成后,重启 IntelliJ IDEA。

Image

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

Image

4.单击登录后,将前往登录页面,完成登录后可进入 IDE 客户端开始使用。

Visual Studio Code 插件市场安装指南

  1. 1. 打开 Visual Studio Code 扩展窗口,搜索 Lingma,找到通义灵码后单击安装。
  2. 2. 安装完成后,请重启 Visual Studio Code。

Image

  1. 3. 安装完成后,重启 Visual Studio Code。
  2. 4. 重启 Visual Studio Code 后,单击侧边导航的通义灵码,在通义灵码助手的窗口单击登录按钮。

Image

  1. 5. 单击登录后,将前往登录页面,完成登录后可进入 IDE 客户端开始使用。

Visual Studio 插件市场安装指南

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

Image

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

Image

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

2. 如何选择会话模式

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

Image

3. 如何选择模型

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

4. MCP 服务配置与使用实践

1️⃣ 添加 MCP 服务

1.进入 MCP 服务页面

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

Image

2.添加服务

方式一:通过 MCP 广场完成添加
  1. 1. 单击MCP 广场 标签,可以看到推荐的 MCP 服务列表以及魔搭社区提供的全部 MCP 服务。
  2. 2. 在 MCP 广场 中,浏览或搜索所需 MCP 服务,单击 安装 完成一键自动安装。
  3. 3. 安装完成后,返回我的服务页面,即可看到新安装的服务。图标显示为,表示连接成功可正常使用。展开详情,可以看到 MCP 提供的工具列表。

Image

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

    1️⃣ STDIO 类型:填写名称、命令、参数和环境变量(选填)。

    2️⃣ SSE 类型:填写名称和服务地址。

  • 配置文件添加:
  • 在 JSON 配置文件中增加服务对应的JSON配置信息。
  1. 2. 添加完成后,即可看到新安装的服务。图标显示为,表示连接成功可正常使用。展开详情,可以看到 MCP 提供的工具列表。

Image

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

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

1. MCP 配置与设计稿

{

设计稿与 MasterGo MCP 源码

2. 添加 MCP 服务

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

Image

  1. 2. 在 MCP 服务面板填写参数信息如下:
  • 名称:mastergo
  • 类型:STDIO
  • 命令:npx
  • 参数:请获取您的 MasterGo 个人 token(获取方式:https://github.com/mastergo-d...\_mcp\_token),并将其替换为实际值。
  • 环境变量(选填)
-y @mastergo/magic-mcp --token=<MG_MCP_TOKEN> --url=https://mastergo.com

Image

  1. 3. 配置完成后,开关默认打开状态,并且图标显示为,表示连接成功可正常使用。

Image

3. 使用 MCP工具

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

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

根据这个mastergo的设计图实现前端代码:https://mastergo.com/file/157557668024262?page_id=1%3A1303&layer_id=1%3A1500

Image

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

Image

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

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

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


Datawhale
43 声望11 粉丝

Datawhale 是一个专注于 AI 领域的开源组织,致力于构建一个纯粹的学习圈子,帮助学习者更好地成长。我们专注于机器学习,深度学习,编程和数学等AI领域内容的产出与学习。