Docs · How-tos
Create a first component from a screenshot
Turn the useful direction in a focused screenshot into structured React that can adapt to your product.
4 min read
Outcome and prerequisites
The outcome is a live first component that carries the reference's hierarchy and visual language while using your product's content and behavior.
- Use a clear screenshot of one component or bounded interface section.
- Know what should stay faithful and what should adapt.
- Prepare realistic content and the interaction the screenshot cannot show.
Workflow
- 01
Crop to the useful interface
Remove unrelated browser chrome and neighboring screens when possible.
- 02
Attach the screenshot
Use Add image reference in the canvas composer and choose the focused image.
- 03
Explain the adaptation
Name the hierarchy to preserve and provide the content and behavior your product needs.
- 04
Generate and inspect
Review the result as interactive, responsive software—not only as a matching frame.
- 05
Correct the largest mismatch first
Refine hierarchy or structure before small spacing and color adjustments.
Expected result
You should have a working component that expresses the reference's strongest relationships without copying irrelevant browser or app chrome. Continue by refining the largest mismatch or create a meaningful variant.