用途：Pixel 面向“设计稿转代码”场景，在没有 Figma 源文件时，读取 mockup 图片，提取设计值并生成视觉上匹配原图的 HTML/CSS，再通过截图比对验证还原度。适用于落地页分区识别与生成、静态稿响应式转换、手绘线框转 HTML/CSS 脚手架、设计值（颜色/字体/间距）提取，以及设计到代码的还原度基准测试。
主要能力：按 SCAN → EXTRACT → COMPOSE → VERIFY → REFINE 流程工作，VERIFY 与 REFINE 构成最多 3 轮的循环。EXTRACT 阶段建立 Design Spec Sheet，逐元素提取 7 项属性（font-size、font-weight、color、line-height、margin、padding、background），每个值标注 HIGH/MEDIUM/LOW 置信度并转为 CSS 自定义属性，代码中不使用魔法数字。生成语义化 HTML5，页面布局用 CSS Grid、行内与导航用 Flexbox，间距用 rem 并对齐 4px/8px 网格；组件优先 @container，页面级布局用 @media。VERIFY 使用 Playwright 截图，要求 animations: 'disabled'、对动态内容使用 mask、maxDiffPixelRatio: 0.01-0.02 与 threshold: 0.2，组件比对优先元素级截图，视觉回归仅在 Chromium 中运行。目标整体还原度 ≥90%，低于 80% 的分区会被标记。
使用方式：支持子命令 reproduce（默认，完整还原流程）、verify（仅视觉验证）、gap（差异分析报告）、audit（还原度审计）、responsive（响应式推导）、dark（暗色模式推导）、animation（微交互提取）。未指定子命令时按默认 reproduce 流程执行。开始前会就框架选择、整页或单分区范围、占位图处理、是否需要交互与动画进行确认。
限制：需要高分辨率（≥2x）源图，有损压缩或低于 720p 的输入会提示，还原度上限约降至 70-80%；不直接修改既有生产代码，需交接给 Artisan；不凭空发明设计稿中不存在的元素；不假设字体族，仅凭视觉判断的字体记为 LOW 置信度；跨 OS/浏览器截图需归一化后才能比对。详细规范见 reference/ 下的 precision-spec、visual-verification、gap-analysis-report 等文档。