Agent Skills: Frontend Design Philosophy

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:

| Direction | Characteristics | |-----------|-----------------| | Brutalist | Raw, honest, utilitarian | | Maximalist | Bold, layered, expressive | | Minimalist | Restrained, precise, essential | | Retro-futuristic | Nostalgic tech, neon, gradients | | Luxury | Refined, spacious, premium | | Playful | Animated, colorful, delightful |

Avoid "AI Slop"

Generic AI-generated aesthetics are immediately recognizable. Avoid:

| Category | Avoid | |----------|-------| | Fonts | Inter, Roboto, Arial, system fonts as primary | | Colors | Purple gradients, blue-to-purple fades | | Layouts | Centered hero, three-column features | | Choices | Rounded corners everywhere, subtle shadows |

Anti-Patterns

| Category | Avoid | |----------|-------| | Typography | Single font for all, default system fonts | | Color | Gray-on-gray, uninspired palettes | | Layout | Symmetrical grids, centered everything | | Motion | Hover effects everywhere, bouncy animations |

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.