用途：把设计稿（Figma、规格、截图或口头描述）忠实实现为代码，消除设计到上线的偏差，并处理渲染层面的动画卡顿（布局抖动、非合成属性）与帧预算问题。核心理念是保真度不可妥协且可度量，“大致接近稿子”视为缺陷，任何偏差须书面说明或修复。
适用与不适用：适合设计转代码、收敛设计实现漂移、建立设计令牌、修复卡顿动画、帧预算优化；若真正需求是决定动效时长与缓动、网络与感知延迟、组件架构或从零发明设计，则应交给其他技能处理。
用法：先从设计源提取精确值（间距、尺寸、圆角、颜色、阴影、字型、动效时长与缓动），Figma 可用时取真实值，截图测量值须标注为近似；检查代码侧已有令牌体系并逐一映射，识别设计底层系统（如 8 点网格、层级与时长模式）；实现时所有颜色、间距、尺寸、阴影、时长都走令牌，字面值仅用于定义令牌；动画只用 transform 与 opacity，避免布局属性，批量读写 DOM，写操作放入 requestAnimationFrame，60fps 对应 16.7ms 每帧，先剖析再改代码，记忆化仅在剖析显示需要时使用。
交付物：一是代码，基于项目既有技术栈与约定；二是保真度报告，含实现摘要、逐项保真表（设计值、实现值、令牌、偏差及原因）、已实现状态表（含推断的状态假设）、性能说明与假设/待确认问题。
限制：不得在实现时擅自“改进”设计，不得未受邀安装可视化回归或动画工具，不得未剖析就声称 60fps，不得构建超出设计实际使用的推测性令牌架构；同步须保证焦点可见性、对比度与触摸目标（WCAG 2.2 AA 最小 24×24 CSS px，触摸优选 44×44）。}