通义灵码新增智能体+MCP!个人免费用!

部署运行你感兴趣的模型镜像

 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 配置与设计稿
{  "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
2. 添加 MCP 服务
  1. 1. 进入个人设置中的 MCP 服务,然后在 MCP 服务页面,完成 MCP 服务连接配置。

Image

  1. 2. 在 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=<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 工具读取设计稿,根据用户的编码习惯,选择合适的技术栈、自动创建好工程文件、定义开发规范,实时反馈生成效果,甚至生成研发文档。整个过程用户只需要一句话和点几个确认键即可。

您可能感兴趣的与本文相关的镜像

Qwen3-8B

Qwen3-8B

文本生成
Qwen3

Qwen3 是 Qwen 系列中的最新一代大型语言模型,提供了一整套密集型和专家混合(MoE)模型。基于广泛的训练,Qwen3 在推理、指令执行、代理能力和多语言支持方面取得了突破性进展

通义 MCP 协议在前端开发中扮演着至关重要的角色,它不仅简化了开发流程,还提升了开发效率。通过与 DMS(数据管理服务)的结合,MCP 协议能够提供一套完整的解决方案,涵盖从设计稿解析到代生成的全过程。具体来说,通义能够根据设计稿自动生成前端代,支持多种技术栈的选择,确保生成的代符合项目规范,同时还能实时反馈生成效果,极大地减少了手动编的工作量[^2]。 ### 前端开发中的具体应用 #### 1. 设计稿到代的自动化转换 通义支持从设计稿直接生成前端代的功能。开发者只需提供设计稿,系统即可自动识别设计稿中的元素,并将其转换为相应的 HTML、CSS 和 JavaScript 代。这一过程不仅节省了大量的手动编时间,还减少了因人为错误导致的问题。 #### 2. 技术栈的选择与适配 在生成代的过程中,通义能够根据项目的实际需求和技术栈的特点,智能选择最适合的技术栈。例如,对于需要高性能交互的应用,可以选择 React 或 Vue 框架;而对于静态页面,则可能更适合使用纯 HTML 和 CSS。这种活性使得开发者可以根据项目需求做出最优的技术选择。 #### 3. 实时效果预览与反馈 生成代后,通义提供了实时预览功能,允许开发者即时查看生成效果。如果发现任何不符合预期的地方,可以快速调整设计稿或参数设置,再次生成代。这种即时反馈机制有助于提高开发效率,确保最终成果满足设计要求。 #### 4. 自动化文档生成 除了代生成外,通义还支持自动生成研发文档。这些文档不仅包括了代的结构说明,还包括了组件的使用方法、API 接口文档等,为后续的维护和团队协作提供了便利。 #### 示例代 以下是一个简单的示例,展示如何使用通义生成的 React 组件代: ```jsx import React from 'react'; const Button = ({ text, onClick }) => { return ( <button onClick={onClick}> {text} </button> ); }; export default Button; ``` 这段代是一个基本的按钮组件,包含了文本显示和点击事件处理。通过通义,开发者可以轻松生成类似的组件,从而加快开发速度。 ### 结论 通义 MCP 协议在前端开发中的应用,不仅提高了开发效率,还降低了开发难度,使得开发者能够更加专注于业务逻辑的实现。随着技术的不断进步,相信通义将在未来的前端开发中发挥更大的作用。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值