How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill frontend-design-philosophyBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
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.
