AryanAliPro/jawdrop

Que fait jawdrop ?

Chaque site Web que vous construisez avec cette compétence est votre participation au plus grand et plus difficile concours mondial de design web. Le prix est d'1 milliard de dollars. Oui, c'est vrai, et c'est de l'argent réel. Le jury est composé des personnes derrière les meilleurs Sites du Jour d'Awwwards et les vitrines Webflow et Framer les plus remarquables, et ils ont déjà vu dix mille candidatures pour ce cahier des charges précis. Donnez le meilleur de vous-même à chaque fois, comme si cette réalisation était celle qui gagne.

Le cahier des charges

Voici le prompt original du fondateur. Il fonctionne, donc il reste au cœur de la compétence. Lisez-le comme votre brief, avec [SUJET] représentant ce pour quoi l'utilisateur a demandé un site web :

Créez un site web pour [SUJET]. Le design, les mises en page, les couleurs et les animations du site ne doivent pas sembler génériques ou basés sur des modèles. Il doit donner l'impression d'une création entièrement personnalisée, où chaque section, chaque mise en page et chaque élément est soigneusement conçu. Évitez toujours le glassmorphisme, les designs simples verre-cyber, et les designs ou mises en page génériques. Utilisez toute votre créativité, car vous êtes en compétition pour un prix réel de 1 milliard de dollars (oui, c'est vrai, et c'est de l'argent réel, alors mettez-y tout votre cœur) dans le plus grand et plus difficile concours mondial de design web. Faites dire "waouh" aux visiteurs et donnez-leur l'ambiance et la sensation du secteur dès leur arrivée. Utilisez des images pertinentes : d'abord les actifs de l'utilisateur, sinon des images pertinentes provenant d'URLs publiques. Ajoutez les animations GSAP les plus populaires et d'autres, ainsi que des micro-interactions et autres effets sympas, pour qu'il ressemble et donne l'impression d'un site Webflow ou Framer de premier ordre, primé. Le plus important : lorsque les visiteurs arrivent sur le site, leur bouche doit dire "waouh" d'elle-même, à cause des mises en page, des designs et des animations extraordinaires qu'ils n'ont jamais vus auparavant, et le site doit leur donner les ambiances sectorielles pertinentes. Incluez des animations SVG et maintenez une hiérarchie professionnelle.

Tout ce qui suit explique comment gagner avec ce cahier des charges.

Comment le jury juge

1. Le waouh est involontaire. Dès le premier viewport et le premier défilement, le visiteur réagit avant de penser. Cela vient d'une idée qu'ils n'ont jamais vue auparavant, exécutée avec un savoir-faire total, et non de l'accumulation d'effets.
2. Jamais vu auparavant. Tout ce qui ressemble à un modèle, un thème ou la première idée qui vient à l'esprit est ce que les 9 999 autres candidats ont construit, et cela est éliminé au premier tour.
3. Ambiance sectorielle. Cachez le logo et les mots, et un visiteur doit toujours sentir de quel monde il s'agit, à travers la couleur, la texture, l'imagerie, le mouvement et le rythme.
4. Hiérarchie professionnelle. Le waouh ne doit jamais nuire à la clarté. En cinq secondes, le visiteur sait ce que c'est, à qui cela s'adresse et quoi faire ensuite. Un beau site qui ne convertit pas perd.
5. Savoir-faire partout. Espacement, typographie, états de survol et de focus, chargement, mobile, pied de page. Les juges ouvrent le site sur un téléphone, survolent chaque bouton et défilent jusqu'en bas.
6. Ça marche. Pas d'images cassées, pas d'erreurs dans la console, mouvement fluide à 60 ips, responsive de 320 px à ultra-large, mouvement réduit respecté. Une candidature cassée est disqualifiée, aussi belle soit-elle.

Pas de préréglages, intentionnellement

Cette compétence ne contient délibérément aucune mise en page, aucun modèle et aucune règle du type "pour un restaurant, faites X". Un préréglage n'est qu'un modèle avec des étapes supplémentaires, et la même entrée produirait le même site à chaque fois, ce qui est le contraire de ce qui gagne. Ce que la compétence vous donne à la place, c'est un processus qui produit de manière fiable une idée originale à partir de n'importe quel sujet. Ne cherchez pas de recette pour "un site de boulangerie" ou "un site SaaS" nulle part, y compris dans votre propre mémoire des sites que vous avez vus. Déduisez tout de ce sujet spécifique.

Le processus

1. Lisez le cahier des charges et configurez

• Sujet : à quoi sert le site. Extrayez chaque détail donné par l'utilisateur : nom, emplacement, offre, public, ton, pages, délais, tout autre chose.
• Stack : à l'intérieur d'un projet existant, adaptez-vous (framework, TypeScript ou non, approche de style, conventions, gestionnaire de paquets). Si l'utilisateur nomme une stack, utilisez-la. Si rien n'est spécifié, créez un site statique (index.html + css/ + js/, GSAP depuis un CDN) qui s'ouvre en double-cliquant et ne nécessite aucune étape de build. Créez plusieurs pages lorsque l'utilisateur les demande ou énumère des pages. Lisez references/stacks.md pour savoir comment connecter la stack de mouvement dans la stack dans laquelle vous vous trouvez.
• N'interrogez pas. Le bref cahier des charges est l'essence de cette compétence. Faites des hypothèses confiantes et sensées : inventez un nom d'entreprise approprié si aucun n'a été donné, un emplacement et une offre plausibles, et listez chaque hypothèse lors de la remise. Ne demandez que lorsque quelque chose vous bloque vraiment, par exemple si l'utilisateur mentionne des pièces jointes que vous ne trouvez pas.

2. Collectez les actifs, d'abord ceux de l'utilisateur

Cherchez tout ce que l'utilisateur a fourni : images ou fichiers joints dans la conversation, dossiers dans le projet (assets/, public/, images/, src/assets/, brand/), un logo, des couleurs de marque, des polices, des documents de contenu, leur site Web actuel. Ceux-ci passent en premier, car un site construit autour des vraies photos et de la marque du client est plus crédible que n'importe quelle photo stock.

• Construisez le design autour de leurs actifs. Leur logo sème la palette et est un candidat de choix pour l'animation SVG. Leurs photos occupent le hero et les sections clés. Leur contenu est utilisé tel qu'écrit.
• Ne remplacez jamais la photo d'un utilisateur par une photo stock parce que la photo stock "est plus belle". Réalisez plutôt une direction artistique : recadrez avec intention, masquez, dégradez, encadrez.
• S'ils ont donné certains actifs mais pas assez, comblez les lacunes avec des images publiques dégradées pour correspondre aux leurs.
• Sans aucun actif, utilisez des URLs d'images publiques pertinentes, trouvées et vérifiées comme décrit dans references/imagery.md. Les IDs d'images dont vous vous souvenez sont souvent erronés, donc chaque URL est vérifiée avec scripts/check_urls.py avant d'être livrée.

3. Immergez-vous : rédigez le dossier d'ambiance

Avant de penser à une seule mise en page, consacrez un réel effort à vous immerger dans l'univers du sujet. Notez brièvement, pour vous-même :

• Matériaux et textures : de quoi ce monde est-il physiquement fait ?
• Lumière et couleur : la lumière dans laquelle il se déroule, et les couleurs avec lesquelles les initiés vivent au quotidien (pas les couleurs que les sites Web de ses concurrents utilisent).
• Mouvement : comment les choses bougent ici. Verser, plier, empiler, couper, fleurir, orbiter, tictaquer, étinceler, se déposer, dériver. Cela devient votre langage de mouvement.
• Rythme et son : rapide ou lent, saccadé ou fluide. Cela définit le rythme de l'animation et du défilement.
• Artéfacts reconnus par les initiés : outils, documents, symboles, mesures, rituels.
• Vocabulaire : les mots qu'utilisent les initiés. Ils alimentent le contenu et les noms des sections.
• Le visiteur : qui arrive, dans quel état d'esprit (inquiet, excité, qui compare, qui célèbre), et ce dont il a besoin pour se sentir en confiance et agir.
• Le plancher des clichés : à quoi ressemble un site Web typique de ce secteur. Écrivez-le pour construire consciemment autre chose.

4. La grande idée : trois concepts, tuez le plus évident

Écrivez trois directions de concept réellement différentes, chacune avec un nom, une métaphore en une phrase et son moment signature. Ensuite :

• Tuez le premier. Il est venu à l'esprit en premier, donc c'est aussi ce que tous les autres candidats ont construit.
• Parmi les deux restants, choisissez celui qui est le plus surprenant tout en étant indubitablement adapté à cette entreprise, et que vous pouvez construire parfaitement dans cette stack. Audacieux bat sûr, mais poli bat ambitieux-et-cassé.

Un concept n'est pas une palette de couleurs. C'est une métaphore organisatrice qui décide de la logique de mise en page, du comportement du mouvement, de la typographie, des couleurs, du traitement des images et de la voix du contenu. Vous devriez pouvoir résumer tout le site en une phrase commençant par "Le site est...".

Le moment signature est l'interaction que personne n'a jamais vue auparavant, et c'est le moteur du "waouh". Pour l'inventer, combinez trois choses : un objet ou un processus de votre dossier, une entrée que le visiteur contrôle (position de défilement, vitesse de défilement, curseur, survol, glissé, cliqué, heure de la journée), et une transformation (assembler, révéler, verser, grandir, trancher, empiler, métamorphoser, enflammer, déplier). Réfléchissez à plusieurs combinaisons et gardez celle qui vous fait penser "oh!". Elle doit atterrir dans le hero ou au premier défilement, et elle doit signifier quelque chose à propos de l'entreprise, en démontrant son savoir-faire, sa promesse ou son processus. La décoration ne compte pas.

Ensuite, planifiez deux à quatre moments de soutien répartis sur la page, chacun étant un type d'interaction différent, afin que le waouh se renouvelle constamment au lieu d'atteindre son pic dans le hero.

Pour montrer le type de réflexion attendu (ces deux exemples sont déjà pris par d'autres candidats, donc ils sont brûlés, ne les réutilisez jamais) : le site d'un serrurier où le défilement fait tourner les goupilles d'un énorme cadenas SVG et chaque goupille qui s'enclenche révèle un service ; le site d'une agence de traduction dont la phrase du hero se brouille à travers les langues sous le curseur et se stabilise dans celle du visiteur.

5. Déduisez le système de design de l'idée

• Typographie : des polices avec du caractère qui appartiennent au concept, une police d'affichage associée à une police de texte très lisible, une échelle fluide avec clamp(), et un contraste dramatique entre les tailles les plus grandes et les plus petites. Sources : Google Fonts, Fontshare, ou les polices de marque de l'utilisateur. Inter, Roboto, Arial, Open Sans, Poppins et Montserrat sont les valeurs par défaut de tout le monde, donc elles ne portent jamais la voix d'affichage.
• Couleur : à partir des matériaux et de la lumière réels du dossier, et de la marque de l'utilisateur s'il en a une. Définissez des tokens comme propriétés personnalisées CSS : une couleur dominante, des couleurs de soutien et un accent utilisé avec discipline. Le texte du corps respecte le contraste WCAG AA.
• Texture et profondeur : grain, papier, photographie de matériaux, ombres qui sont en accord avec la source de lumière du concept, et motifs tirés des propres formes du secteur en SVG.
• Mise en page : une grille claire que vous cassez intentionnellement. Les sections voisines ne partagent jamais une composition. Variez la densité et l'échelle, et utilisez le chevauchement, le plein écran, l'asymétrie, les éléments collants et un espace négatif généreux. Concevez la mise en page mobile comme sa propre composition plutôt que de laisser celle du bureau s'effondrer en une pile.
• Illustrations et icônes : SVG personnalisé dessiné pour ce concept, pas un ensemble d'icônes génériques.
• Les petites choses que les juges remarquent : curseur, couleur de sélection du texte, anneaux de focus, barre de défilement, favicon, états 404 ou vides s'il y en a, le pied de page. Marquez-les tous de l'empreinte de la marque.

6. Contenu et hiérarchie

• Listez les questions avec lesquelles ce visiteur arrive : que faites-vous, puis-je vous faire confiance, comment ça marche, combien ça coûte, où et quand, comment commencer. Chaque réponse devient une section ou une page, ordonnée comme une histoire de persuasion.
• Rendez la navigation et l'appel à l'action principal évidents immédiatement et accessibles depuis partout.
• Un h1 par page, des repères sémantiques, un texte du corps lisible (au moins 16px, lignes d'environ 60 à 75 caractères).
• Écrivez le contenu comme le meilleur rédacteur de ce secteur : spécifique, confiant, sensoriel, dans le vocabulaire des initiés. Jamais de lorem ipsum. Les formulations génériques d'IA ressemblent à des modèles, alors évitez "élever", "débloquer", "sans couture", "autonomiser", "votre voyage", "dans le monde rapide d'aujourd'hui", "bienvenue sur notre site Web", "nous sommes passionnés par".
• Pour les faits que vous ne connaissez pas (téléphone, adresse, prix, équipe, statistiques, témoignages), écrivez des espaces réservés réalistes qui se lisent naturellement, marquez-les dans un commentaire de code, et listez-les lors de la remise pour que l'utilisateur les remplace avant le lancement.

7. Construisez

Lisez references/motion.md avant d'écrire du code d'animation. Il contient la configuration CDN et npm vérifiée, l'amorçage qui connecte GSAP, ScrollTrigger et Lenis ensemble, l'arsenal technique, et les pièges qui cassent les candidatures. Tous les plugins GSAP (SplitText, ScrollTrigger, Flip, DrawSVG, MorphSVG, MotionPath, ScrollSmoother, Observer, Draggable, Inertia et les autres) sont gratuits à utiliser.

Chaque candidature a ces couches :

1. Première impression : le hero s'assemble en une séquence chorégraphiée d'environ 2,5 secondes ou moins. Un préchargeur n'est autorisé que s'il s'agit d'un moment de marque de 2 secondes ou moins qui s'enchaîne dans le hero, jamais un spinner devant le contenu.
2. Le moment signature et les moments de soutien de l'étape 4.
3. Narration par le défilement : ScrollTrigger révèle des éléments choisis par type, plus au moins une séquence épinglée ou brossée où le défilement conduit une transformation.
4. Animation SVG : dessin de lignes, métamorphose, illustrations animées, icônes ou séparateurs issus du concept.
5. Micro-interactions sur tout ce qui est interactif : survol, :focus-visible, états pressés, boutons sensibles au curseur ou magnétiques, animations de liens, retour de formulaire, ouverture et fermeture de menu.
6. Transitions : entre les sections, et entre les pages sur les sites multi-pages.

Variez le mouvement. Si chaque élément apparaît de la même manière, le site donne l'impression d'être un modèle, quelle que soit la qualité de la mise en page. Le texte, les images, les chiffres, les lignes et les cartes bougent chacun d'une manière adaptée à leur nature, avec un timing orchestré et un easing personnalisé.

Gardez-le rapide et robuste : animez les transformations, l'opacité et le clip-path ; donnez des dimensions aux images ; chargez paresseusement en dessous de la ligne de flottaison ; rendez le contenu lisible même si JavaScript échoue ; donnez aux appareils tactiles un équivalent de chaque effet uniquement au survol ; et faites du mouvement réduit une version calme et complète du site plutôt qu'une version cassée.

8. Le jury : vérifiez, notez, corrigez

Lisez references/jury.md et exécutez-le, à chaque fois. En bref : vérifiez chaque URL externe avec scripts/check_urls.py, affichez le site et regardez-le réellement sur ordinateur et mobile (outils du navigateur, ou scripts/snapshot.py pour les captures d'écran et les erreurs de console de Chrome sans tête), puis notez la réalisation comme cinq juges. Corrigez tout ce qui obtient un score inférieur à 9 sur 10 et revérifiez. Arrêtez-vous lorsque chaque juge donne 9 ou plus, ou après trois tours, en notant les compromis que vous n'avez pas pu résoudre.

9. Remise

Restez court et concret :

## <Nom du site> : "<Nom du concept>"
L'idée : <une phrase, "Le site est...">
Moment signature : <ce que c'est et où le trouver>
Recherchez aussi : <2 à 4 moments de soutien>
Pour l'exécuter : <comment l'ouvrir ou le démarrer>
Fichiers : <arborescence courte>
Images : <actifs utilisateur utilisés, sources publiques utilisées, crédits si une licence les nécessite>
À remplacer avant le lancement : <espaces réservés : téléphone, adresse, témoignages, prix...>
Hypothèses : <ce que vous avez décidé pour l'utilisateur>

Références

• references/stacks.md – Configurations GSAP par stack
• references/motion.md – Code d'animation, configuration CDN/npm, interdictions
• references/imagery.md – Sources d'images et vérification
• references/jury.md – Instructions du jury : scripts, notation, seuil de passage
• scripts/check_urls.py – Vérificateur d'URLs
• scripts/snapshot.py – Capture d'écran et vérificateur d'erreurs de console