Image Reference to UI Implementation v2
Goal
Translate visual references into buildable UI direction while adapting them to the project brand, content, and technical constraints.
When to use
Use when the user provides screenshots, images, design inspiration, website references, mockups, or asks for a UI similar in feel to another design.
Workflow
- Analyze the reference by layout, density, type scale, color, spacing, imagery, motion, and interaction patterns.
- Extract principles instead of copying blindly: hierarchy, rhythm, motif, card shape, texture, navigation style, and content density.
- Map the reference to the project stack, existing components, and brand needs.
- Call out what should be adapted, simplified, or avoided for performance, accessibility, or originality.
- Implement a first pass using real project content and reusable components when possible.
- Compare the result against the reference qualities, not exact pixels unless the user requests pixel matching.
Quality bar
- Run available frontend validation commands.
- Inspect responsive states where reference-driven layouts may break.
- Check that images, text, and interactive elements remain accessible.
Validation
- The UI captures the reference mood without becoming a clone.
- Implementation respects the repo style system and responsive behavior.
- Visual choices are explained as design decisions, not guesses.
Final response
- Summarize extracted reference qualities, implementation choices, and remaining polish opportunities.
1---2name: image-reference-to-ui-implementation-v23description: Use this when turning screenshots, moodboards, uploaded references, competitor pages, design images, or visual inspiration into implementable React or Next.js UI.4---56# Image Reference to UI Implementation v278## Goal910Translate visual references into buildable UI direction while adapting them to the project brand, content, and technical constraints.1112## When to use1314Use when the user provides screenshots, images, design inspiration, website references, mockups, or asks for a UI similar in feel to another design.1516## Workflow17181. Analyze the reference by layout, density, type scale, color, spacing, imagery, motion, and interaction patterns.192. Extract principles instead of copying blindly: hierarchy, rhythm, motif, card shape, texture, navigation style, and content density.203. Map the reference to the project stack, existing components, and brand needs.214. Call out what should be adapted, simplified, or avoided for performance, accessibility, or originality.225. Implement a first pass using real project content and reusable components when possible.236. Compare the result against the reference qualities, not exact pixels unless the user requests pixel matching.2425## Quality bar2627- Run available frontend validation commands.28- Inspect responsive states where reference-driven layouts may break.29- Check that images, text, and interactive elements remain accessible.3031## Validation3233- The UI captures the reference mood without becoming a clone.34- Implementation respects the repo style system and responsive behavior.35- Visual choices are explained as design decisions, not guesses.3637## Final response3839- Summarize extracted reference qualities, implementation choices, and remaining polish opportunities.
YankielDBC2