AI编程实战 : 使用 TRAE CN 将 MasterGo 设计稿转化为前端代码

Ne0inhk

— 12 min read
AI编程实战 : 使用 TRAE CN 将 MasterGo 设计稿转化为前端代码

文章目录

文档信息

  • 创建时间：2026-01-22
  • 作者：zuozewei
  • 功能：使用 TRAE CN 将 MasterGo 设计稿转化为前端代码
  • 技术栈：MasterGo、TRAE CN、MCP

什么是 MCP

MCP（Model Context Protocol，模型上下文协议）是 MasterGo（国内原型设计平台）为 AI 工具打通设计稿数据的标准化协议，可让 TRAE CN IDE（国际版不支持） 等 AI 工具直接读取 MasterGo 设计稿的结构化数据（如布局、样式、资源、变量等），无需人工导出/上传设计稿，实现「设计稿 → 代码」的端到端智能化转换。

简单来说，你无需再手动截图、描述设计细节，AI 工具可通过 MCP 直接「读懂」MasterGo 设计稿，精准生成符合设计规范的前端代码，大幅降低设计还原的沟通成本和手动开发工作量。

前置条件

在使用 MasterGo MCP 前，请确保满足以下条件：

1. 账号权限

  • 持有 MasterGo 账号（企业版，支持 DSL（用于自行开发 D2C）），且账号已完成手机号/邮箱验证；
  • 若操作团队/企业空间的设计稿，需拥有该设计稿的「查看」或「编辑」权限（仅「评论」权限无法读取设计稿数据）；
  • 生成 Personal Access Token 时，账号需为企业空间的「成员」或「管理员」（访客账号无法生成 Token）。
在这里插入图片描述
MasterGo MCP 中 DSL 的技术原理，是作为“设计稿→代码”的标准化中间层：先通过授权后的 MasterGo API 拉取设计稿全量原始数据，再过滤冗余信息、统一格式完成数据清洗，接着为纯数值数据注入前端领域语义（如标注组件类型、样式变量），最终输出结构化的 DSL 数据（通常为 JSON），供 TRAE IDE、AI 智能体等工具直接解析，高效生成符合设计意图的前端代码。

补充一个 DSL 的极简 JSON 示例：

{"components":[{"id":"123","type":"Button","props":{"text":"点击我","style":{"color":"red","fontSize":16}}}]}

2. 环境要求

  • TRAE CN IDE 版本 ≥ 1.0.0（过低版本可能不兼容 MasterGo MCP 协议）；
  • 网络环境可正常访问 MasterGo 官网（https://mastergo.com）及 TRAE CN IDE 服务器。

3. 设计稿准备

  • 设计稿需已发布至 MasterGo 云端（本地离线设计稿无法被 MCP 读取）；
  • 建议对设计稿进行分层/命名规范（如统一组件命名、规范样式变量），可提升 AI 生成代码的可读性。

MasterGo AI Bridge 支持的能力

当前 MCP 工具版本为 0.1.2，MasterGo AI Bridge 基于该版本提供以下核心 API 方法，用于支撑设计稿数据的读取与组件关联：

API 方法能力描述
mcp_getDsl用于获取设计稿的领域特定语言数据
mcp_getComponentLink当 mcp_getDsl 返回数据包含非空内容时，用于获取组件关联链接
mcp_getMeta当用户需要搭建完整网站时，调用此工具获取相关元数据
mcp_getComponentGenerator需主动调用此工具，获取组件开发相关资源

操作步骤

第一步: 安装/升级 TRAE CN IDE

  1. 前往 TRAE CN 国内官网下载最新版安装包（https://www.TRAE CN.cn/download），或在已安装的 TRAE CN IDE 中通过「设置 → 关于 → 检查更新」完成升级。
  2. 按照安装向导完成安装，建议选择「完整安装」（包含 MCP 协议适配组件）。

第二步: 获取 MasterGo 的 Personal Access Token

Token 是 MCP 工具访问 MasterGo 设计稿数据的身份凭证，需严格按照官方规范生成：

  1. 登录 MasterGo 网页端（https://mastergo.com），建议使用 Chrome/Edge 浏览器（兼容性最佳）。
  2. 点击页面右上角「头像」→「个人设置」，进入个人中心。
  3. 在左侧导航栏选择「安全设置」→「个人访问令牌」，点击「生成新令牌」。

操作如下图：

在这里插入图片描述

第三步: 添加 MCP Server

  1. 打开 TRAE CN IDE，确保已登录 TRAE CN 账号（未登录无法使用 MCP 功能）。
  2. 进入 MCP 配置页面：
    • IDE 模式：点击右上角「设置」→「MCP」；
    • SOLO 模式：点击对话面板右上角「设置」→「MCP」。
  3. 进入 MCP 市场：
    • 点击「添加 → 从市场添加」，或直接点击页面中部「从市场添加」按钮；
    • 若市场中未找到「MasterGo Magic Mcp」，可通过搜索框输入关键词快速定位。
  4. 配置 MasterGo MCP：
    • 点击「MasterGo Magic Mcp」右侧「+」按钮，弹出配置弹窗；
    • 粘贴第二步 Personal Access Token（启用验证 Token 有效性）；
    • 验证通过后，点击「确认」完成添加。

验证连接失败排查：

  • 检查 Token 是否复制完整（无空格/换行）；
  • 检查 Token 权限是否包含「文件内容（只读）」；
  • 检查网络是否可访问 MasterGo 官网。

操作如下图：

在这里插入图片描述

第四步: 创建自定义智能体（可选）

内置智能体「Builder with MCP」可满足基础需求，自定义智能体可针对性优化代码生成规则：

  1. 在 TRAE CN IDE 对话输入框中输入 @，点击「创建智能体」。
  2. 配置智能体参数：
    • 名称：如「MasterGo 设计稿转 Vue 代码」（明确场景）；
    • 工具配置：
      • MCP 工具：仅勾选「MasterGo Magic Mcp」；
      • 内置工具：勾选「阅读」「编辑」「终端」「预览」（满足代码生成+预览需求）。
  3. 点击「创建」，完成后点击「立即使用」进入对话界面。

提示词（官方推荐模板）：

你是专业的前端开发工程师，需基于 MasterGo 设计稿数据（通过 MCP 获取）完成以下要求： 1. 代码框架：使用 Vue 3（可替换为 React/Angular 等）； 2. 样式规范：严格遵循设计稿中的颜色、字体、间距、圆角等样式参数，使用 REM 适配不同屏幕； 3. 代码结构：组件化拆分（按设计稿模块划分），注释清晰，符合前端工程化规范； 4. 资源处理：自动下载设计稿中的图标/图片资源，存放至「assets」目录，路径映射正确； 5. 兼容性：兼容 Chrome 90+、Edge 90+、Safari 14+ 浏览器。 禁止擅自修改设计稿中的样式参数，若有不明确的地方，先询问用户再生成代码。

效果如下图：

第五步: 调用 MCP 生成前端代码

5.1 复制 MasterGo 设计稿链接
  1. 打开 MasterGo 设计稿，选中需要转换的范围：
    • 单个组件/画板：点击选中目标节点；
    • 整个页面：无需选中，直接复制设计稿根链接。

右键点击选中区域 →「复制链接」→「复制选中内容链接」（或「复制文件链接」），复制格式示例：

https://mastergo.com/file/xxxxxx?fileOpenFrom=project&page_id=xxxxxxxxx&layer_id=xxxxxxxxx

提示：包含 nodeId 的链接仅读取指定节点数据，无 nodeId 则读取整个设计稿。

5.2 在 TRAE CN IDE 中生成代码
  1. 在 TRAE CN IDE 中打开空项目文件夹（用于存放生成的代码）。
  2. 发送指令后，TRAE CN IDE 会自动执行以下操作：
    • 调用 MasterGo Magic Mcp → 读取设计稿数据；
    • 解析样式/布局/资源 → 生成标准化前端代码；
    • 自动创建文件（index.html、src/App.js、src/index.css 等）；
    • 下载设计稿资源至指定目录。
  3. 生成完成后，双击「index.html」或通过 TRAE CN IDE「预览」功能查看效果。

在智能体对话框中输入指令，示例：

请基于以下 MasterGo 设计稿链接生成前端代码： https://mastergo.com/file/xxxxxx?fileOpenFrom=project&page_id=xxxxxxxxx&layer_id=xxxxxxxxx 要求： 1. 使用 Vue + Tailwind CSS 开发； 2. 生成响应式页面，适配移动端(375px)、平板(768px)、桌面端(1920px)； 3. 将图片资源下载至「src/assets/images」目录； 4. 生成后在浏览器中预览效果。

操作如下图：

在这里插入图片描述
5.3 代码优化与迭代

若生成的代码不符合预期，可通过以下方式优化：

  1. 补充精准指令：如「修复按钮样式与设计稿不一致的问题，按钮圆角应为 8px」；
  2. 调整智能体提示词：优化代码框架/样式规范；
  3. 修正设计稿：若设计稿存在命名不规范/层级混乱，整理后重新复制链接生成。

复现效果

设计稿原图如下：

在这里插入图片描述

代码复现如下：

在这里插入图片描述

常见问题与排查

Q1: MCP 无法读取 MasterGo 设计稿数据

原因及解决方案：

  1. Token 无效/过期：重新生成 Personal Access Token，确保权限包含「文件内容（只读）」；
  2. 设计稿权限不足：联系设计稿所有者，将你的账号添加为「查看者/编辑者」；
  3. 链接格式错误：确保链接包含 file/xxxxxx（设计稿 ID），而非分享链接/评论链接；
  4. 网络问题：检查网络是否可访问 MasterGo 官网，或切换至稳定网络环境。

Q2: 生成的代码中图片资源缺失

原因及解决方案：

  1. 图片节点未选中：复制链接时确保选中包含图片的节点，或读取整个设计稿数据；
  2. 图片格式不支持：MasterGo MCP 暂不支持 WebP 格式，建议将图片导出为 PNG/SVG 后重新上传；
  3. 资源下载路径错误：在智能体提示词中明确资源存放路径（如「将图片下载至 src/assets/images」）。

Q3: 样式参数与设计稿不一致

原因及解决方案：

  1. 设计稿使用了未解析的变量：确保 Token 权限包含「变量（只读）」，或在设计稿中替换为固定值；
  2. AI 解析误差：补充指令明确样式参数（如「字体大小为 16px，行高为 24px」）；
  3. 单位转换问题：在提示词中指定单位（如「所有尺寸使用 REM 单位，1REM = 16px」）。

Q4: Token 泄露/需要撤销

  1. 登录 MasterGo「个人设置 → 安全与授权 → 个人访问令牌」；
  2. 找到目标 Token，点击「撤销」按钮，立即终止该 Token 的使用权限；
  3. 重新生成新 Token，更新 TRAE CN IDE 中的 MCP 配置。

注意事项

1. 数据安全

  • 勿将 Personal Access Token 分享给无关人员，定期（如 30 天）轮换 Token；
  • 仅向可信的 AI 工具（如 TRAE CN IDE）配置 Token，避免数据泄露。

2. 兼容性

  • TRAE CN IDE 低版本可能不支持最新的 MasterGo MCP 协议，建议保持 TRAE CN IDE 为最新版；
  • MasterGo 本地客户端的离线设计稿无法被 MCP 读取，需先发布至云端。

3. 效率优化

  • 设计稿命名/层级规范可大幅提升代码生成质量；
  • 优先选择「读取指定位置(layer_id)」而非整个设计稿，可减少 AI 解析时间。

总结

  1. MasterGo MCP 核心是通过 Token 授权，让 AI 工具直接读取设计稿结构化数据，实现「设计 → 代码」智能化转换；
  2. 关键步骤：生成带最小必要权限的 Token → 配置 TRAE CN IDE 的 MasterGo Magic Mcp → 复制设计稿链接 → 指令生成代码；
  3. 常见问题多与 Token 权限、设计稿权限、链接格式相关，按「最小权限原则」生成 Token 可兼顾安全性与可用性。

AI 原生开发工作流逻辑图

在这里插入图片描述

Read more

Cursor实战：Web版背单词应用开发演示

Cursor实战：Web版背单词应用开发演示

Cursor实战：Web版背单词应用开发演示 * 需求分析 * 自行编写需求文档 * 借助Cursor生成需求文档 * 前端UI设计 * 后端开发 * 项目结构 * 环境参数 * 数据库设计 * 安装Python依赖 * 运行应用 * 前端代码修改 * 测试前端界面 * 测试数据生成 * 功能测试 * Bug修复 * 总结 在上一篇《Cursor AI编程助手不完全指南》中，我们详细介绍了Cursor这款强大的AI编程工具。为了让大家能更直观地了解 Cursor 的实战应用价值，本文将通过一个实际项目来展示其开发流程。我们将使用 Cursor 开发一个 Web 版单词学习程序，通过这个案例，您将看到 AI 辅助开发的完整过程，体验从需求分析到代码实现的全过程。让我们开始这次实战之旅。 需求分析 在开始开发之前，明确的需求文档是项目成功的关键。一个好的需求文档不仅能指导开发方向，还能作为与 Cursor 进行高效对话的重要基础。我们有两种方式来准备需求文档：自行编写需求文档和借助 Cursor 生成需求文档

By Ne0inhk

逆向工程中的侦探游戏：用DOM断点破解前端加密谜题

逆向工程中的侦探游戏：用DOM断点破解前端加密谜题 1. 解密前端的福尔摩斯：DOM断点与加密参数追踪 当你在浏览电商网站时，是否好奇过那些闪烁的价格数字背后隐藏着什么秘密？或者疑惑为什么每次提交表单时总会出现一串看似随机的字符？这些现象背后往往是前端加密在发挥作用。就像侦探破案需要关键线索一样，逆向工程师也需要找到加密参数的生成逻辑。 DOM断点技术就是我们的"放大镜"。与传统的搜索、跟栈等方式不同，它允许我们直接在页面元素级别进行监控。想象一下，当点击"立即购买"按钮时，价格参数突然变成了加密字符串 - 这正是设置DOM断点的最佳时机。 三种常见的加密参数场景： * 动态价格计算（如限时折扣、会员价） * 表单提交前的数据混淆 * 验证码生成逻辑 提示：在Chrome开发者工具中，右键点击元素选择"Break on"可以设置三种断点类型：subtree modifications、attribute modifications和node removal。 2. 实战演练：电商价格加密破解 让我们以一个真实的电商平台为例，

By Ne0inhk
SpringBoot+Vue 汽车票网上预订系统平台完整项目源码+SQL脚本+接口文档【Java Web毕设】

SpringBoot+Vue 汽车票网上预订系统平台完整项目源码+SQL脚本+接口文档【Java Web毕设】

系统架构设计### 摘要 随着互联网技术的快速发展，传统汽车票销售模式已无法满足现代旅客的便捷出行需求。线下购票存在排队时间长、信息不透明、票源紧张等问题，亟需通过信息化手段优化购票流程。汽车票网上预订系统的开发旨在解决这一痛点，通过线上平台整合票务资源，提供实时查询、在线选座、电子支付等功能，提升用户体验和运营效率。该系统不仅方便旅客随时随地购票，还能帮助客运企业优化资源调度，减少人工成本，推动传统客运行业数字化转型。关键词：汽车票预订、线上购票、数字化转型、资源优化、用户体验。 本系统基于SpringBoot和Vue技术栈开发，采用前后端分离架构，确保系统的高性能和可扩展性。后端使用SpringBoot框架实现RESTful API，集成MyBatis进行数据持久化，结合Redis缓存提升查询效率；前端采用Vue.js构建响应式用户界面，通过Axios与后端交互，实现动态数据渲染。系统核心功能包括用户注册登录、车次查询、在线选座、订单管理、支付接口对接以及管理员后台管理模块。数据库设计遵循三范式，通过MySQL存储业务数据，确保数据一致性和安全性。关键词：SpringBoot、

By Ne0inhk
【DGX Spark 实战】部署 vLLM + Open WebUI 运行 Qwen3-Coder-Next-FP8（CUDA 13.0 兼容版）-修订

【DGX Spark 实战】部署 vLLM + Open WebUI 运行 Qwen3-Coder-Next-FP8（CUDA 13.0 兼容版）-修订

感谢Qwen3-Coder-Next-FP8为本文进行润色，调整，绘制架构图。但是所有的文字及链接经过手工修订。需要SGLang推理框架，移步 【DGX Spark 实战】部署SGLang，千问3.5-27B模型初探 我们已严格按您提供的原始内容（包括 CUDA_VERSION=130、CPU_ARCH=aarch64、路径 ~/vllm、用户 admin 等）进行全量修正与标准化，确保所有命令与 DGX Spark 实际环境一致。 摘要本文详细记录在 NVIDIA DGX Spark（Grace Blackwell 架构）上部署 vLLM 推理服务并接入 Open WebUI 的完整流程，包含 FlashAttention 编译、vLLM wheel 安装、Qwen3-Coder-Next-FP8

By Ne0inhk