By name: frontend-design description: Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications.
Frontend Design
Build intentional, production-grade frontend UI that avoids generic defaults.
Design Direction
Before coding, decide:
- Purpose and audience
- A clear visual tone
- The one memorable visual idea
Quality Bar
- Real working code, not mock-only snippets
- Strong visual cohesion
- Responsive behavior on desktop and mobile
- Accessibility basics (semantic markup, contrast, focus states)
Aesthetic Guidance
- Typography:
- Prefer expressive display/body pairings.
- Avoid default stacks like Inter, Roboto, Arial, system.
- Color and look:
- Set CSS variables for palette and spacing.
- Avoid generic purple-on-white gradients.
- Motion:
- Use a few meaningful animations (entrance/stagger/interaction states).
- Background and depth:
- Use layered gradients, subtle texture, or shape systems instead of flat single-color fills.
- Layout:
- Favor intentional composition over boilerplate templates.
Constraints
- Match complexity to the requested style.
- If working inside an existing design system, preserve established patterns.