1. Give each reference a job
Choose references because they answer a design question. One might establish editorial scale, another interaction density, and another the relationship between product imagery and interface controls.
2. Extract principles before components
Ask the AI tool to describe transferable qualities before generating code. Review that interpretation and remove anything that is merely decorative or incompatible with the product.
- Hierarchy and reading order
- Spacing rhythm and density
- Type contrast
- Palette roles rather than exact colors
- Image treatment and composition
3. State the product constraints
The reference never overrides accessibility, responsive behavior, content requirements, or existing design-system conventions. Put those constraints in the same request.
4. Ask for an original synthesis
Tell the model to use the extracted principles while creating a composition specific to your product. Multiple references can reduce the temptation to imitate one source too literally.
5. Review against the principles
Compare the implementation to the chosen hierarchy, rhythm, density, and tone. Do not judge success by whether it resembles the screenshot at a glance.
Takeaway
Use references to define design principles and review criteria; let the resulting interface remain specific to your product.