MasterGo 设计稿转 Vue ​

打开目标 Vue 仓库，把 MasterGo 画板链接发给 AI。它会读取设计稿结构，按当前项目已经在用的组件库生成页面，并接入现有路由。

读稿靠 MasterGo 的 Magic MCP，落代码靠 Skill dh-fe-mastergo。dh-ai skill init 会把这两样一起装好。

它不能往 MasterGo 画布里画东西。要出设计稿，用 在 MasterGo 里生成设计稿。

MasterGo 画布右上角的「MCP 未连接」是写画布的状态，和这篇读稿无关。

开始之前 ​

装一次 ​

先准备 MasterGo Token，再只按右侧卡片安装。

1. 拿个人访问令牌 ​

按 MasterGo 官方说明：

1. 打开 mastergo.com 并登录。
2. 右上角头像 → 个人设置 → 安全设置。
3. 在 个人访问令牌 里生成，复制形如 mg_xxx 的值。

Token 只保存在本机配置里。不要提交到 Git，也不要发到群里。账号需要团队版，设计文件要在团队项目中。

2. 安装 Skill 和读稿连接 ​

只按右侧卡片操作：点「复制安装说明」，贴进 Qoder、Cursor 或 WorkBuddy 的新任务。

这一段是完整安装说明，含没有 Node 时先装 Node。首次会提示输入上一步的 Token，不用手写 JSON。不要只发 dh-ai skill init 这一行。

装完后必须完全退出 AI 工具再打开。Mac 上 Qoder 用 Command + Q。打开的目录必须是要写页面的那个 Vue 仓库。

npm config set @szhn:registry https://npmmirror.digitalhainan.com.cn/
npm install -g @szhn/ai-cli@latest
dh-ai skill init frontend/dh-fe-mastergo --tool qoder --scope user

MG_MCP_TOKEN=新的个人令牌 dh-ai skill init frontend/dh-fe-mastergo --tool qoder --scope user

{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "npx",
      "args": ["-y", "@mastergo/magic-mcp", "--url=https://mastergo.com"],
      "env": {
        "MG_MCP_TOKEN": "你的个人令牌"
      }
    }
  }
}

3. 确认已经连上 ​

新会话里看三件事：

1. 能调用 /dh-fe-mastergo（Codex 是 $dh-fe-mastergo）。
2. 工具列表里能看到 getDesignSections 或 getDsl（名称可能带前缀）。
3. 拿一条真实设计稿链接试一次，能读到页面结构。

第一次生成 ​

在目标 Vue 仓库新开任务，把画板链接带上。完整链接形如 https://mastergo.com/file/{fileId}/名称?layer_id={layerId}，短链 https://mastergo.com/goto/{shortLink} 也可以。

PC 管理后台：

/dh-fe-mastergo

读取下面的 MasterGo 画板，并生成到当前项目：
https://mastergo.com/file/文件ID/设计稿名称?layer_id=画板ID

要求：
1. 遵守当前项目规范。
2. 使用项目已安装的 DH Design / 组件库，不混用 PC 与移动端。
3. 接入现有路由后，运行类型检查和构建，并打开页面检查。

移动端：

/dh-fe-mastergo

读取下面的 MasterGo 画板，并生成到当前项目：
https://mastergo.com/file/文件ID/设计稿名称?layer_id=画板ID

要求：
1. 遵守当前项目规范和移动端尺寸适配。
2. 只使用项目已安装的移动端组件库，不使用 PC 组件。
3. 完成后运行类型检查和构建，并用 375px 视口检查页面。

Codex 把 /dh-fe-mastergo 换成 $dh-fe-mastergo。也可以直接说「用 dh-fe-mastergo 读取这个 MasterGo 链接，在当前项目生成页面」。

官方 Vue3 PC 模板会走 @szhn/dh-design-pc，移动端模板会走 @szhn/dh-design-mobile。项目里没有 DH Design 时，沿用已有的 Element、Vant 或封装组件。

同一任务里继续改即可：

把筛选区改成和设计稿一致的三列，并补上分页。

换新任务时，再次带上 /dh-fe-mastergo 和设计稿链接。

移动端 Vue2 / Vant 2：

移动端 Vue3 / Vant 4 / DH Design Mobile：

推荐顺序 ​

1. 用 dh-ui-mastergo-vibe 出规范稿，或直接用团队已有稿。
2. 复制目标画板链接，带上 layer_id。
3. 在业务仓库里装好本文的 Skill。
4. /dh-fe-mastergo 加上链接，生成页面。
5. 本地打开项目看视觉和交互，再按需改。

更新和卸载 ​

npm install -g @szhn/ai-cli@latest
dh-ai skill init frontend/dh-fe-mastergo --tool qoder --scope user

已有配置时不会再要 Token。卸载会同时去掉由它写入的 Magic MCP 配置，不会删 MasterGo 文件，也不会删仓库里已经生成的页面：

dh-ai skill remove --skill frontend/dh-fe-mastergo --tool qoder --scope user

删除时 --tool 和 --scope 要和安装时一致。之后同样完全退出再打开 AI 工具。

常见问题 ​

没有 Node，也不会用终端。 先拿到 Token，再点右侧「复制安装说明」贴进 AI 新任务。Mac 和 Windows 都可以。第一次装 Node 时可能要输入电脑密码。

提示没有权限或 401。 按这个顺序看：Token 是否完整（含 mg_ 前缀）、账号是不是团队版、文件是不是在团队项目、你有没有这份文件的权限、API 地址是不是 https://mastergo.com。

草稿箱文件读不到。 把文件移到团队项目再试。

会话里没有 getDsl / getDesignSections。 完全退出再打开。确认改的是当前客户端真正读取的配置文件。Qoder 优先看 SharedClientCache/mcp.json。

Skill 已装，仍提示没有 MasterGo MCP。 当前会话没有加载到 mastergo-magic-mcp。先修 MCP，再新开任务。只有 mastergo-vibe-mcp 时读不了设计稿。

只有截图，没有 MasterGo 链接。 明确说「使用截图降级实现」。这是近似方案，还原度低于直接读稿。

生成的组件库不对。 确认 AI 工具打开的根目录就是目标业务项目。PC 官方模板只用 @szhn/dh-design-pc，移动端官方模板只用 @szhn/dh-design-mobile。项目里两个包都有时，AI 会停下来让你确认目标端。

组件包升级了。 不用改 Skill。重新跑一次生成即可，它每次都读当前项目已安装的包和同类页面。

大稿超时。 指定单个 layer_id，一次只生成一帧。

相关链接 ​

• 在 MasterGo 里生成设计稿
• dh-ai CLI 使用说明
• MasterGo Magic MCP：配置说明 · 源码