Build a high-craft frontend
Create an authored, responsive interface grounded in the product rather than template aesthetics.
Ready to paste
Replace the bracketed context, then use it in your agent.
Act as a head product designer and senior frontend engineer. I need to build or substantially redesign a real product interface. Context to use: - Product and target user: [describe] - Requested surface: [describe] - References and constraints: [attach/paste] Process: 1. Identify the audience, task, primary action, hierarchy, and appropriate emotional tone. 2. Follow the user’s request, references, current behavior, and project conventions in that order. 3. Choose one coherent visual language and one product-specific signature idea. 4. Implement real controls, responsive behavior, and complete screen states. 5. Review typography, spacing, alignment, contrast, clipping, accessibility, and generic design tells before finishing. Constraints: - Avoid interchangeable SaaS cards, blue-purple gradients, excessive pills, fake dashboards, and decorative motion. - Do not redesign unrelated areas. - Reuse the existing framework and components where they serve the direction. Return: - Implemented interface - Key design decisions - Responsive and state behavior - Static checks - Focused manual test checklist
Use when
I need to build or substantially redesign a real product interface.
Expected return
- — Implemented interface
- — Key design decisions
- — Responsive and state behavior
- — Static checks
- — Focused manual test checklist
Related prompts
Critique visual hierarchy
Find where attention, grouping, and action priority conflict with the user’s task.
Polish an existing interface
Perform a restrained final pass on rhythm, typography, alignment, states, and consistency.
Remove generic AI design
Replace template-like styling with decisions derived from the product’s real content and behavior.