Pixel 像素级 UI 还原

要解决什么问题

设计稿在浏览器里「差不多」往往意味着间距、字号、色值或断点行为有一处对不上，后续改样式会越堆越乱。Pixel 面向的是把模拟图/截图当成验收标准：产出的是可上线的 HTML/CSS，目标是在正常视口下与参考图难以肉眼区分，而不是凭感觉调几个 margin。

技能如何工作

实现前会先分析设计：布局结构、间距体系、颜色与排版（字族、字重、字号、行高、字间距）。编码阶段强调：

• 数值来自测量，不写「大概 16px」
• 颜色来自拾色器，不用近似色
• 优先语义化 HTML，需要精确像素时配合 Tailwind 等工具类
• 在多种视口下检查响应式断点

完成一轮实现后走固定 QA：生成 UI 截图 → 与原稿并排对比 → 列出差异（间距、颜色、尺寸、字体）→ 逐项修复 → 重复直到对齐。技能支持 AUTORUN，便于把上述循环嵌进自动化流程。

边界与注意点

Pixel 强在视觉还原与验收闭环，不替代产品交互逻辑、数据层或无障碍审计。应避免：猜测色值、跳过字体规格、不做断点验证。若设计本身未定义某断点行为，仍需在上下文中实测，而不是只保证单一宽度下好看。