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

梦随风飞 發表於 2025-5-9 11:06:00

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

<p>近期，通义灵码全新升级：阿里云发布国内首个支持「自主决策+工具链闭环」的编程智能体，面向个人免费！</p>
<p>网址：https://lingma.aliyun.com/</p>
<p><strong>【最新黑科技功能】</strong></p>
<p>1️⃣ 通义灵码新增智能体模式，具备自主决策、环境感知、工具使用等能力。</p>
<p>2️⃣ 支持国内首个混合推理模型 Qwen3。</p>
<p>3️⃣ 全面支持 MCP 能力，深度集成国内最大 MCP 中文社区，涵盖十大热门领域 2400+ MCP 服务。</p>
<p>4️⃣ 新增长期记忆能力。</p>
<p><strong>今天，就让我们一起了解通义灵码本次发布又带来了哪些新的亮点，并以将 MasterGo 设计稿转化为前端代码的实践为例，学习如何在通义灵码中调用 MCP 服务。</strong></p>
<h2 id="通义灵码全新升级亮点速览">通义灵码全新升级亮点速览</h2>
<h3 id="通义灵码编程智能体上线">通义灵码编程智能体上线</h3>
<p>通义灵码新增智能体模式，具备自主决策、环境感知、工具使用等能力，可以根据开发者的编码诉求，使用工程检索、文件编辑、终端等工具，可以端到端地完成编码任务。同时，支持开发者配置 MCP 工具，编码更加贴合开发者工作流程。原AI程序员功能更名为“文件编辑”模式。</p>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509104916273-1261417315.png"></p>
<h3 id="支持国内首个混合推理模型-qwen3">支持国内首个混合推理模型 Qwen3</h3>
<p>通义灵码现在已全面支持 Qwen3，Qwen3 采用混合专家（MoE）架构，参数量仅为 DeepSeek-R1 的1/3，也是国内首个“混合推理模型”，“快思考”与“慢思考”集成进同一个模型，对简单需求可“秒回”答案，对复杂问题可多步骤“深度思考”，在 ChatBot Arena 等榜单中性能全面超越 R1、OpenAI-o1 等全球顶尖模型，登顶全球最强开源模型。</p>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105634292-425545215.png"></p>
<h3 id="全面支持-mcp-能力深度集成国内最大-mcp-中文社区">全面支持 MCP 能力，深度集成国内最大 MCP 中文社区</h3>
<p>通义灵码编程智能体支持 MCP 工具使用，根据用户需求描述，通过模型自主规划，实现 MCP 工具调用，并深度集成国内最大的 MCP 中文社区——魔搭 MCP 广场，涵盖开发者工具、文件系统、搜索、地图等十大热门领域 2400+ MCP 服务，全面拓宽 AI 编码助手能力边界，更加贴合开发者工作流程。</p>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105641888-1610008009.png"></p>
<h3 id="新增记忆能力超酷">新增记忆能力（超酷！！）</h3>
<p>新增长期记忆能力，在开发者与灵码的对话过程，会逐渐形成针对开发者个人、工程、问题等相关的丰富记忆，并自动进行相关的记忆整理和更新。记忆能力可以帮助通义灵码更好地和开发者互动，随着时间流逝，也能够让通义灵码越来越懂开发者。</p>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105651180-2049917761.png"></p>
<h1 id="保姆教程用通义灵码将-mastergo-设计稿转化为前端代码">保姆教程：用通义灵码将 MasterGo 设计稿转化为前端代码</h1>
<p>效果预览：设计稿与生成结果对比</p>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509104255784-1705008121.png"></p>
<h2 id="下载安装主流-ide-兼容">下载安装：主流 IDE 兼容</h2>
<p>通义灵码插件兼容以下 IDE 版本和操作系统：</p>
<ul>
<li>JetBrains IDEs: IntelliJ IDEA等2020.3及以上版本。</li>
<li>Visual Studio Code: 1.68.0及以上版本。</li>
<li>Visual Studio: 2022 17.3.0及以上版本。</li>
<li>操作系统：Windows 7及以上、macOS、Linux。</li>
</ul>
<h4 id="jetbrains-ides-插件市场安装指南">JetBrains IDEs 插件市场安装指南</h4>
<p>我们以在 IntelliJ IDEA 中安装通义灵码为例：</p>
<ol>
<li>打开 IntelliJ IDEA 设置窗口，在插件市场中搜索 Lingma，找到通义灵码后单击安装。</li>
<li>安装完成后，重启 IntelliJ IDEA。</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105723768-1637959494.png"></p>
<ol start="3">
<li>重启 IntelliJ IDEA 后，单击侧边导航的通义灵码，在通义灵码助手的窗口单击登录按钮。</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105733819-2038727476.png"></p>
<p>4.单击登录后，将前往登录页面，完成登录后可进入 IDE 客户端开始使用。</p>
<h4 id="visual-studio-code-插件市场安装指南">Visual Studio Code 插件市场安装指南</h4>
<ol>
<li>打开 Visual Studio Code 扩展窗口，搜索 Lingma，找到通义灵码后单击安装。</li>
<li>安装完成后，请重启 Visual Studio Code。</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105744930-800486599.png"></p>
<ol start="3">
<li>安装完成后，重启 Visual Studio Code。</li>
<li>重启 Visual Studio Code 后，单击侧边导航的通义灵码，在通义灵码助手的窗口单击登录按钮。</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105757329-666323567.png"></p>
<ol start="5">
<li>单击登录后，将前往登录页面，完成登录后可进入 IDE 客户端开始使用。</li>
</ol>
<h4 id="visual-studio-插件市场安装指南">Visual Studio 插件市场安装指南</h4>
<ol>
<li>打开 Visual Studio 顶部扩展-管理扩展窗口，搜索 Lingma，找到通义灵码后单击安装。</li>
<li>安装完成后，重启 Visual Studio。</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105812749-1986738852.png"></p>
<ol start="3">
<li>重启 Visual Studio 后，单击顶部导航工具</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105827999-1589863659.png"></p>
<ol start="4">
<li>单击登录后，将前往登录页面，完成登录后可前往 IDE 客户端开始使用</li>
</ol>
<h3 id="如何选择会话模式">如何选择会话模式</h3>
<p>通义灵码新版本提供<strong>智能问答、文件编辑、智能体</strong>三种模式，支持同一个会话流中切换智能问答、文件编辑、智能体模式，开发者在会话过程中，无需新建会话即可根据诉求自由切换会话模式：</p>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105840309-1295985292.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105854763-1903826109.png"></p>
<h3 id="如何选择模型">如何选择模型</h3>
<p>通义灵码 IDE 插件在智能会话中支持选择推理服务模型。在智能会话窗口的输入框中，单击模型选择的下拉菜单即可选择所需模型。目前支持最新 Qwen3 系列模型，可选模型为：qwen3、qwen3-thinking、qwen2.5-max、deepseek-r1、deepseek-v3。</p>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105906165-2020162008.png"></p>
<h3 id="mcp-服务配置与使用实践">MCP 服务配置与使用实践</h3>
<h3 id="添加-mcp-服务">添加 MCP 服务</h3>
<h4 id="1进入-mcp-服务页面">1.进入 MCP 服务页面</h4>
<p>单击通义灵码欢迎语中的 <strong>MCP 工具</strong>链接，或在右上角头像处进入<strong>个人设置</strong>，单击条形框，进入 <strong>MCP 服务</strong>页面。</p>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105912688-794626275.png"></p>
<h4 id="2添加服务">2.添加服务</h4>
<h5 id="方式一通过-mcp-广场完成添加">方式一：通过 MCP 广场完成添加</h5>
<ol>
<li>单击 <strong>MCP 广场</strong> 标签，可以看到推荐的 MCP 服务列表以及魔搭社区提供的全部 MCP 服务。</li>
<li>在 <strong>MCP 广场</strong> 中，浏览或搜索所需 MCP 服务，单击 安装 完成一键自动安装。</li>
<li>安装完成后，返回我的服务页面，即可看到新安装的服务。图标显示为<img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105926070-1140510224.png">，表示连接成功可正常使用。展开详情，可以看到 MCP 提供的工具列表。</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105937869-1522760323.png"></p>
<h5 id="方式二通过手动方式完成添加">方式二：通过手动方式完成添加</h5>
<ol>
<li>
<p>在 MCP 服务页面右上角单击“+”选择以下方式完成添加：</p>
<ul>
<li>
<p>手工添加：</p>
<ul>
<li>STDIO 类型：填写名称、命令、参数和环境变量（选填）。</li>
<li>SSE 类型：填写名称和服务地址。</li>
</ul>
</li>
<li>
<p>配置文件添加：</p>
<ul>
<li>在 JSON 配置文件中增加服务对应的JSON配置信息。</li>
</ul>
</li>
</ul>
</li>
<li>
<p>添加完成后，即可看到新安装的服务。图标显示为<img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509105926070-1140510224.png">，表示连接成功可正常使用。展开详情，可以看到 MCP 提供的工具列表。</p>
</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509110006662-427873774.png"></p>
<h3 id="使用实践使用-mcp-工具实现通义灵码官网从设计稿到页面开发">使用实践：使用 MCP 工具实现通义灵码官网从设计稿到页面开发</h3>
<p>在 UI 设计到前端代码的转化场景中（如通过 MasterGo 平台实现设计稿智能生成代码），传统开发模式常面临样式还原度低、多端适配繁琐及代码维护成本高等挑战。MCP服务通过智能解析设计稿结构与样式规则，自动生成符合企业设计规范的前端代码，实现高保真视觉还原与多端适配，减少人工编写重复代码的工作量，保障代码可维护性。</p>
<h4 id="mcp-配置与设计稿">MCP 配置与设计稿</h4>
<pre><code> {
   "mcpServers": {
   "mastergo-magic-mcp": {
      "command": "npx",
      "args": [
         "-y",
         "@mastergo/magic-mcp",
         "--token=<MG_MCP_TOKEN>",
         "--url=https://mastergo.com"
      ],
      "env": {}
   }
   }
}
</code></pre>
<blockquote>
<p>设计稿与 MasterGo MCP 源码</p>
<ul>
<li>灵码官网设计稿示例：https://mastergo.com/file/157557668024262?page_id=1%3A1303&layer_id=1%3A1500</li>
<li>MasterGo MCP 源码：https://github.com/mastergo-design/mastergo-magic-mcp?tab=readme-ov-file</li>
</ul>
</blockquote>
<h4 id="添加-mcp-服务-1">添加 MCP 服务</h4>
<ol>
<li>进入个人设置中的 MCP 服务，然后在 MCP 服务页面，完成 MCP 服务连接配置。</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509110016743-1219623790.png"></p>
<ol start="2">
<li>
<p>在 MCP 服务面板填写参数信息如下：</p>
<ul>
<li>名称：mastergo</li>
<li>类型：STDIO</li>
<li>命令：npx</li>
<li>参数：请获取您的 MasterGo 个人 token（获取方式：https://github.com/mastergo-design/mastergo-magic-mcp?tab=readme-ov-file#obtaining-mg_mcp_token），并将其替换为实际值。</li>
<li>环境变量（选填）</li>
</ul>
</li>
</ol>
<pre><code> -y @mastergo/magic-mcp --token=<MG_MCP_TOKEN> --url=https://mastergo.com
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509110025355-1215599289.png"></p>
<ol start="3">
<li>配置完成后，开关默认打开状态，并且图标显示为<img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509110040498-1278553938.png">，表示连接成功可正常使用。</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509110049115-1023374942.png"></p>
<h4 id="使用-mcp工具">使用 MCP工具</h4>
<ol>
<li>在通义灵码的 IDE 对话框左下角切换为智能体模式，并在对话框中输入提示词。</li>
</ol>
<p>需替换提示词中的 URL 为您的实际设计稿地址。</p>
<pre><code> 根据这个mastergo的设计图实现前端代码：https://mastergo.com/file/157557668024262?page_id=1%3A1303&layer_id=1%3A1500
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509110057347-1176850073.png"></p>
<ol start="2">
<li>如果需要调用 MCP 工具系统提示等待您的确认再继续执行。</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509110107519-1534666991.png"></p>
<ol start="3">
<li>问答交互完成后，您可以审查生成的代码结果，确保其符合预期并满足您的需求。</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/1411156/202505/1411156-20250509110115686-2045347532.png"></p>
<p>以前，搭建一个网页至少需经历项目初始化、组件开发、状态管理、交互实现、响应式布局、性能优化等步骤。</p>
<p>今天，只需一句话——“帮忙根据设计稿开发页面”，通义灵码就能调用 MCP 工具读取设计稿，根据用户的编码习惯，选择合适的技术栈、自动创建好工程文件、定义开发规范，实时反馈生成效果，甚至生成研发文档。整个过程用户只需要一句话和点几个确认键即可。</p>
<p>点击此处，用通义灵码探索无限可能。</p><br><br>
来源：https://www.cnblogs.com/alisystemsoftware/p/18867822

頁: [1]

琼殿技术论坛's Archiver

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