| name | aigd-ui-capture |
| description | AIGD · 界面截图 → 界面 DSL(知识库捕获/工具1)。当要把游戏界面截图(竞品或自家)转成结构化 md(类型/层级/几何/交互/状态),以便 ui_render.py 还原成线框、并攒进 patterns/界面范式 知识库时使用。看图配方与文法的权威在 ../aigd/references/界面DSL规范.md;本 skill 只编排流程、不复制文法。是 aigd 包的一员。 |
界面截图 → 界面 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 为准。
