Frontend Design

Create production-grade frontend interfaces that prioritize distinctive aesthetics over generic AI design patterns.

Core Approach

Before writing any code, understand the context:

1. Identify the purpose and target audience
2. Select a bold aesthetic tone
3. Note any constraints or requirements
4. Determine what makes the interface memorable

Design Philosophy

Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Visual Standards

Typography

• Use distinctive typography
• Avoid overused fonts (Inter, Poppins for everything)
• Consider font pairing that creates visual hierarchy

Color Systems

• Build cohesive color systems with dominant colors and sharp accents
• Create intentional contrast and visual rhythm
• Avoid clichéd color schemes

Animation

• Focus on high-impact moments
• Make animations purposeful, not decorative
• Consider performance implications

Spatial Composition

• Use unconventional layouts when appropriate
• Embrace asymmetry and depth
• Create visual interest through spacing

Visual Effects

• Apply effects that match the aesthetic
• Avoid gratuitous shadows, gradients, or glows
• Each effect should serve a purpose

What to Avoid

Never converge on common choices:

• Predictable layouts (hero, 3-column features, testimonials)
• Cookie-cutter designs lacking character
• Generic AI aesthetics
• Overused patterns without creative interpretation

Complexity Matching

Match implementation scope to the vision:

• Maximalist designs: warrant elaborate code and extensive effects
• Refined approaches: require restraint and precision in spacing and typography

Implementation Guidelines

1. Start with a clear conceptual direction
2. Build a consistent design system
3. Use Tailwind CSS effectively for rapid iteration
4. Consider responsive design from the start
5. Test visual hierarchy at different viewport sizes
6. Ensure accessibility is not sacrificed for aesthetics

Tech Stack Preferences

When building components:

• Use React/Next.js patterns appropriate for the project
• Leverage Tailwind CSS for styling
• Consider shadcn/ui components as a foundation, then customize
• Add Framer Motion for meaningful animations
• Use Lucide icons or custom SVGs

The overarching principle: creative interpretation tailored to context, not standardized templates.