UI 一键拆解复刻
输入一张游戏 UI 截图，产出三件套：
- 拆解报告
breakdown.md— 布局分区、配色色值、字体层级、组件清单、切图建议 - 布局预览
preview.html— 自包含 HTML，双击即可在浏览器打开，可交互 - Cocos 实现
cocos/— TypeScript 脚本 + 编辑器搭建指南（节点树 / 属性绑定 / 切图清单）
输入处理
$ARGUMENTS 约定：第一个词 = 图片路径或 URL；第二个词（可选）= 输出目录名（kebab-case，默认 ui-ref-01 递增）。
- 路径含中文、空格或非 ASCII 字符：先复制到工作区 ASCII 路径再处理。图片上传分析对原始中文路径会报 400 解析错误，这是实测踩过的坑。
- 是 URL：用
curl -L -o下载到工作区。 - 没有给图：停下来向用户要图，不要凭空猜测。
统一复制为 ui-out/<slug>/source.png，后续全部步骤只用这个副本。
工作流
- 复制图片 →
ui-out/<slug>/source.png - Read 该图片，自己做视觉分析（布局、颜色、文字、组件、风格）。若会话里有内置图像分析工具可作交叉验证，但不能依赖它存在。
- 写
ui-out/<slug>/breakdown.md— 结构见 references/report-template.md - 写
ui-out/<slug>/preview.html— 规范与坑见 references/preview-template.md - 写
ui-out/<slug>/cocos/— 架构与 README 格式见 references/cocos-template.md - 浏览器截图验证 preview（方法与坑见下文"验证"），发现问题修复后复验
- 最终汇报：三个产物的可点击路径、拆解核心结论（3-5 条）、验证中修复的问题
深度模式：用户说"只要报告""先分析一下" → 只做 1-3 步并明确说明；其余情况默认全做。用户说"不要 Cocos"或目标引擎不是 Cocos → 跳过第 5 步。
验证
preview 必须实际渲染检查，不能写完就交付：
- preview 是自包含的，
file:协议无法在浏览器工具里导航——用mcp__node_repl__js在内核里起临时 http 服务（root = 当前工作区），通过http://127.0.0.1:<port>/...打开 - 截图首帧经常 30s 超时，但捕获已在后台完成：catch 住这次错误，等 2.5 秒重试一次即可成功。不要因为超时判定页面有问题
- 页面引用的大图（参考图等）加载慢：截图前等待图片解码完成（轮询
img.complete && img.naturalWidth） - 质检项：框体完整（顶部/底部不被视口裁切）、无文字溢出重叠、区块对齐、配色与报告一致、交互（点击/切换）正常
- 视口高度不足时页面应自动整体缩放（fitPhone 方案，见 preview 模板），验证时确认缩放生效
产物结构
ui-out/<slug>/
├── source.png 原图副本（ASCII 路径）
├── breakdown.md 拆解报告
├── preview.html 布局预览（自包含，双击可开）
└── cocos/
├── README.md 编辑器搭建指南
└── scripts/ TypeScript 脚本（可直接拷入 Cocos 项目）
质量底线
- 报告里的色值必须是目测估算的十六进制值并标注"估"，不允许写"金色"这种不可执行的描述
- preview 的每个区块在侧栏标注对应的 Cocos 节点名，让预览成为搭建施工图的可视版
- Cocos 脚本没有美术切图也必须能跑（内置色块 / builtinResMgr 占位），并在 README 注明哪些属性等图再绑
- 所有产物文件名和注释用中文优先，方便用户阅读
