用通义灵码全新智能体+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/

相关文章
|
4月前
|
人工智能 缓存 监控
使用LangChain4j构建Java AI智能体:让大模型学会使用工具
AI智能体是大模型技术的重要演进方向,它使模型能够主动使用工具、与环境交互,以完成复杂任务。本文详细介绍如何在Java应用中,借助LangChain4j框架构建一个具备工具使用能力的AI智能体。我们将创建一个能够进行数学计算和实时信息查询的智能体,涵盖工具定义、智能体组装、记忆管理以及Spring Boot集成等关键步骤,并展示如何通过简单的对话界面与智能体交互。
1518 1
|
4月前
|
机器学习/深度学习 数据采集 人工智能
通义实验室Mobile-Agent-v3开源,全平台SOTA的GUI智能体,支持手机电脑等多平台交互
近日,通义实验室MobileAgent团队正式开源全新图形界面交互基础模型 GUI-Owl,并同步推出支持多智能体协同的自动化框架 Mobile-Agent-v3。该模型基于Qwen2.5-VL打造,在手机端与电脑端共8个GUI任务榜单中全面刷新开源模型性能纪录,达成全平台SOTA。
1532 2
|
3月前
|
人工智能 API 开发工具
构建AI智能体:一、初识AI大模型与API调用
本文介绍大模型基础知识及API调用方法,涵盖阿里云百炼平台密钥申请、DashScope SDK使用、Python调用示例(如文本情感分析、图像文字识别),助力开发者快速上手大模型应用开发。
1647 16
构建AI智能体:一、初识AI大模型与API调用
|
3月前
|
人工智能 安全 开发工具
C3仓库AI代码门禁通用实践:基于Qwen3-Coder+RAG的代码评审
本文介绍基于Qwen3-Coder、RAG与Iflow在C3级代码仓库落地LLM代码评审的实践,实现AI辅助人工评审。通过CI流水线自动触发,结合私域知识库与生产代码同仓管理,已成功拦截数十次高危缺陷,显著提升评审效率与质量,具备向各类代码门禁平台复用推广的价值。(239字)
806 24
|
3月前
|
人工智能 自然语言处理 安全
AI助教系统:基于大模型与智能体架构的新一代教育技术引擎
AI助教系统融合大语言模型、教育知识图谱、多模态交互与智能体架构,实现精准学情诊断、个性化辅导与主动教学。支持图文语音输入,本地化部署保障隐私,重构“教、学、评、辅”全链路,推动因材施教落地,助力教育数字化转型。(238字)
724 23
|
4月前
|
机器学习/深度学习 人工智能 机器人
AI Compass前沿速览:Nano Bananary、MCP Registry、通义DeepResearch 、VoxCPM、InternVLA·M1具身机器人
AI Compass前沿速览:Nano Bananary、MCP Registry、通义DeepResearch 、VoxCPM、InternVLA·M1具身机器人
|
4月前
|
人工智能 IDE 开发工具
CodeGPT AI代码狂潮来袭!个人完全免费使用谷歌Gemini大模型 超越DeepSeek几乎是地表最强
CodeGPT是一款基于AI的编程辅助插件,支持代码生成、优化、错误分析和单元测试,兼容多种大模型如Gemini 2.0和Qwen2.5 Coder。免费开放,适配PyCharm等IDE,助力开发者提升效率,新手友好,老手提效利器。(238字)
2011 1
CodeGPT AI代码狂潮来袭!个人完全免费使用谷歌Gemini大模型 超越DeepSeek几乎是地表最强
|
4月前
|
人工智能 安全 开发工具
不只是写代码:Qwen Code 如何规划、执行并验证软件工程任务
本文以阿里推出的 CLI 工具 Qwen Code 为例,深入剖析其如何通过精细化的 Prompt 设计(角色定义、核心规范、任务管理、工作流控制),赋予大模型自主规划、编码、测试与验证的能力。

热门文章

最新文章