研发
看不出细节偏差
- 页面效果差不多，非像素眼看不出细节偏差
- 多轮改样式、和 AI 对齐、和 UI 走验收，费事费力
技术分享
设计稿像素还原&验收闭环
生成代码 → 截图对比 → 多轮修正 → 验收文档
分享人：吴小东
01痛点
🤔 设计稿到小程序代码的还原过程中，存在时间消耗在像素级调整、布局对齐、样式微调等重复劳动上。
需要可重复执行的路径：从设计语义生成代码，再截图并与设计稿对比，未通过则修正后按同一路径重跑。期望流程是「生成代码 → 截图对比 → 多轮修正 → 验收文档」，而不是肉眼验收。
测试
多 case 截图与 mock
- 设计稿里有多种case，要反复截图
- mock数据，否则实际数据对不齐UI稿数据
设计
无需走查找 diff
- 要对着两张图找 diff，像素眼脚本标出差异
- 要进行问题标注和多轮走查
02问题分析&破局思路
模型
约束写在两端
- 等模型进一步升级，现阶段生成时或改进时给更多的限制规则
- 模型对长上下文同样更稳两端、中间易丢；关键限制放在提示的开头与收尾。
协作
图层不卡点在设计师协作上
- 设计稿图层会偏。每次请设计改图层，会变成时间不确定的依赖。
- 用设计师与研发的协作规范固定图层与切稿，少一次临时改稿。
闭环
研发侧自闭环跑完验收
- 目标是压链路沟通成本，验收尽量在研发侧自闭环。
- 路径：像素还原 → 对比差异 → 自动再修。
03预估收益&实际收益效果
此方案不只对研发提效，也对协作方提效。定性目标落在沟通轮次和走查时间上，暂不写未校准的提效百分比。
研发
少一轮人对人验收
- 细节偏差由叠图和门禁标出，不靠肉眼盯间距。
- 对比失败后自动再修，少和 AI、和 UI 来回对齐。
测试
少手工对齐稿与数据
- 同一套 mock 稳住页面，稿与实机可对同一批 case。
- 截图由脚本按路径重跑，少手工截多种态。
设计
少对着两张图找 diff
- 差异写在
compare.png，不用逐像素标注。 - 走查轮次下降，问题从门禁结果进修复，而不是会议里对图。
04核心流程
研发侧自闭环飞轮：设计语义进生成，截图对比出差，修复提示再回到生成。
四项同时过才算通过。
passed = 像素粗筛过 ∧ 行带辅判过 ∧ 绝对位移过 ∧ 相对关系过
- STAGE 1 设计上下文获取 Figma MCP → 图层 / 样式 / 变量
- STAGE 2 AI 代码生成 Prompt + MCP → WXML / WXSS / JS
- STAGE 3 自动截图对比 automator + Pixelmatch
- STAGE 4 差异分析 Diff 图 + 结构化清单
- STAGE 5 提示词再还原 修复 Prompt → 二次生成
修复 Prompt 回到 STAGE 2
图 3：像素闭环 · 自闭环飞轮
05核心架构
收集实际截图
小程序运行时
截图automator
请求 mockinject-mock
开发者工具服务端口
验收截图pixel-gate
截图配置screenshot
模块裁剪locate-module
处理分析
对比门禁策略引擎
像素粗筛pixelmatch
行带辅判row-align
墨迹绝对位移ink Δx / Δy
墨迹相对关系gap / baseline
分析闭环
修复提示diff-analyze
多轮再修re-restore
飞书验收文档acceptance-doc
交付产物
叠图compare.png
差异报告diff-report.json
飞书文档acceptance-doc
图 2：像素闭环 · 技术分层
| 原则 | 说明 |
|---|---|
| 模块优先 | 按页面一级模块裁剪后比较；模块间隙单独比较，不全页硬比 |
| 自动提取 | 墨迹 token 从像素切出可见文字与图标，不写选择器 |
| 双层门禁 | 绝对位移加相对关系；整页像素差异百分比只作粗筛 |
| 噪声降权 | 抗锯齿、透明叠底、微位移降权，降低假失败 |
| 可闭环 | 失败可生成修复提示；可选多轮再修；通过后可写飞书验收文档 |
06使用
流程
在 pixel-gate 仓库跑验收。产物在 lucp-flows/Flow-xxx/ui_review/。无配置时用 screenshot --page / --figma 建目录，不要手写 mkdir。必须连跳时 path 写目标页，加 entry 和 steps。折下或 Group 超一屏配 fullpage 或 prepare.scroll*。
- 开服务端口 开发者工具开启服务端口；取小程序绝对路径
-
截图
WECHAT_PROJECT_PATH=… npm run screenshot -- <flowId> -
对比
npm run pixel-diff -- <flowId> -
看结果
模块目录
compare.png、diff-report.json -
未过再修
diff-analyze；可选re-restore。条件判断先出方案，不反复改边距 -
全过写文档
询问后
acceptance-doc
跟 Agent 说
日常对 Agent 说明意图即可，不必记命令。把物料填进下面模板发给 Agent。
帮我页面UI验收 物料汇总 1. 需求文档链接： 2.设计稿figma页面节点link selection： 使用 flowId：xxx，小程序页面path验收
命令
| 命令 | 做什么 |
|---|---|
npm run screenshot |
开发者工具截图 |
npm run pixel-diff |
对比 + 门禁 |
npm run diff-analyze |
失败项生成分析 / 修复提示词 |
npm run re-restore |
多轮闭环还原 |
npm run acceptance-doc |
通过后写飞书验收文档 |
WECHAT_PROJECT_PATH=<小程序绝对路径> npm run screenshot -- 234 --module group-1 WECHAT_PROJECT_PATH=<小程序绝对路径> npm run pixel-diff -- 234 --module group-1 WECHAT_PROJECT_PATH=<小程序绝对路径> npm run diff-analyze -- 234 WECHAT_PROJECT_PATH=<小程序绝对路径> npm run re-restore -- 234 --module group-1 --maxRounds=3 --dry-run npm run acceptance-doc -- 234
--flowId/-f：缺省当天日期；数字234→Flow-234--module/--modules：逗号分隔模块 id--prd-url：acceptance-doc写入docs.js的PrdUrl- 须在小程序项目取绝对路径，设
WECHAT_PROJECT_PATH（或向上找project.config.json） flowsRoot：首次 TTY 三选一，写入~/.lucp-flows.json；LUCP_FLOWS_ROOT可覆盖
边界
- 只比较版式，不覆盖业务功能、接口字段与价格正确性。
- 虚拟列表未挂载的块、自绘滚动或不基于
scroll-view的滚动，fullpage 可能失败或漏拼。 - 长图滚动只走 automator，不改业务代码；对比仍走模块裁剪与墨迹门禁。
算法、阈值与演进记录见 像素验收技术方案。
产物
