在 MasterGo 里生成设计稿 ​

打开 MasterGo 文件，在 Qoder、Cursor、WorkBuddy 或 Codex 里说一句页面需求，AI 会把页面画进当前画布。

按钮、输入框、表格走 DH 设计系统，颜色和文字样式也是，不会随手画一套。

它不写 Vue，也不往仓库落文件。要把设计稿变成前端页面，用 MasterGo 设计稿转 Vue。

装一次 ​

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

这一段是完整安装说明，含没有 Node 时先装 Node（Mac 用 Homebrew，Windows 用 winget）。电脑可能要你输一次密码。不要只发 dh-ai skill init 这一行，有的工具会理解成「自己新建一个 Skill」。

WorkBuddy 会顺带装好 dh-ai-design 插件。不要再去连接器里加官方的「MasterGo 莫高设计」。

装完后必须完全退出 AI 工具再打开。Mac 用 Command + Q，只关窗口或新建任务不够。之后打开 MasterGo，用中文说页面需求即可。

npm config set @szhn:registry https://npmmirror.digitalhainan.com.cn/
npm install -g @szhn/ai-cli@latest
dh-ai skill init ui/dh-ui-mastergo-vibe

打开画布 ​

1. 打开 MasterGo。没有文件时，在草稿箱右上角点「设计文件」新建一个。

2. 进入文件后，看页面顶部的 MCP 状态，正常是「MCP 已启动」。点开确认里面是「已连接」。

3. 保持这个文件开着，回到 AI 工具里说需求。

如果状态是离线，或提示 no online mg canvas，到 MasterGo 右侧打开「AI 设计助手」→「MCP 服务端 BETA」，连上后再让 AI 继续。

第一次生成 ​

Qoder、Cursor、WorkBuddy 这样写：

/dh-ui-mastergo-vibe 生成一个移动端登录页，包含手机号、密码和登录按钮。

Codex 把开头的 / 换成 $。不写调用名、只描述页面也可以，AI 一般能对上这个 Skill。

说清是 PC 还是移动端。没说的话 AI 会先问你。两端都要时，会各出一页，PC 用「设计系统-PC」，移动端用「设计系统-移动端」，不会混。

画进当前打开的文件，并且回复里出现页面名称和画布位置，就算跑通了。

需求怎么写 ​

不用报组件名。写清页面类型、主要内容和关键操作就够。有参考图就一起贴上。

• 页面和设备，比如移动端登录页、PC 事项详情页
• 主要内容，比如手机号、密码、用户协议
• 关键操作，比如登录、返回、提交审核
• 状态和限制，比如只展示 3 个入口、不要底部标签栏
• 必须保留的文案或结构

移动端：

/dh-ui-mastergo-vibe 根据以下需求生成一个移动端登录页。
顶部显示数字海南品牌标识和「登录」标题；
表单包含手机号、密码和显示密码操作；
主按钮文案为「登录」；
按钮下方显示用户协议勾选项、忘记密码和立即注册；
页面底部显示服务提供方信息。

PC：

/dh-ui-mastergo-vibe 根据以下需求生成一个 PC 事项详情页。
顶部包含面包屑、页面标题、处理状态和事项编号；
基本信息分两列展示事项名称、事项类型、所属部门、联系电话、当前处理人和计划完成时间；
下方展示事项说明和附件材料；
右上角提供「返回」和「提交审核」操作。

同一任务里直接说修改即可：

把主按钮文案改为「立即登录」，并把忘记密码移到密码输入框下方。

换了新任务，再带上 /dh-ui-mastergo-vibe，并指出要改哪一页。改的时候 MasterGo 文件要开着，连接保持在线。

生成后想核对，在同一任务里说：

/dh-ui-mastergo-vibe 检查刚生成的页面，重点看文字样式、组件绑定、内容裁切和间距。

更新和卸载 ​

npm install -g @szhn/ai-cli@latest
dh-ai skill update --skill ui/dh-ui-mastergo-vibe

设计系统组件有更新、生成时提示本地规范缺失，再跑：

dh-ai refresh --skill ui/dh-ui-mastergo-vibe --profile all

--profile 可以换成 pc 或 mobile。页面生成过程不会自动刷新组件库。

卸载：

dh-ai skill remove --skill ui/dh-ui-mastergo-vibe

更新或卸载后，同样要完全退出再打开 AI 工具。

常见问题 ​

没有 Node，也不会用终端。 点右侧「复制安装说明」，贴进 AI 新任务。Mac 和 Windows 都可以。第一次装 Node 时可能要输入电脑密码。装完退出 AI 工具再打开即可，后面不用再碰终端。

画布写不进去。 先完全退出并重开 AI 工具。再看 MasterGo 顶部是不是「已连接」，文件是否还开着。不要额外添加官方「MasterGo 莫高设计」连接器。

只看到空白的「AI Generating Page」。 这是未完成的占位，不是成品。多半是提交中途断了。空白帧可以删掉，连好后再生成一次。

提示找不到 design_page。 当前会话没加载到写画布的连接。确认装的是 dh-ui-mastergo-vibe，不是读稿用的 Magic。装完后要新开会话。本机可再跑 dh-ai mastergo doctor。

AI 说已创建 Skill，但没有终端输出。 它没有真的执行安装。新开任务，再把右侧「复制安装说明」贴过去。

显示 spawn codex ENOENT。 Skill 已经装上了，只是当前终端没有 codex 命令。不影响 Qoder、WorkBuddy、Cursor。要在 Codex 里用，先让 codex --version 能跑，再执行 dh-ai skill init ui/dh-ui-mastergo-vibe --tool codex。

想要的是前端代码。 这个 Skill 只写 MasterGo。转 Vue 请看 MasterGo 设计稿转 Vue。

相关链接 ​

• MasterGo 设计稿转 Vue
• dh-ai CLI 使用说明