界面稿 PSD→PNG：像素对齐、倍率切图与深浅色模式三套验收，缺一项就会在真机上露馅
`ui-mockup-psd-png` 服务产品评审与前端对接：UI 资产最怕非整数坐标与奇数尺寸，缩放后 1px 边框会糊成 1.5px。透明图标若带柔和投影，在深色主题下常出现「灰雾」；单张 PNG 往往无法同时服务浅色与深色模式。应把设计标注里的间距、圆角与导出倍率写死，评审复合里分离可导出层与红线说明层，避免自动化把批注也栅格进资源。
如何使用
- 在 Photoshop 开启像素网格与对齐，把图标关键边落到整像素，按 1x 基准确定偶数宽高后再生成 2x/3x 画板；上传前切换到「仅资源层」图层复合。
- 下载后在浏览器开发者工具里按实际 CSS 尺寸查看，分别叠在浅色与深色页面背景上检查透明投影；若深色发灰，准备第二套深色专用资源或改矢量方案。
- 把切图命名与组件 props 映射表放在同一 PR 里更新，避免设计库文件名与代码 import 脱节；附带 PNG 字节大小供性能同学评估。
PSD 转 PNG（ui）问答
UI 切图要求贴齐像素网格但导出的 PNG 在 1x 显示发虚，是否与非整数坐标、奇数尺寸或未开像素预览有关，应如何系统排查？
矢量或形状若落在半像素坐标，栅格化后会在两侧各分一半灰度，看起来像发虚；奇数尺寸在整数倍缩放时也会让中心线错位。应在 Photoshop 开启像素对齐，把描边与矩形边对齐到整网格，并用 1x 整数尺寸推导多倍率资源，而不是直接放大再随手裁切。
多倍率切图 @2x/@3x 的文件命名与目录结构应如何与前端 manifest 绑定，才能避免重构时批量断链？
应在仓库维护 manifest（组件名 → 各倍率文件名），统一采用 `@2x` 后缀或 `drawable-xxhdpi` 式目录，并在 CI 校验缺失；口头约定「图标放那层文件夹」会在重构时一次性全断。设计交付时同步更新该表，避免工程引用旧路径。
同一枚带柔和投影的透明图标在浅色主题正常、深色主题出现灰雾，单 PNG 是否应拆成深浅两套资源或由代码绘制阴影？
浅色底上好看的投影在深色底会像一层灰雾，这是像素合成规律而非单一导出 bug。应提供 light/dark 两套 PNG，或把图标主体改 SVG/矢量由代码着色，投影用 CSS 绘制；若业务坚持单 PNG，需在规范里写明仅适用于哪一主题。
小程序或旧客户端对包体与解码性能敏感，在仍要求 PNG 的前提下如何与工程协商 WebP/雪碧图与字节预算，避免上线后低端机卡顿？
小程序与旧客户端常对包体敏感，应在支持的前提下优先 WebP/AVIF，否则合并同类小图标为雪碧图并配合合适压缩参数；同时评估运行时解码成本，不要只顾体积导致低端机掉帧。与工程共同签字性能预算后再定稿 PNG 方案。
评审用的红线、尺寸标注误被导出进线上 PNG，用户看到设计师箭头，应如何用图层复合与自动化脚本隔离可交付层？
红线、尺寸标注与 sticky note 应放在独立复合或颜色标记层，导出脚本只读取「ASSET」复合；评审截图用「REVIEW」复合。否则自动化流水线会把批注栅格进线上图标，用户会在 App 里看见设计师的箭头。