MasterGo MCP 实战：让设计稿直出前端代码

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

最后，开一个空项目文件夹，把设计稿链接扔给智能体：

请基于以下 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. 生成后在浏览器中预览效果。

IDE 会自动读取、解析、生成文件、下载资源。偏差总是有的，修修补补很正常，比如'修复按钮圆角应为 8px'这种补充指令，AI 基本能改对。

踩过的坑

• MCP 读不到数据：大多是 Token 权限问题，确认勾选了'文件内容（只读）'；或者链接只复制了分享链接，得用 file/xxxxxx 那种格式。
• 图片资源缺失：复制链接时没选中带图片的节点，或者原稿是 WebP 格式（暂时不支持），换成 PNG/SVG 再上传，要么在提示词里把资源目录定死。
• 样式参数对不上：复杂变量 AI 会解析偏，直接在提示词里强制单位，比如'所有尺寸 REM，1REM = 16px'，或者让设计师换成固定值。
• Token 泄露：别手滑发给别人，撤销在安全设置里随时可做。

这套工作流算不上完美，样式复杂时还是得手动微调，但在常规页面还原上，确实能省掉大量沟通和切图的时间。核心就三样东西：最小权限的 Token、MCP 的正确配置，还有一份清晰的生成指令。