Conception frontale

Source: Contenu adapté de anthropics/skills (MIT).

Cette compétence guide la création d'interfaces frontales distinctives de qualité production qui évitent l'esthétique générique du « AI slop ». Mettez en œuvre un véritable code fonctionnel avec une attention exceptionnelle aux détails esthétiques et aux choix créatifs.

L'utilisateur fournit les exigences du frontend: un composant, une page, une application ou une interface à créer. Ils peuvent inclure un contexte sur l’objectif, le public ou les contraintes techniques.

Pensée conceptuelle

Avant de coder, comprenez le contexte et engagez-vous dans une direction esthétique AUDACIEUX:

• Objectif: Quel problème cette interface résout-elle? Qui l'utilise?
• Ton: Choisissez un extrême: brutalement minimal, chaos maximaliste, rétro-futuriste, organique/naturel, luxe/raffiné, ludique/semblable à un jouet, éditorial/magazine, brutaliste/brut, art déco/géométrique, doux/pastel, industriel/utilitaire, etc. Il y a tellement de saveurs parmi lesquelles choisir. Utilisez-les comme source d’inspiration, mais concevez-en une qui soit fidèle à l’orientation esthétique.
• Contraintes: Exigences techniques (framework, performances, accessibilité).
• Différenciation: Qu'est-ce qui rend cela INOUBLIABLE? Quelle est la seule chose dont quelqu’un se souviendra?

CRITIQUE: Choisissez une direction conceptuelle claire et exécutez-la avec précision. Un maximalisme audacieux et un minimalisme raffiné fonctionnent tous deux: la clé est l’intentionnalité et non l’intensité.

Implémentez ensuite le code de travail (HTML/CSS/JS, React, Vue, etc.) c'est-à-dire:

• De qualité production et fonctionnel
• Visuellement frappant et mémorable
• Cohésif avec un point de vue esthétique clair
• Méticuleusement raffiné dans les moindres détails

Directives esthétiques frontales

Concentrez-vous sur:

• Typographie: choisissez des polices belles, uniques et intéressantes. Évitez les polices génériques comme Arial et Inter; optez plutôt pour des choix distinctifs qui rehaussent l’esthétique du frontend; des choix de polices inattendus et pleins de caractère. Associez une police d’affichage distinctive à une police de corps raffinée.
• Couleur et thème: engagez-vous à adopter une esthétique cohérente. Utilisez des variables CSS pour plus de cohérence. Les couleurs dominantes aux accents nets surpassent les palettes timides et uniformément réparties.
• Mouvement: utilisez des animations pour les effets et les micro-interactions. Donnez la priorité aux solutions CSS uniquement pour HTML. Utilisez la bibliothèque Motion pour React lorsqu'elle est disponible. Concentrez-vous sur les moments à fort impact: un chargement de page bien orchestré avec des révélations échelonnées (animation-délai) crée plus de plaisir que des micro-interactions dispersées. Utilisez le déclenchement du défilement et le survol des états qui surprennent.
• Composition spatiale: dispositions inattendues. Asymétrie. Chevaucher. Flux diagonal. Éléments qui brisent la grille. Espace négatif généreux OU densité contrôlée.
• Arrière-plans et détails visuels: créez une atmosphère et de la profondeur plutôt que d'utiliser par défaut des couleurs unies. Ajoutez des effets contextuels et des textures qui correspondent à l’esthétique globale. Appliquez des formes créatives telles que des maillages dégradés, des textures sonores, des motifs géométriques, des transparences superposées, des ombres spectaculaires, des bordures décoratives, des curseurs personnalisés et des superpositions de grains.

N'utilisez JAMAIS d'esthétiques génériques générées par l'IA, telles que des familles de polices surutilisées (Inter, Roboto, Arial, polices système), des schémas de couleurs clichés (en particulier des dégradés violets sur fond blanc), des mises en page et des modèles de composants prévisibles, ainsi qu'une conception à l'emporte-pièce qui manque de caractère spécifique au contexte.

Interprétez de manière créative et faites des choix inattendus qui semblent véritablement adaptés au contexte. Aucun design ne devrait être identique. Variez entre des thèmes clairs et sombres, différentes polices, différentes esthétiques. NE JAMAIS converger vers des choix communs (Space Grotesk, par exemple) à travers les générations.

IMPORTANT: Faites correspondre la complexité de la mise en œuvre à la vision esthétique. Les conceptions maximalistes nécessitent un code élaboré avec des animations et des effets étendus. Les designs minimalistes ou raffinés nécessitent de la retenue, de la précision et une attention particulière à l’espacement, à la typographie et aux détails subtils. L'élégance vient de la bonne exécution de la vision.

N'oubliez pas: Claude est capable d'un travail créatif extraordinaire. Ne vous retenez pas, montrez ce qui peut vraiment être créé en sortant des sentiers battus et en vous engageant pleinement dans une vision distinctive.

Fichiers de ressources

LICENCE.txt

Télécharger LICENSE.txt

Ressource binaire

Voir dans GitHub

Voir dans GitHub