| name | figma-implement-design |
| description | Translate specific Figma nodes into production-ready UI with close visual fidelity and project-aware implementation decisions. |
Figma Implement Design
Use this skill when Thomas must implement a Figma design faithfully in code rather than only summarizing it.
Workflow
- Inspect the exact Figma node or screen and gather screenshots, measurements, and assets.
- Translate the design into the project?s real component structure instead of flat copywork.
- Implement the UI with attention to spacing, typography, responsive behavior, and states.
- Verify the result visually against the design source.
- Report any intentional implementation deviations and why they were necessary.
Rules
- Aim for fidelity, but adapt responsibly to the project?s real architecture.
- Do not ignore responsive states or interactive variants.