Agent Skills: design-engineer-mindset

Translate a design (Figma mockup, spec, screenshot, or verbal description) into code with pixel- and motion-level fidelity, using the browser's rendering pipeline as a constraint: exact spacing/timing via tokens, GPU-safe animations, no layout thrashing, 60fps interactions. Use when the user says 'implement this design', 'make it match the mockup', 'it doesn't look like the Figma', 'the animation stutters/drops frames', 'set up design tokens', or when a diff between design and implementation needs to be closed. Produces the faithful implementation plus a fidelity report (design value → implemented value → any deviation and why) and performance notes.

ID: sanky369/vibe-building-skills/design-engineer-mindset

Install this agent skill to your local

npx skills add sanky369/vibe-building-skills --skill design-engineer-mindset

Skill Files

The files that make up design-engineer-mindset.

Download Skill

More agent skills