Files
workbuddy_skills/draw-ui/references/calibration.md
T
admin 237a09a5b0 修:draw-ui / oil-motion 原被当子模块指针收录 ⇒ 改为正常文件入库(两份内容原先对别人是空的)
一、问题(本轮实测)
`draw-ui` 与 `oil-motion` 目录里**各自带一个内嵌 `.git`** ⇒ 上一次提交把它们记成了 **gitlink(子模块指针)**
⇒ 仓库里只存了一个不属于任何远端的 commit id,**别人克隆下来这两份是空的** ✗(`git status` 显示 ` m draw-ui` / ` m oil-motion` = 子模块内容有改动)。

二、处置(可回退)
· 把两处的 `.git` **挪走**(⛔ 不是删除)⇒ `归档/内嵌git-20261008/{draw-ui,oil-motion}.git`;
· `git rm --cached` 掉那两个 gitlink,再 `git add` 两个目录 ⇒ **按正常文件入库**(内容才真的进仓库)。

三、副作用(如实记)
挪走 `.git` 后,这两个技能**不能再原地 `git pull` 取上游更新**(要更新得重新拉一份覆盖);
如需恢复其本地仓库,把 `归档/内嵌git-20261008/` 里的 `.git` 挪回原处即可。
2026-10-08 22:29:52 +08:00

4.6 KiB

测量与还原校准

视觉判断负责选区、主体、构图和字体层级;程序负责尺寸、坐标、颜色统计与偏差。先确认原图尺寸与 CSS 逻辑视口的映射,截图像素不能直接当作 CSS 像素。

选择验证范围

  • 浏览器页面精准还原:执行下方完整流程,字段和命令按 测量与采集接口 使用。
  • 组件局部修改:只标注目标区域和必要的相邻锚点,可复用已核对的基线,不要求重新标注整页。
  • 只有图片或非 DOM 渲染:保留图像测量,使用接口文档的图片比较分支;小程序、canvas 等使用对应工具取证,不伪造浏览器元数据。

实现前建立基线

  1. 选择少量关键锚点:区块起点、容器边距、重复网格、标题与素材容器。按原图像素填写区域清单;浏览器还原同时填写预计选择器、页面地址、视口和截图条件。
  2. 运行 measure_reference.py,打开标注图确认范围,再检查颜色与几何统计。选区不准先修清单;程序不会自动识别正确边界。
  3. 从统计选择少量公共变量和布局约束。浏览器还原运行 prepare_capture.py 生成首轮采集文件,将测量事实、推断和实现选择分开记入 round-notes.md,再编写布局与样式。

测量时保留这些区别:

对象 判断方式
色面 在内部避开文字、摄影和高光;同时看中位数与分位数,波动大时检查渐变或污染,不把每个采样值变成 CSS 变量
重复组件 比较宽度与间距分布;小幅采样波动可归为公共规格,明显不同的比例应保留,不先假定等宽
文字 元素外框、文本行盒和可见字形分别判断;字形框不参与 DOM 外框比较,不能靠缩短标题块宽度修复字形差异
装饰与素材 斜切边界与正文几何分开;图片按既定容器比例、主体位置和遮挡范围检查,规格冲突时回到素材流程

实现后采集与验收

  1. 启动本地服务并核对项目身份。端口冲突时保留原进程、另选端口并更新基线;启动失败不继续导航。静态 HTML 可用接口文档的 --preflight 检查,退出码为 0 才继续;动态应用按项目实际身份标记核对。
  2. 按宿主浏览器流程打开目标页面,核对实际 URL、标题、视口和 DPR。每轮重新读取,不假定模拟设置跨导航或会话保留;页面身份不符时停止交互,截图条件不符时重新设置并采集。
  3. 等待字体和图片完成,检查本轮替换资源是否真正更新;背景图、视频和 canvas 需额外检查。冻结动画或等待稳定状态,采集期间不改变页面、滚动、视口或资源状态。
  4. 在主文档执行本轮 collect.js,将真实元数据与截图保存为 capture.json、candidate.png。元数据中的 full_page 和 screenshot_scale 必须来自实际截图选项,再运行 verify_capture.py。
  5. 读取诊断与偏差报告,在目标显示尺寸下目视复核并实际操作。程序检查通过只表示采集前提成立,不证明没有遮挡、字体正确或交互可用。

人工与操作验收集中检查:

  • 元素实际显示,内部布局与外框一致,素材没有遮挡文字、控件或导航。
  • 真正用于字符渲染的字体、字重、行高和换行符合参考;CSS 候选列表与字体加载完成不能证明选中了原字体。
  • 主要操作、失败反馈、长内容和响应式切换正常;切换后复核导航、换行与内容高度。
  • Logo、细字和素材边缘按最终显示大小及目标 DPR 检查,不能依靠长页缩略图。240×80 CSS 区域在 DPR 2 下需要 480×160 的设备像素截图才能作为该分辨率的证据。

修正与复验

引用 geometry.md 的区域名,在 round-notes.md 记录本轮假设、调整变量及观察到的收益与退步。连续区块同向偏移时,先查最早发生偏移的位置;调整顺序为页面宽度与容器 → 字体与换行 → 间距 → 素材裁切与装饰,不给后续区块逐个打位移补丁。

下一轮从同一测量结果生成新目录,重新采集,并通过 --previous 比较前轮报告。参考图、标注或截图条件改变时重新测量建立基线,不沿用前后改善结论;条件失败时保留原始记录,修正后重采,不改派生文件绕过检查。

像素差异和几何偏差帮助定位变化,不转换成“还原度百分比”。摄影、近似字体和品牌原稿缺失造成的差异单独说明。最终结论同时依据局部画面、程序报告和真实操作;案例与轮次记录留在任务目录。