2025-05-08 23:38 浙江
Datawhale干货
最新：AI编程助手，通义灵码
近期，通义灵码全新升级：阿里云发布国内首个支持「自主决策+工具链闭环」的编程智能体，面向个人免费！
【最新黑科技功能】
1️⃣ 通义灵码新增智能体模式，具备自主决策、环境感知、工具使用等能力。
2️⃣ 支持国内首个混合推理模型 Qwen3。
3️⃣ 全面支持 MCP 能力，深度集成国内最大 MCP 中文社区，涵盖十大热门领域 2400+ MCP 服务。
4️⃣ 新增长期记忆能力。
最新MCP功能的保姆级教程
教程内容：用通义灵码将 MasterGo 设计稿转化为前端代码
效果速览：设计稿与生成结果对比
设计稿
生成效果
通义灵码插件兼容以下 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。
3. 重启 IntelliJ IDEA 后，单击侧边导航的通义灵码，在通义灵码助手的窗口单击登录按钮。
4.单击登录后，将前往登录页面，完成登录后可进入 IDE 客户端开始使用。
Visual Studio Code 插件市场安装指南
1. 打开 Visual Studio Code 扩展窗口，搜索 Lingma，找到通义灵码后单击安装。
2. 安装完成后，请重启 Visual Studio Code。
3. 安装完成后，重启 Visual Studio Code。
4. 重启 Visual Studio Code 后，单击侧边导航的通义灵码，在通义灵码助手的窗口单击登录按钮。
5. 单击登录后，将前往登录页面，完成登录后可进入 IDE 客户端开始使用。
Visual Studio 插件市场安装指南
1. 打开 Visual Studio 顶部扩展-管理扩展窗口，搜索 Lingma，找到通义灵码后单击安装。
2. 安装完成后，重启 Visual Studio。
3. 重启 Visual Studio 后，单击顶部导航工具
4. 单击登录后，将前往登录页面，完成登录后可前往 IDE 客户端开始使用
2. 如何选择会话模式
通义灵码新版本提供智能问答、文件编辑、智能体三种模式，支持同一个会话流中切换智能问答、文件编辑、智能体模式，开发者在会话过程中，无需新建会话即可根据诉求自由切换会话模式：
3. 如何选择模型
通义灵码 IDE 插件在智能会话中支持选择推理服务模型。在智能会话窗口的输入框中，单击模型选择的下拉菜单即可选择所需模型。目前支持最新 Qwen3 系列模型，可选模型为：qwen3、qwen3-thinking、qwen2.5-max、deepseek-r1、deepseek-v3。
4. MCP 服务配置与使用实践
1️⃣ 添加 MCP 服务1.进入 MCP 服务页面单击通义灵码欢迎语中的 MCP 工具链接，或在右上角头像处进入个人设置，单击条形框，进入 MCP 服务页面。
2.添加服务
方式一：通过 MCP 广场完成添加
1. 单击MCP 广场 标签，可以看到推荐的 MCP 服务列表以及魔搭社区提供的全部 MCP 服务。
2. 在 MCP 广场 中，浏览或搜索所需 MCP 服务，单击 安装 完成一键自动安装。
3. 安装完成后，返回我的服务页面，即可看到新安装的服务。图标显示为，表示连接成功可正常使用。展开详情，可以看到 MCP 提供的工具列表。
方式二：通过手动方式完成添加
1. 在 MCP 服务页面右上角单击“+”选择以下方式完成添加：
- 手工添加：
1️⃣ STDIO 类型：填写名称、命令、参数和环境变量（选填）。
2️⃣ SSE 类型：填写名称和服务地址。
配置文件添加：
- 在 JSON 配置文件中增加服务对应的JSON配置信息。
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%3A1500MasterGo MCP 源码：https://github.com/mastergo-design/mastergo-magic-mcp?tab=readme-ov-file
1. 进入个人设置中的 MCP 服务，然后在 MCP 服务页面，完成 MCP 服务连接配置。
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
3. 配置完成后，开关默认打开状态，并且图标显示为，表示连接成功可正常使用。
1. 在通义灵码的 IDE 对话框左下角切换为智能体模式，并在对话框中输入提示词。
需替换提示词中的 URL 为您的实际设计稿地址。
根据这个mastergo的设计图实现前端代码：https://mastergo.com/file/157557668024262?page_id=1%3A1303&layer_id=1%3A1500
2. 如果需要调用 MCP 工具系统提示等待您的确认再继续执行。
3. 问答交互完成后，您可以审查生成的代码结果，确保其符合预期并满足您的需求。
以前，搭建一个网页至少需经历项目初始化、组件开发、状态管理、交互实现、响应式布局、性能优化等步骤。
今天，只需一句话——“帮忙根据设计稿开发页面”，通义灵码就能调用 MCP 工具读取设计稿，根据用户的编码习惯，选择合适的技术栈、自动创建好工程文件、定义开发规范，实时反馈生成效果，甚至生成研发文档。整个过程用户只需要一句话和点几个确认键即可。
