Attach a screenshot or mockup and ask the AI to recreate it — it analyzes the layout, colors, and type and builds matching HTML/CSS.
Where: AI assistant → attach a reference — Attach an image and ask to copy it
Key ideas
- Reference in: Attach a screenshot/mockup of the design you want.
- Match out: The AI rebuilds layout, colors, and typography to match.
Steps
- Attach a reference image to the AI assistant.
- Ask it to recreate/match the design.
- Refine the result with follow-ups.
Use a reference without treating it as a finished layout
- Provide a clear screenshot/mockup or a reachable URL and describe which parts should be matched versus adapted.
- The assistant can use a reference for structure and visual context, but the generated result is an editable design—not a pixel-perfect guarantee.
- Ask for the design system or brand to be respected when consistency with an existing project matters.
Review the result
- Check page hierarchy, spacing, color, typography, and responsive behavior against the reference.
- Inspect the resulting page with the normal f0 editing tools and make scoped follow-up changes instead of repeatedly asking for a full rebuild.
- For a URL, ensure it is publicly reachable by the tool path; inaccessible or script-only content may provide incomplete context.
Tips
- Name the parts that matter most—such as hero proportions, type scale, or card treatment—and call out what should not be copied.
- Use a crop with readable text and the full relevant layout when attaching an image reference.
Limitations and important notes
- Reference recreation is approximate; the source page’s private data, assets, or behavior are not automatically available.
- Generated pages still require review at responsive breakpoints and normal accessibility checks.