frontend-design-philosophy
Design thinking principles for distinctive interfaces. Covers aesthetic direction, anti-patterns, and avoiding generic AI-generated aesthetics.
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill instructions
Frontend Design Philosophy
Core principles for creating distinctive, non-generic interfaces.
Design Thinking First
Before writing code, consider:
- Purpose: What is this interface trying to achieve?
- Audience: Who will use it and what are their expectations?
- Tone: What feeling should it evoke?
- 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
Remember: Every default is a choice. If you're using defaults, you're making generic work.
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-01-20
- Index updated
- 2026-02-04
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!