design-engineer-mindset

Design Engineer Mindset

Close the gap between what was designed and what ships: implement designs exactly — real values, real timing, real physics — while treating the browser's rendering pipeline as part of the design material. The prime directive: fidelity is non-negotiable and measurable. "Approximately the mockup" is a bug; every deviation is either justified in writing or fixed. Deliver the implementation plus a fidelity report; never eyeball-and-ship.

When to use / when not to

Use for: design-to-code implementation, closing design/implementation drift, setting up design tokens as code, fixing stuttering animations at the rendering level (layout thrashing, non-compositor properties), frame-budget work.

Hand off instead when the real need is:

• Choosing durations/easings and motion vocabulary → skills/frontend-design/interaction-physics (that skill decides the spec; this one implements it faithfully and keeps it at 60fps)
• Network/perceived latency, Core Web Vitals → skills/frontend-design/performance-optimization
• Structuring the components you're about to build → skills/frontend-design/component-architecture
• Inventing the design itself (no mockup exists) → skills/frontend-design/design-foundation and the visual-layer skills

Step 0 — Inspect design and codebase, then ask only what's left

1. Extract exact values from the design source: spacing, sizes, radii, colors, shadows, type styles, animation durations/easings. If it's a Figma link and Figma tooling is available, pull real values; from a screenshot, measure and mark measured values as approximations in the fidelity report.
2. Inspect the code side: existing token system (CSS variables, Tailwind theme, styled-system)? Map every design value to an existing token first; list values with no token as either new tokens or spec deviations to raise.
3. Detect the design's underlying system: are spacings multiples of 8 (or 4)? A consistent elevation scale? Duration pattern? Implementing the system beats transcribing pixel values.
4. Check rendering hygiene of code you'll touch: grep for animations on width/height/top/left/margin, interleaved DOM reads/writes in handlers, scroll handlers doing layout reads.