F
frontend-design-philosophy
About frontend-design-philosophy
A set of design principles for people creating frontend interfaces, focused on establishing a distinct visual direction rather than relying on generic patterns. It includes guidance on design choices, anti-patterns, and a validation checklist.
Key features
- 01Clarify interface purpose and audience
- 02Choose a distinct aesthetic direction
- 03Identify and avoid generic patterns
- 04Review design with a validation checklist
Use cases
- 01Plan the visual direction of a new interface
- 02Review AI-generated interfaces
- 03Check responsive and accessible design
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/frontend-design-philosophyin Claude Code to confirm it loaded.
Details
From the project READMEFrontend 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.
Comments
Markdown supported