The best workflow depends on what you already know. Start from text when the product job is clear. Add a screenshot or website reference when visual structure matters. Use follow-ups when you have a working project and a specific issue to improve.
Screenshot to app
Translate a visual reference into a responsive, functional React product.
Read guideIterate with follow-ups
Make contained improvements while preserving working behavior and design.
Read guideExport and handoff
Inspect the generated project and validate it in a clean local environment.
Read guideChoose the smallest useful loop
For most projects:
- Generate one coherent primary surface.
- Test its most important interaction.
- Repair correctness issues before adding scope.
- Refine visual hierarchy and responsive behavior.
- Export only after the preview and quality evidence agree.
This order keeps visual polish from hiding broken behavior.