design-engineer-mindset

设计工程师思维

缩小设计与交付成果之间的差距：精确实现设计——使用真实的数值、真实的时序和真实的物理效果，同时将浏览器的渲染流水线视为设计素材的一部分。**首要原则：保真度不容妥协，而且必须可衡量。“大致符合样稿”就是缺陷；每一处偏差都必须有书面理由，或者予以修正。**交付实现和保真度报告；绝不凭目测就发布。

何时使用 / 何时不使用

适用于：设计转代码实现、缩小设计与实现之间的偏差、将设计令牌设为代码、从渲染层面修复动画卡顿（布局抖动、非合成器属性）、帧预算工作。

以下情况应转交给其他技能：

• 选择时长/缓动曲线和动作词汇 → skills/frontend-design/interaction-physics（该技能负责确定规范；本技能负责忠实实现，并确保达到 60fps）
• 网络/感知延迟、Core Web Vitals → skills/frontend-design/performance-optimization
• 规划即将构建的组件结构 → skills/frontend-design/component-architecture
• 创建设计本身（没有样稿）→ skills/frontend-design/design-foundation 和视觉层技能

第 0 步 — 检查设计和代码库，然后只询问尚未明确的事项

1. 从设计源中提取确切数值：间距、尺寸、圆角、颜色、阴影、字体样式、动画时长/缓动曲线。如果提供的是 Figma 链接且有可用的 Figma 工具，则提取实际数值；如果来源是截图，则进行测量，并在保真度报告中将测得的数值标记为近似值。
2. 检查代码侧：现有的令牌系统（CSS 变量、Tailwind 主题、styled-system）？先将每个设计值映射到现有令牌；将没有对应令牌的值列为新令牌或需提出的规范偏差。
3. 识别设计底层的系统：间距是否为 8 的倍数（或 4 的倍数）？是否有一致的层级比例？是否有时长规律？实现系统胜过逐个照抄像素值。
4. 检查要修改的代码是否符合渲染规范：搜索对 width/height/top/left/margin 的动画、处理程序中交错的 DOM 读写，以及执行布局读取的滚动处理程序。

仅在设计源未提供答案时，集中一次询问用户：样稿只展示单一宽度时的目标断点/响应式行为，以及静态样稿中不可见的交互行为（悬停/按下/加载状态）。如果无法询问到答案，则采用符合设计系统的合理默认值，并将其记录为假设——不要因此停滞。

工作流

1. 转录数值之前先还原设计意图

对于每个重要数值，说明其原因（触控目标、网格步长、层级、时长类别）。规则：如果某个数值与设计自身的系统矛盾（例如，在 8 点布局中出现突兀的 13px），应将其标记为可能的规范错误并告知用户，而不是悄悄照抄或擅自修正。意图表示例：references/rendering.md。

2. 通过令牌实现，而不是直接使用字面值

• 代码中的每种颜色/间距/尺寸/阴影/时长都必须引用令牌；原始字面值只能出现在定义令牌的地方。
• 如果没有令牌层，而且有不少于几个数值会重复出现，就创建一个（CSS 变量，或者在使用 Tailwind 时扩展 Tailwind 主题）——但应保持精简，并根据实际设计推导，不要凭空设计一套系统。
• 精确性规则：44px 就是 44px，300ms 就是 300ms，缓动曲线必须是指定的 cubic-bezier——不能“差不多”。

3. 在渲染管线的物理约束内制作动画

• 属性规则： 只制作 transform 和 opacity 动画（仅触发合成）。布局属性（width/height/top/left）会触发布局、绘制和合成——绝不为它们制作动画；通过伪元素的 opacity 交叉淡化来模拟阴影，通过 scale() 强调尺寸。
• 布局抖动规则： 批量读取 DOM 后再进行写入；在处理程序中，先读取几何信息，再将写入安排到 requestAnimationFrame 中。在循环中交错读写时，必须修复。
• 帧预算： 60fps = 每帧 16.7ms；为 JavaScript 预留约 10ms。动画卡顿时，先进行性能分析（DevTools Performance），并找出具体阶段——长时间运行的 JS 任务、强制回流或绘制风暴——再修改代码。
• 记忆化（React.memo、useMemo、useCallback）仅在性能分析显示重新渲染有开销时使用，不要默认到处添加。

标准模式（渲染管线表、布局抖动修复、GPU 关键帧、FPS 计量器、令牌代码块）：references/rendering.md — 实现时请阅读。

4. 验证保真度和性能

• 编写保真度报告：并列列出设计值和实现值，并在偏差列中说明每处不一致的原因。如果环境支持渲染，请进行截图对比。
• 检查所有指定状态（悬停、按下、焦点、加载、错误、空状态）——模型图通常只展示一种状态；实现必须覆盖所有状态，而你自行新增的状态要标记为假设。
• 如果项目有视觉回归工具（Percy/Chromatic/Storybook），请为新增状态添加快照；如果没有，请在报告中建议一次——不要擅自安装。
• 对于动画相关工作：确认没有遗留布局属性动画，并对最复杂交互的帧开销进行性能分析或推算。

必需的输出格式

交付以下两项：

1. 代码 — 忠实实现，基于令牌，并使用项目现有的技术栈和约定。

2. 保真度报告（markdown）：

## Implementation summary
What was implemented, from which design source, into which files.

## Fidelity table
| Property | Design | Implemented | Token | Deviation & why |
| Button height | 44px | 44px | --size-control-lg | — |
| Card shadow | y4 b6 10% | same | --shadow-md | — |
| Modal duration | 300ms ease-out | 300ms cubic-bezier(0.16,1,0.3,1) | --duration-base | curve per motion spec, approved values |
| Sidebar gap | 13px (off-grid) | 12px | --spacing-sm+xs | flagged: mockup off its own 4pt grid — confirm |

## States implemented
| State | Source | Notes |
| hover/press/focus | inferred (not in mockup) | assumption — matches system patterns |
| loading | mockup frame 3 | — |

## Performance notes
- All animations on transform/opacity ✓
- [Any profiling done, frame costs, thrash fixes applied]

## Assumptions & open questions
[Responsive behavior chosen, off-grid values flagged, unverifiable measurements from screenshots]

质量标准（交付前检查）

• 每个设计值都完全匹配，或有书面偏差原因——不允许存在未说明的近似值
• 组件代码中没有原始魔法数字；所有值都通过令牌传递
• 动画不涉及布局属性；修改过的代码中没有交错读写的循环
• 已实现所有交互状态，自行新增的状态均标记为假设
• 已标出模型图中不符合设计系统的值，不得默默沿用或修正
• 基于截图测得的数据均标记为近似值；不得虚报精度
• 不得以牺牲无障碍性换取保真度：焦点可见性、对比度和触控目标最小尺寸（WCAG 2.2 AA 为 24×24 CSS px；触控场景建议 44×44）在实现中均须保留
• 只有实际测量后才能声称性能表现（fps、渲染开销）

严格禁止：实现时不要“改进”设计——应另行提出改动建议；不要擅自安装视觉回归或动画工具；未经过性能分析，不要声称达到 60fps；不要构建超出设计实际使用范围的推测性令牌架构。

集成

• skills/frontend-design/interaction-physics → 提供本技能以完整保真度和帧率实现的动画规范（时长/缓动）。
• skills/frontend-design/component-architecture → 规划构建内容的结构；请在其组件边界和属性约定内实现保真度。
• skills/frontend-design/design-foundation → 负责令牌系统的设计；本技能在代码中对其进行编码和使用。
• skills/frontend-design/performance-optimization → 当性能变慢源于网络或数据而非渲染时，由它接手；将你发现的请求瀑布流问题告知它。

参考资料

• references/rendering.md — 渲染管线成本模型、布局抖动修复方法、GPU 安全的动画模式、帧预算测量代码、设计令牌 CSS 代码块、React 记忆化模式、视觉回归和性能测试示例，以及设计意图表。实现功能或调试卡顿交互时请阅读。