Prepare the design reference
Export the target Figma frames as high-resolution images or PDF, and include notes for states that are not visible in the static reference.
- Use consistent component states
- Include mobile or tablet frames when available
- Document fonts and assets that require licensing
- Describe data-driven regions
Define component boundaries
Repeated cards, navigation items, buttons, form controls, and layout sections should become reusable React components. Avoid mirroring arbitrary design-layer nesting when it has no meaning in the application.
Validate the React output
Check prop design, keys, semantic HTML, form behavior, accessibility, responsive rules, and dependency choices. Generated code is most valuable when it becomes a maintainable starting point rather than a screenshot replica.