数字海南研发门户

主题

DH MasterGo Vue 页面生成 ​

基本流程 ​

  1. 先识别目标项目现状，判断页面形态（移动端 H5 / PC）、Vue 版本、组件库、路由写法、样式入口和可用校验命令。
  2. 再确认“规范文件模式”，由用户选择：
    • 纯 DSL 模式（默认）：不读取 AGENTS.md、CONSTITUTION.md、DESIGN.md。
    • 规范增强模式：按用户指定读取其中一个或多个文件，并在生成时遵循其约束。
  3. 若用户未明确选择，默认使用纯 DSL 模式。
  4. 如果用户给的是 MasterGo 地址，优先用 scripts/parse-mastergo-url.mjs 解析 URL，拿到 fileId（URL 路径中的数字段）和 layerId（layer_id= 参数值，把 %3A 解码为 :）。
  5. 调用 MasterGo MCP 获取 DSL，这是必做前置检查：
    • 使用 mcp__mastergo_magic_mcp__mcp__getDsl 读取设计稿结构。
    • 如果返回 componentDocumentLinks，继续逐个读取组件文档链接。
  6. 只有成功拿到 DSL 后，才开始页面生成：提取画板层级、文案、颜色、间距、重复区块、状态和交互意图。
  7. 生成页面时优先复用目标项目已安装的组件方案（如 Vant 2、Vant 4、Element UI、Element Plus、@szhn/dh-design-mobile、@szhn/dh-design-pc 或项目自有组件）。
  8. 用户没有明确要求时，不主动做全局主题改造；只做页面级还原。
  9. 生成完成后使用目标项目真实命令校验（如构建、类型检查、lint 或测试命令），不要套用其它仓库命令。

规范文件模式 ​

  • 纯 DSL 模式（默认）：
    • 只依据 MasterGo DSL、截图和用户输入生成页面。
    • 不主动读取 AGENTS.md、CONSTITUTION.md、DESIGN.md。
  • 规范增强模式（用户显式开启）：
    • 仅读取用户点名的文件，不默认全读。
    • 当规范与设计稿冲突时，先向用户报告冲突并让用户决定优先级。
    • 未被用户指定的规范文件视为不存在，不自行补充假设。

MasterGo MCP 依赖 ​

  • 本 skill 依赖外部工具环境提供 MasterGo MCP。skill 本身不能自动安装、启动或授权 MCP。
  • 如果当前工具没有 MasterGo MCP，或调用 getDsl 失败，必须停止页面生成并输出错误提醒，不要假装已经读取设计稿。
  • 没有 MasterGo MCP 时，可以基于用户提供的截图或导出的 DSL 生成页面，但需要说明这是降级方案。
  • 如果用户需要精准还原，应先在当前 IDE / Agent 工具里配置 MasterGo MCP。

缺少 MCP 时的固定提醒 ​

如果无法调用 MasterGo MCP，直接回复：

text
当前环境没有可用的 MasterGo MCP，无法读取 MasterGo 设计稿结构，所以不能按 DSL 精准生成页面。

请先在当前 IDE / Agent 工具里配置并启用 MasterGo MCP，然后重新执行。
如果你希望我先基于截图近似实现，也可以明确告诉我“使用截图降级实现”。

除非用户明确选择“使用截图降级实现”，否则不要继续写页面代码。

Vue 项目规则 ​

项目识别 ​

先检查以下位置，不要只凭目录名或用户口头描述判断：

  1. package.json 的 dependencies、devDependencies：
    • vue 主版本为 2.x 时按 Vue2 项目处理。
    • vue 主版本为 3.x 时按 Vue3 项目处理。
    • vant 主版本为 2.x 时按 Vant 2 处理，4.x 时按 Vant 4 处理。
    • element-ui 表示 Vue2 PC Element UI 项目。
    • element-plus 表示 Vue3 PC Element Plus 项目。
    • 存在 @szhn/dh-design-mobile 时，优先按数字海南 Vue3 移动端组件库处理。
    • 存在 @szhn/dh-design-pc 时，优先按数字海南 Vue3 PC 组件库处理。
  2. 构建和编译特征：
    • Vue2 常见：vue-template-compiler、@vue/cli-service、vue.config.js、Options API 页面。
    • Vue3 常见：@vue/compiler-sfc、@vitejs/plugin-vue、vite.config.*、<script setup> 页面。
  3. 入口和示例页面：
    • 读取 src/main.*、路由文件、同类页面，确认组件注册方式、路由元信息、样式写法和状态管理。
  4. 页面形态：
    • MasterGo 画板宽度接近 375、390、414，或项目依赖 Vant / DH Design Mobile 时，优先按移动端 H5 处理。
    • MasterGo 画板宽度接近 1280、1440、1920，或项目依赖 Element / Element Plus / DH Design PC 时，优先按 PC 处理。
    • 如果 DSL 尺寸、项目依赖和用户描述互相冲突，先说明冲突并让用户确认，不要硬生成。
  5. 移动端尺寸适配：
    • 检查 postcss.config.*、vue.config.*、vite.config.*、package.json 和已有样式工具，确认是否使用 postcss-px-to-viewport、postcss-pxtorem、px2rem-loader、lib-flexible 或 amfe-flexible。
    • 找到 viewportWidth、designWidth、rootValue 等基准后，代码里的 px 必须按项目基准写，不要只按 MasterGo 画板宽度照抄。
    • 如果 MasterGo 是 375px 画板，而 Vue2 老项目适配基准是 750（例如 viewportWidth: 750），页面样式里的尺寸按 2 倍写入：DSL 中 16px 对应代码 32px。
    • 通用换算：代码尺寸 = DSL尺寸 * 项目适配基准 / MasterGo画板宽度。若项目基准和 MasterGo 画板宽度一致，才原样使用 DSL 尺寸。
  6. 如果 Vue 版本、组件库版本、页面形态、适配基准或用户指定互相冲突，先说明冲突并让用户确认，不要硬生成。

移动端 Vue2 / Vant 2 ​

  • 尊重目标项目现有 Vue2 风格，不要强行改成 Vue3 Composition API。
  • 使用 Vant 2 的组件名、属性和事件，不要套用 Vant 4 的 v-model:show 等写法。
  • 不要在 Vue2 项目里安装或使用 @szhn/dh-design-mobile，除非后续明确提供 Vue2 兼容包。
  • 需要统一移动端主题时，先读 references/vue2-vant-theme.md，优先使用项目已有 Less 变量覆盖入口。
  • 只有项目原本就采用全局 --van-* 变量方案时，才沿用该方案；否则不要把 Vant 4 的 CSS 变量方案套到 Vue2。
  • Vue2 老 H5 项目常见 750 适配基准；生成样式前必须先确认适配配置。若基准为 750 且 DSL 为 375 画板，所有来自 DSL 的尺寸、间距、圆角、字号都按 2 倍写入代码。

示例演示

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

  • 优先使用 <script setup lang="ts">、Composition API、明确的类型定义和当前项目的文件路由约定。
  • 如果项目安装了 @szhn/dh-design-mobile，优先使用它提供的 van-* 组件和服务；组件 API 先读 references/dh-design-mobile-api.md。
  • Toast、Dialog 等服务从项目现有封装或 @szhn/dh-design-mobile 获取；不要在已有封装之外重复引入其它来源。
  • 业务页面不要直接导入 @szhn/theme-tokens。
  • 不要在业务页面里直接改全局 --van-* 变量；局部视觉修正用 scoped 样式和项目已有变量完成。
  • 页面自带顶部导航或底部操作栏时，按项目现有路由元信息处理标题、返回和 tabbar 显隐。

示例演示

PC Vue2 / Element UI ​

  • 尊重目标项目现有 Vue2 风格，优先沿用 Options API、现有路由、权限、菜单和状态管理写法。
  • 使用 Element UI 的 <el-*> 组件、属性和事件，不要套用 Element Plus 的 Vue3 写法。
  • 表格、表单、弹窗、分页、筛选区优先复用项目已有页面模式；不要为了还原静态设计稿引入新表格库或新布局系统。
  • 如果项目有自定义二次封装组件，优先复用封装；没有封装时再直接使用 Element UI。
  • 不主动改 Element 全局主题；只有用户明确要求统一主题时，才检查项目已有 Sass/Less 主题入口。

PC Vue3 / Element Plus / DH Design PC ​

  • 优先使用 <script setup lang="ts">、Composition API 和项目已有类型组织方式。
  • 如果项目安装了 @szhn/dh-design-pc，组件和服务的导入来源必须优先是 @szhn/dh-design-pc；先检查项目中的导入入口、全局注册、示例页面和包导出，再按它导出的现有组件 API 使用。
  • 安装了 @szhn/dh-design-pc 时，不要直接从 element-plus 导入组件或服务，除非项目现有示例已经明确这样补充使用某个未被 @szhn/dh-design-pc 导出的能力。
  • 只有项目没有安装 @szhn/dh-design-pc、但安装了 Element Plus 时，才从 element-plus 导入并使用 Element Plus 的 <el-*> 组件、属性和事件。
  • 标准 PC 页面优先映射为筛选区、操作栏、表格、分页、抽屉/弹窗、详情分组、状态标签等结构。
  • 表单校验、表格列、分页参数、弹窗开关和提交状态要按项目现有数据流处理，不要只写静态 HTML。
  • 不主动改 Element Plus 或 DH Design PC 的全局主题；局部视觉修正用 scoped 样式和项目变量完成。

通用落地 ​

  • 页面代码应以 DSL 还原为主，不额外注入与当前设计稿无关的业务规则。
  • 默认只生成用户明确要求的页面。只有用户明确说“生成一组 demo / 生成多个状态 / 生成所有画板”时，才新增多个页面和演示入口。
  • 当一个 MasterGo 图层里包含多个画板，先判断它们是不同页面、同一页面不同状态，还是同一页面滚动位置；不要机械地全部生成。
  • 组件选择和页面结构细则见 references/component-mapping.md。

防止写死 ​

  • 页面内容必须来自当前 MasterGo DSL、截图或用户说明。
  • 不要复用历史任务中的业务字段、机构名、地址、按钮文案或示例数据。
  • 示例仅用于说明组件组合方式，不能当成固定业务模板。
  • 用户要求“只生成一个页面”时，只生成一个页面和必要局部组件。

输入要求 ​

  • 支持以下输入之一：MasterGo 链接、fileId + layerId、导出的 DSL、设计截图。
  • 若同时提供多个来源，优先级为：MasterGo DSL > 导出 DSL > 截图 > 文字描述。
  • 当输入信息冲突时，先指出冲突并请求用户确认，不自行猜测。
  • 规范文件是否参与由用户决定。若用户说“按项目规范来”，再读取其指定的 AGENTS.md、CONSTITUTION.md、DESIGN.md。

验证要求 ​

  • 先从目标项目 package.json 里确认真实脚本，再选择能覆盖本次改动的命令。
  • Vue3 项目优先跑类型检查和构建；Vue2 项目若没有类型检查，至少跑构建或已有 lint/test。
  • 视觉页面应启动本地服务检查页面：移动端用 375px 手机宽度；PC 用项目常用桌面宽度。重点检查顶部标题、底部操作、长文字、表单标签、表格横向滚动、弹窗和内容遮挡。
  • 如果真实验证被外部服务、权限、依赖安装或环境限制挡住，要说明阻断点，不要把未验证说成已验证。

Power By 数字海南

Copyright © 2026 Digital Hainan