Datawhale干货
最新:AI编程助手,通义灵码
近期,通义灵码全新升级:阿里云发布国内首个支持「自主决策+工具链闭环」的编程智能体,面向个人免费!
【最新黑科技功能】
1️⃣ 通义灵码新增智能体模式,具备自主决策、环境感知、工具使用等能力。
2️⃣ 支持国内首个混合推理模型 Qwen3。
3️⃣ 全面支持 MCP 能力,深度集成国内最大 MCP 中文社区,涵盖十大热门领域 2400+ MCP 服务。
4️⃣ 新增长期记忆能力。
最新MCP功能的保姆级教程
教程内容:用通义灵码将 MasterGo 设计稿转化为前端代码
效果速览:设计稿与生成结果对比
设计稿
生成效果
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. 打开 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 提供的工具列表。
2️⃣ 使用实践:使用 MCP 工具实现通义灵码官网从设计稿到页面开发
在 UI 设计到前端代码的转化场景中(如通过 MasterGo 平台实现设计稿智能生成代码),传统开发模式常面临样式还原度低、多端适配繁琐及代码维护成本高等挑战。MCP服务通过智能解析设计稿结构与样式规则,自动生成符合企业设计规范的前端代码,实现高保真视觉还原与多端适配,减少人工编写重复代码的工作量,保障代码可维护性。
1. MCP 配置与设计稿
{
设计稿与 MasterGo MCP 源码
- 灵码官网设计稿示例:https://mastergo.com/file/157...\_id=1%3A1303&layer\_id=1%3A1500
- MasterGo MCP 源码:https://github.com/mastergo-d...
2. 添加 MCP 服务
- 1. 进入个人设置中的 MCP 服务,然后在 MCP 服务页面,完成 MCP 服务连接配置。
- 2. 在 MCP 服务面板填写参数信息如下:
- 名称:mastergo
- 类型:STDIO
- 命令:npx
- 参数:请获取您的 MasterGo 个人 token(获取方式:https://github.com/mastergo-d...\_mcp\_token),并将其替换为实际值。
- 环境变量(选填)
-y @mastergo/magic-mcp --token=<MG_MCP_TOKEN> --url=https://mastergo.com
- 3. 配置完成后,开关默认打开状态,并且图标显示为
,表示连接成功可正常使用。
3. 使用 MCP工具
- 1. 在通义灵码的 IDE 对话框左下角切换为智能体模式,并在对话框中输入提示词。
需替换提示词中的 URL 为您的实际设计稿地址。
根据这个mastergo的设计图实现前端代码:https://mastergo.com/file/157557668024262?page_id=1%3A1303&layer_id=1%3A1500
- 2. 如果需要调用 MCP 工具系统提示等待您的确认再继续执行。
- 3. 问答交互完成后,您可以审查生成的代码结果,确保其符合预期并满足您的需求。
以前,搭建一个网页至少需经历项目初始化、组件开发、状态管理、交互实现、响应式布局、性能优化等步骤。
今天,只需一句话——“帮忙根据设计稿开发页面”,通义灵码就能调用 MCP 工具读取设计稿,根据用户的编码习惯,选择合适的技术栈、自动创建好工程文件、定义开发规范,实时反馈生成效果,甚至生成研发文档。整个过程用户只需要一句话和点几个确认键即可。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。