Aigd ui capture

界面截图 → 界面 DSL（工具1 · 捕获器）

把一张界面截图读成一份界面 DSL(.md):结构 / 类型 / 层级 / 几何 / 交互。它是确定性脚本 ui_render.py(工具2 还原)、ui_slice.py(工具3 切图)的输入。本 skill 编排流程,文法/配方一律以 ../aigd/references/界面DSL规范.md 为准(规范更新无需改本文)。

---

第 0 步：读真源（每次必做，用 Read，别凭记忆）

文件	取什么
../aigd/references/界面DSL规范.md	文件骨架 + Layout 行文法 + 类型表 + z 分层 + 形状 + 来源语义 + 看图配方(§7) + 皮肤/主题(§9)
../aigd/references/scripts/ui_render.py	还原 + 缺 z 提醒 + 校准导出(验证产物用)
../aigd/references/scripts/ui_palette.py	从原图采色 → 写成 ## 皮肤 段(配色入库用)
../aigd/references/scripts/ui_slice.py	图+DSL → 逐元素切片 + index.md 接触表(拆素材,可选)
../aigd/references/界面DSL-样例.md	一份随包合规 DSL 的形态(示例屏)

第 1 步：确认输入

要 一张截图 + 屏ID + 来源(竞品名/自家) + 一句 用途。缺就问。竞品图默认"原图转完可弃,DSL 入库"。

第 2 步：按看图配方产 DSL（规范 §7）

严格走规范 §7 的顺序:屏头 → 配色板 → Layout(从外到内/从上到下:先容器后叶子)→ Events → 设计点评。逐元素必标 类型 + @{x y w h} + z=N(渲染器虽允许省 z,但捕获入库必须标全——你在抄真图,层级要记准);圆形标 形=圆,选中/锁标 [态],全屏底图 @{0 0 100 100} z=1。竞品数据只标 :观测/:推断,绝不写 :真源。几何目测百分比即可(精度交给第 3 步校准)。配色不写进元素行——第 3 步用 ui_palette.py --merge 采色写成 ## 皮肤 段(规范 §9)。

第 3 步：跑工具2 验证（必做，闭环）

python ../aigd/references/scripts/ui_render.py <屏ID>.md <out>.html --svg <out>.svg
python ../aigd/references/scripts/ui_palette.py <屏ID>.md <原图> --merge   # 采色写成 ## 皮肤 段

• 缺 z 会提醒(列出哪些没标)→ 捕获入库前回去补全(渲染本身不阻断,但入库要标准)。
• 浏览器开 <out>.html,眼比原图:层级/区域比例/文本/交互对不对;切 线稿/皮肤/氛围 看结构(采色后皮肤档即用真色)。
• 偏了就用 html 的「校准」拖拽微调 →「导出 DSL」把校正坐标贴回 <屏ID>.md → 再跑一遍。
• 校验范围是结构/比例/层级/文本/交互,不含美术(美术换自己素材,见规范 §5)。

第 4 步：入库

合格后存 patterns/界面范式/<游戏>/<屏ID>.{md, html, svg(可选)},并在该目录 INDEX.md 加一行(屏ID / 来源 / 布局模式 / 标签),供 concept/system 设计时检索同类参考。

需要拆素材时(可选):ui_slice.py <屏ID>.md <原图> [outdir] 把原图切成逐元素 png + index.md 接触表(--only 背景槽,立绘槽,图标槽 只切美术槽),便于参考/替换竞品部件;原图弃前跑一次即可(规范 §8)。

---

硬约束（别违反）

• 捕获入库必标 z=(这是工具1 的纪律,不是渲染器强制——渲染器允许省 z 按缩进/文档序兜底,但抄真图要把层级记准)。
• 不靠猜:形状、层级只按 md 声明,渲染器不从纵横比/几何推断——所以工具1 必须把 形=/z= 写全。
• 竞品来源只用 :观测/:推断,不臆造 :真源。
• 配色入皮肤段:不写进元素行;用 ui_palette.py --merge 采成 ## 皮肤 段(按 id),整段可换可删(规范 §9)。
• 还原结构非美术:不追像素复刻,art 槽留空换素材。
• 文件 UTF-8 无 BOM(中文加 BOM 会让下游乱码);各 harness 写法见 ../aigd/references/harness适配.md。
• 本 skill 只编排;文法/配方一律以 界面DSL规范.md 为准。