Mode d’emploi
- Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
- Consultez le document original pour les outils, identifiants et environnements requis.
- Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill frontend-design-philosophyAvant de commencer
- L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
- Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original
Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
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.
