---

name: frontend-design-philosophy description: Design thinking principles for distinctive interfaces. Covers aesthetic direction, anti-patterns, and avoiding generic AI-generated aesthetics. allowed-tools: []

Frontend Design Philosophy

Core principles for creating distinctive, non-generic interfaces.

Design Thinking First

Before writing code, consider:

1. Purpose: What is this interface trying to achieve?
2. Audience: Who will use it and what are their expectations?
3. Tone: What feeling should it evoke?
4. Differentiation: What makes this distinctive?

Pick an Extreme

Rather than defaulting to safe, generic designs, commit to a clear aesthetic direction:

Avoid "AI Slop"

Generic AI-generated aesthetics are immediately recognizable. Avoid:

Anti-Patterns

Validation Checklist

• Typography is distinctive (not default fonts)
• Color palette is intentional and limited
• Layout breaks from predictable patterns
• Motion serves purpose and feels polished
• Design direction is clear and consistent
• Responsive behavior maintains quality
• Accessibility not sacrificed for aesthetics

Resources

• Fontshare - Free quality fonts
• Coolors - Color palette generator

---

Remember: Every default is a choice. If you're using defaults, you're making generic work.