SSkilltecabyclaudinhocode
Enviar skill
← Voltar para o catálogo

mastergo-to-code

Desenvolvimento

MasterGo 稿 → 前端组件代码。

1estrelas
Ver no GitHub ↗Autor: zhuzian

MasterGo → Code

🔒 硬性规则

  1. 流程:GATE 0–5 未过禁碰源码;每 GATE 贴产物;GATE 5 等用户"确认"再进 GATE 6
  2. 设计来源:几何 / 样式必有硬来源(token / layoutStyle 减法 / dev 截图);缺值 → 追问用户。禁估算 / 视觉一致 / 平均值 / 沿用前值。违规 → ❌ 违反 #N,重启 GATE X
  3. plan 暴露缺陷:自适应 / 跨容器 / 单位匹配在 plan 阶段算清,不留到"刷新看看"
  4. 框架内置同准则:任何"antd 默认 = X" 论断必带源码 path:line(如 antd/es/steps/style/icon.js:30),不准凭记忆 / 凭旧代码 / 凭其他项目。每次写 antd 覆盖前先 node -p "require('antd/package.json').version" 打版本

GATE 0 — 认领

URL / fileId / layerId / 目标部件 / 同名组件是否存在

GATE 1 — 拉 DSL

mcp__getDsl + find-node.js → 贴 DSL 路径 + 子树前 ~60 行。账号需团队版编辑/研发席位(否则 10003)。

GATE 2 — Token 审计

inspect-tokens.js <DSL> <layerId> → 贴 ⚠️ 空 行 + 每条处理("未启用" / "转 GATE 4")。严禁猜色 / 边框。

GATE 3 — 几何减法

extract-geometry.js <DSL> <layerId> → 贴输出 + 四向 padding(值 + 来源)。

  • 禁从 PATH data / 非整数坐标反推 radius / padding;禁从 TEXT relativeY 差算行高
  • 4x 规整:padding / margin / gap / inset / 绝对定位 必为 4 的倍数。非 4x → 就近对齐 + 总和守恒21+11=3220+12),GATE 5 标 → 4x 规整。字号 / 行高 / 阴影 / 边框宽不算

GATE 4 — Dev Mode 截图

DSL 不出 cornerRadius / box-shadow / border 色;getD2c contentId 不能拼(404 即放弃)。一次性向用户索取,收齐前不进 GATE 5;"差不多"色值要追问是否 dev 取色

  • 容器圆角 / 阴影 / 边框色
  • GATE 2 标 ⚠️ 空的 token(每条都问)
  • GATE 3 推不出方向的 padding
  • 多行截断 / 折行行数
  • DSL 同类节点尺寸不一致 → 逐一确认实际渲染值
  • PATH 自定义图形:整体宽×高 / 关键顶点坐标(%) / 内 padding / 描边 / 三态填充色 / 段间嵌入 / 自适应行为

GATE 5 — 溯源表 + 确认

| 元素 | DSL 原值 | 规整后(4x) | 来源 |
| header padding | 21/20/11 | 20/20/12(21+11=32 → 20+12 守恒) | GATE 3 → 4x 规整 |
| 标题色 | #00141A | #00141A | DSL paint_xx |

规整后列 = GATE 6 实际写进 CSS 的值。

GATE 6 — 写代码

开头:✅ GATE 0–5 PASS(用户确认)。开始编码。

  • CSS 值严格用 GATE 5 表的"规整后"列
  • 变量没精确命中 → 字面量 + 注 token 名;禁挑近似#ECF2FF#EAF0FF
  • 完工:项目 lint 通过(ReadLints / eslint + stylelint

AntD 项目额外步骤

写 less 前 4 步打底(产物贴在 GATE 6 开头):

  1. node -p "require('antd/package.json').version" → 贴 antd@<ver>
  2. verify-antd-classes.js --list <comp[,comp...]> → 拿当前版本合法类名清单
  3. find-global-locks.js → 列项目全局 !important 锁,禁止再写同 selector 同 prop
  4. refs/antd-component-quirks.md —— v5↔v6 重命名速查 + 已知 case + 各组件源文件入口;遇新坑加进去(每条结论必带 path:line

完工 2 跑 + 1 比对:

  • verify-antd-classes.js <less> — 全 ✅
  • check-antd-defaults.js <less> — 无 ⚠️(⚠️ 删冗余重跑;❓ 仅提示)
  • 逐字对照 quirks 最小模板:用到的组件如有最小模板(如 Timeline),把当前 less 与模板逐行核对,缺一条都不行(quirks 表里每条都是踩出来的,没写齐就是新坑)

自适应布局陷阱(plan 阶段必算)

信号
flex 比例伸缩 + px margin/paddingmargin 用 %,公式 % = -(viewBox 内偏移% × 自身比例 / 总比例) × 100
SVG preserveAspectRatio="none" + 固定 stroke-widthvector-effect: non-scaling-stroke
flex item width: Xpx + flex: N 1 0二选一,撑满父容器选 flex
px gap + 容器宽度变% 或 grid Xfr

边界

  • 回退信号(任一命中停下对齐):建路由父级 / 改菜单 / 权限 / 公共基础设施 / 跨 ≥ 2 页 / 自定义动画或富媒体
  • 不做:新增依赖 / 反向改 MasterGo / 整站还原 / 绕过 GATE

脚本(scripts/

脚本GATE
find-node.js <dsl> <layerId>1
inspect-tokens.js <dsl> [layerId]2
extract-geometry.js <dsl> <layerId>3
verify-antd-classes.js <less> / --list <comp>6(AntD)
check-antd-defaults.js <less>6(AntD)
find-global-locks.js [glob]6(AntD,前置)
dump-dsl.js / build-antd-classes.js辅助 / 缓存(自动触发)

Como adicionar

/plugin marketplace add zhuzian/mastergo-to-code

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Comentários · Nenhum comentário

Entre para comentar. Entrar

  • Ainda não há comentários. Seja o primeiro.