用通义灵码全新智能体+MCP实现从设计稿到前端代码,个人免费用

简介: 通义灵码全新升级,发布国内首个支持“自主决策+工具链闭环”的编程智能体,面向个人免费!新增功能包括智能体模式、混合推理模型Qwen3支持、全面集成MCP中文社区(涵盖2400+服务)及长期记忆能力。用户可通过IDE插件使用,兼容主流开发环境如JetBrains、VS Code和Visual Studio。教程展示如何将MasterGo设计稿转化为前端代码,简化开发流程。探索链接:[通义灵码官网](https://lingma.aliyun.com/)。

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

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


【最新黑科技功能】


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

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

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

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


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


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


通义灵码编程智能体上线


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



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


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



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


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



新增记忆能力(超酷!!)


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



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


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


设计稿

生成效果


下载安装:主流 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。



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



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


Visual Studio Code 插件市场安装指南

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

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

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


Visual Studio 插件市场安装指南


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



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



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


如何选择会话模式


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



通义灵码智能会话模式

推荐使用方式

智能问答

一种纯研发问答模式,当需要进行代码问答、知识问答或者解决编码疑问时,可以选择智能问答模式,此模式可根据您的问题,并结合给出的上下文,给出解决方案和建议,不会直接对工程文件进行修改。

文件编辑

一种精准的代码修改模式,具备多文件代码修改的能力,当开发者需要精准地修改代码文件时,能够结合需求描述和当前工程环境进行多文件修改,并且可以进行多次迭代、代码审查,帮助开发者高效可控地完成代码修改任务。

智能体

一种自主的编码任务执行模式,具备自主决策、环境感知、工具使用等能力,可以根据开发者的编码诉求,使用工程检索、文件编辑、终端等工具,可以端到端地完成编码任务。同时,支持开发者配置 MCP 工具,编码更加贴合开发者工作流程。


如何选择模型


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



MCP 服务配置与使用实践


添加 MCP 服务


1.进入 MCP 服务页面


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



2.添加服务


方式一:通过 MCP 广场完成添加


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



方式二:通过手动方式完成添加


  1. MCP 服务页面右上角单击“+”选择以下方式完成添加:
  • 手工添加:
  • STDIO 类型:填写名称、命令、参数和环境变量(选填)。
  • SSE 类型:填写名称和服务地址。
  • 配置文件添加:
  • 在 JSON 配置文件中增加服务对应的JSON配置信息。
  1. 添加完成后,即可看到新安装的服务。图标显示为 ,表示连接成功可正常使用。展开详情,可以看到 MCP 提供的工具列表。



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


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


MCP 配置与设计稿

{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@mastergo/magic-mcp",
        "--token=<MG_MCP_TOKEN>",
        "--url=https://mastergo.com"
      ],
      "env": {}
    }
  }
}


设计稿与 MasterGo MCP 源码


添加 MCP 服务

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



  1. 在 MCP 服务面板填写参数信息如下:


-y @mastergo/magic-mcp --token=<MG_MCP_TOKEN> --url=https://mastergo.com



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



使用 MCP工具


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


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


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



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



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



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

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


点击链接,用通义灵码探索无限可能。

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

相关文章
|
24天前
|
人工智能 自然语言处理 IDE
通义灵码 × Qwen3:编程智能体上线
通义灵码现已全面支持Qwen3,正式上线编程智能体。升级后的工具不再只是代码生成器,而是能理解任务的智能搭档,依托Qwen3能力结合MCP服务,自动感知项目结构、分析需求并调用多种工具完成编码任务。通过自然语言输入,开发者可在10分钟内完成原本需1~2天的App开发工作。此外,通义灵码支持工程级变更、自动上下文感知、工具自主使用及终端命令执行,深度集成3000+ MCP服务,覆盖DevOps全流程。目前插件下载量超1500万,累计生成代码超30亿行。体验只需将插件升级至2.5.0版本以上并在VS Code或JetBrains IDE中启用。
97 24
|
28天前
|
自然语言处理 API 开发工具
端午出游高定:通义灵码+高德 MCP 10 分钟定制出游攻略
本文介绍了如何使用通义灵码编程智能体和高德MCP 2.0制作北京端午3天旅行攻略页面。首先需下载通义灵码AI IDE并获取高德申请的key,通过添加MCP服务、生成travel_tips.html文件完成初步攻略制作。用户可自定义页面风格、固定基础功能页面生成,并扩展MCP服务以满足多样化需求。文章还详细描述了开发专属MCP服务的过程,包括借助通义灵码编写代码、部署服务及调用工具,最终实现个性化旅游攻略生成。此外,提供了相关资料和参考链接,方便读者深入了解和实践。
|
11天前
|
数据采集 存储 人工智能
智能体(AI Agent)开发实战之【LangChain】(二)结合大模型基于RAG实现本地知识库问答
智能体(AI Agent)开发实战之【LangChain】(二)结合大模型基于RAG实现本地知识库问答
|
16天前
|
人工智能 Cloud Native 数据可视化
微医控股与阿里云达成战略合作,双方将携手基于通义千问大模型联合打造医疗全场景智能体,共同构建医疗垂类大模型
2025年6月17日,微医控股与阿里云达成战略合作,共建医疗AI基座及医疗全场景智能体。双方将基于通义千问大模型打造医疗垂类大模型,升级微医“5+1”智能体,并在诊断、用药、健康管理等环节深化应用。微医将结合阿里云技术优势推进IDC上云,助力AI+医疗基础设施建设,共同制定行业标准并推广城市级AI数字健共体。目前,微医AI服务已连接全国1.2万家医院和30万名医生,健康管理会员超100万。
|
27天前
|
人工智能 IDE 搜索推荐
通义灵码2.5评测:从编程智能体到记忆感知的AI编码革命
通义灵码2.5版本更新带来了多项新功能,包括Lingma IDE的开箱即用体验、编程智能体模式实现端到端编码任务、MCP工具集成扩展AI助手能力以及Qwen3模型升级大幅提升代码生成准确性和效率。此外,新增长期记忆与上下文感知功能,使开发更个性化和高效。尽管存在一些局限性,如复杂业务逻辑仍需人工干预,但整体显著提升了开发效率。官方还提供了高质量视频课程助力用户学习。
396 10
|
24天前
|
人工智能 IDE 算法
通义灵码 AI IDE 上线!智能体+MCP 从手动调用工具过渡到“AI 主动调度资源”
编程智能体与 MCP 的结合,不只是“工具+助手”,而是一次范式上的跃迁——从“手动调用工具”过渡到“AI 主动调度资源”。
|
29天前
|
IDE 前端开发 开发工具
用通义灵码IDE做产品高保真原型和前端页面
通义灵码IDE助力高效开发,告别传统Axure原型图的繁琐沟通。通过该工具可直接生成高保真产品原型与前端页面,大幅提升客户确认效率及满意度。现已将相关演示发布至B站(https://www.bilibili.com/video/BV18qT7ziEb7/?vd_source=dc6a6864c895818db6ce4170d50b3557),欢迎体验!用直观操作代替反复说明,让交付更流畅。
|
22天前
|
人工智能 API 开发者
智能体(AI Agent)开发实战之【LangChain】(一)接入大模型输出结果
LangChain 是一个开源框架,专为构建与大语言模型(LLMs)相关的应用设计。通过集成多个 API、数据源和工具,助力开发者高效构建智能应用。本文介绍了 LangChain 的环境准备(如安装 LangChain、OpenAI 及国内 DeepSeek 等库)、代码实现(以国内开源大模型 Qwen 为例,展示接入及输出结果的全流程),以及核心参数配置说明。LangChain 的灵活性和强大功能使其成为开发对话式智能应用的理想选择。
|
28天前
|
API 定位技术 决策智能
通义灵码产品评测报告:智能体赋能编程新时代
本次评测深度体验阿里云通义灵码(Qwen3版本),聚焦其智能体架构、MCP工具集成与记忆能力升级。通过构建天气查询与出行建议微服务,验证其从零搭建项目的能力。评测显示,通义灵码可自动感知环境、调用工具、生成代码,支持3000+ MCP服务一键集成,并具备项目级记忆和风格适应功能。最终实现高效开发闭环,大幅提升生产力。总结其核心优势为智能体自主决策、MCP生态扩展及记忆进化,但仍需优化多智能体协作与兼容性检查等功能。通义灵码重新定义编码助手边界,是开发者“超脑级”搭档。
62 0
|
28天前
|
人工智能 IDE 定位技术
通义灵码 AI IDE 正式上线,智能体自动写代码,首创自动记忆,工程感知全面升级
阿里云发布的通义灵码AI IDE深度适配千问3大模型,集成智能编码助手功能,支持编程智能体、工具调用、工程感知等能力。其核心亮点包括:支持最强开源模型千问3,全面集成通义灵码插件能力,自带编程智能体模式,支持长期记忆与行间建议预测(NES)。通义灵码已覆盖主流IDE,助力开发者实现高效智能编程,插件下载量超1500万,生成代码超30亿行,成为国内最受欢迎的辅助编程工具。立即体验更智能的开发流程!
245 0

热门文章

最新文章

OSZAR »