mukulmunda41-create/futuristic-web-design

Conception Web Futuriste

Une méthode de travail pour des sites marketing sur une seule page qui semblent dirigés, pas générés : un brief clair, un seul système de design, des sections construites et vérifiées individuellement, des visuels qui s'accordent comme un seul shooting, et un budget délibérément restreint de mouvement cinématographique.

Pourquoi les sites deviennent génériques

Chaque détail qu'une requête laisse ouvert est comblé par le choix le plus probable statistiquement. Une requête d'une seule ligne donne donc le site web moyen : titre centré, dégradé doux, une rangée de cartes arrondies identiques. Le vrai travail se fait avant le code. Définissez les questions ouvertes (public, l'action unique souhaitée, le ressenti, les polices, la palette), puis construisez par incréments suffisamment petits pour être inspectés à l'œil.

Gardez les rôles clairs. L'utilisateur possède ce qui est construit. Vous possédez comment. Et aucun travail n'est terminé tant que quelqu'un ne l'a pas regardé dans un navigateur à la largeur d'un téléphone.

Par où commencer

Situation	Allez vers
Nouveau site, dossier vide ou presque vide	Phase 1, puis directement enchaîner
Site existant, une section à ajouter ou à reconstruire	Lisez les règles du projet, puis la routine de section dans la Phase 5
« Rends-le cinématographique / 3D / piloté par le scroll »	Phase 7 et references/cinematic-moves.md
Images, vidéo héros, ou prompts pour celles-ci	references/assets.md
Le site a l'air générique ou fait par IA	Auditez-le contre les « Signes d'un site générique » dans references/design-system.md, puis Phase 3
Corrections mobiles, polissage, formulaire, déploiement, domaine, SEO	references/ship.md

Ouvrez un fichier de référence en atteignant sa phase, pas avant. Chacun se suffit à lui-même.

Les phases

1. Brief

Un seul paragraphe, rédigé avant tout code, couvrant trois points : le public, l'unique chose qu'un visiteur doit faire, et le ressenti souhaité (trois adjectifs et une comparaison, par exemple « calme, précis, généreux, comme un studio bien géré un matin de semaine »).

Lorsque l'utilisateur ne l'a pas fourni, demandez-le en un seul message. Lorsqu'il a dit de simplement continuer, rédigez vous-même le brief, énoncez-le comme une hypothèse en une ligne, et poursuivez. Les choix ultérieurs (le bouton dominant, les sections qui existent, quel mouvement justifie son poids) sont tous résolus en relisant ce paragraphe. C'est la raison pour laquelle il ne peut pas être sauté.

2. Plan

Écrivez la liste des sections de haut en bas. Chaque entrée donne le but de la section en une phrase et nomme l'actif sur lequel elle repose. Ne construisez pas encore. Avant que quoi que ce soit n'existe, changer de direction est gratuit, donc pour un travail s'étendant sur plusieurs fichiers, présentez le plan et attendez l'accord. Utilisez le mode plan lorsque l'agent en a un.

Un ordre de passage typique : navigation, héros, bande de confiance, l'offre, histoire ou processus, témoignages clients, tarification le cas échéant, questions fréquentes, appel à l'action de clôture, pied de page. Supprimez les sections dont vous ne pouvez pas énoncer le but. Pour une entreprise réelle, n'inventez jamais de clients, d'avis ou de statistiques ; omettez la section ou demandez le matériel authentique.

3. Système de design

Fixez l'apparence une seule fois pour tout le site et enregistrez-la. Présentez trois directions candidates sur une page d'aperçu de base, afin que le choix soit fait à l'œil. Chacune associe une police de titres avec une police de texte courant, attribue cinq couleurs hexadécimales à des rôles (page, encre, primaire, accent, atténué), et résume son ambiance en une phrase. Codez le gagnant dans les jetons de thème du projet, puis supprimez la page d'aperçu. Les pages d'exploration sont des échafaudages : si elles restent dans le projet, elles sont livrées avec le site.

references/design-system.md contient les détails, le vocabulaire et un modèle.

4. Règles du projet

Placez les règles permanentes dans le fichier de règles que l'agent actuel charge au démarrage (CLAUDE.md, AGENTS.md, GEMINI.md). Réutilisez un fichier existant ; sinon créez celui qui convient pour cet agent. Comme il se charge à chaque session, restez concis : ce qu'est le site, la stack, le système de design, quelques règles permanentes.

Valeurs par défaut raisonnables lorsque le projet n'a pas encore d'avis :

• Stack : Next.js et Tailwind CSS. Pour les widgets interactifs (accordéon, dialogue, menu, entrées), installez une bibliothèque de composants accessible comme shadcn/ui ; ne les créez pas à la main.
• Chaque composant dans son propre fichier sous components/.
• Téléphone d'abord. 390px est la largeur à laquelle rien ne doit casser.
• Contenu authentique uniquement. Pas de lorem ipsum, pas de « Fonctionnalité une ».
• Obtenez l'approbation avant d'ajouter un package, et expliquez son but.
• Réduction de mouvement signifie tout mouvement : défilement fluide, transitions de survol et d'icônes incluses, pas seulement les effets de spectacle.

Les règles permanentes appartiennent à ce fichier. La tâche actuelle non.

5. Construire section par section

Demander une page entière d'un coup renvoie une page de sections médiocres sans point de départ clair pour les réparations. Construisez une section, vérifiez-la, continuez. Une fois le motif établi, les sections de fermeture plus simples (citations, questions, appel à l'action de clôture, pied de page) peuvent être regroupées. Tout ce qui est visuellement important est construit seul.

La routine de section, pour chaque section ajoutée ou reconstruite :

1. Lisez d'abord les règles de design et les jetons.
2. Confirmez le contenu. Lorsque les faits sont importants (prix, affirmations, citations), demandez. Ailleurs, écrivez un contenu authentique et marquez les lignes que vous avez inventées.
3. Donnez à la section son propre fichier de composant.
4. Rendez-la à trois largeurs : téléphone (390px), tablette (768px), ordinateur portable (1440px). Réparez les débordements, les enveloppements laids et les mauvais recadrages.
5. Comparez les espacements au-dessus et en dessous avec ceux des sections adjacentes.
6. Terminez par un bref rapport : la section, son chemin de fichier, et tout ce qui a besoin des yeux de l'utilisateur.

Concentrez le plus d'efforts sur le héros, car il détermine si les visiteurs défilent. Spécifiez chaque détail important :

• Un titre d'environ huit mots maximum qui énonce ce qui est proposé, une seule phrase de soutien, et une navigation contenant la marque, une poignée de liens et un seul bouton.
• Un bouton principal clair : rempli, de couleur d'accent, lié à l'action du brief. L'action secondaire devient un lien texte discret. Des boutons jumeaux de poids égal signalent qu'aucune décision n'a été prise.
• Le contenu positionné à l'écart du sujet focal du visuel, décidé indépendamment pour le bureau et le téléphone.
• Pour le contenu sur vidéo ou photographie, résolvez la lisibilité localement avec un voile dégradé sous le texte. N'assombrissez pas tout le visuel.
• Jugez le premier écran à partir d'une capture d'écran en largeur téléphone et bureau. Une grande bande vide, un élément isolé qui ressemble à un clipart, ou un visuel trop sombre pour être discernable signifie que le héros n'est pas terminé, même si l'actif réel est encore un espace réservé : le substitut doit porter la composition jusqu'à ce moment-là.

Chaque bouton mène quelque part. Chaque appel à l'action a besoin d'une destination réelle : un lien vers une boutique ou un checkout, une page de réservation, un formulaire, une adresse email. Lorsque la destination est inconnue, utilisez la cible honnête la plus proche (la section produit, un lien mailto) et listez chaque bouton non câblé dans votre rapport. Un bouton qui défile silencieusement vers la même page a l'air terminé et ne l'est pas.

Une fois la page assemblée, parcourez-la d'un bout à l'autre, identifiez la section la plus faible (il y en a toujours une), et proposez deux alternatives pour celle-ci sur des routes d'aperçu. Une fois l'une choisie, supprimez les autres variantes et leurs routes.

6. Visuels

Une mise en page solide ne peut pas sauver des images faibles. Commencez par une courte liste de plans d'environ sept actifs, et maintenez une seule ligne de style (lumière, objectif, palette) constante entre eux. Les formules de prompts, les conseils pour la vidéo héros et la préparation web se trouvent dans references/assets.md.

Sans générateur d'image ou de vidéo connecté, donnez les prompts à l'utilisateur et continuez avec des espaces réservés clairement marqués. Ne dépensez jamais de crédits de génération sans approbation.

7. Mouvements cinématiques

Cinq techniques sont au menu : une vidéo d'arrière-plan lente dans le héros, un mouvement lié à la position de défilement, une section qui s'épingle pendant que son contenu change, une profondeur de parallaxe, et un objet 3D rendu en direct. Utilisez-les avec parcimonie : la vidéo héros et pas plus de deux des autres, chacun positionné là où il clarifie quelque chose ou crée un sentiment spécifique. Utiliser toutes les techniques à la fois ressemble à une démo, épuise le visiteur et dilue chaque effet.

Chaque technique a besoin de solutions de repli élégantes : une mise en page ordinaire en mouvement réduit, une image statique sur les petits téléphones, et une page qui survit à l'échec de l'effet. Ensuite, mesurez le coût. Les recettes et les garde-fous sont dans references/cinematic-moves.md ; lisez-le avant d'écrire du code de défilement ou 3D.

8. Téléphone, polissage, formulaire, lancement

Les téléphones représentent la plupart des visites. Effectuez une passe dédiée à 390px, une passe de cohérence et une vérification de vitesse ; puis connectez le formulaire, déployez et parcourez la liste de contrôle de lancement. Voir references/ship.md.

Habitudes de travail

Celles-ci s'appliquent tout au long.

• Un changement par tour. On vous demande une correction, modifiez cela et uniquement cela. Un diff plus large que la demande cache quelle modification a aidé, et « nettoyer » quelque chose dont l'utilisateur était satisfait est une régression.
• Regardez avant de faire un rapport. Chargez la page et inspectez-la à plusieurs largeurs avant de la déclarer terminée. Les mises en page peuvent satisfaire toutes les règles et avoir toujours l'air bancales.
• Transformez les retours vagues en un problème nommé. « C'est lourd » est exploitable : déterminez si l'espacement, le poids ou le contraste est responsable, dites-le, et ajustez cela uniquement. Si l'utilisateur ne peut pas articuler une préférence, placez deux ou trois variantes sur des routes d'aperçu avec une description d'une ligne chacune. Les gens choisissent plus facilement qu'ils ne spécifient.
• Tracez les surprises jusqu'à ce qui n'était pas spécifié. Lorsque le résultat n'est pas ce à quoi l'utilisateur s'attendait, trouvez la question ouverte derrière et réglez-la dans le fichier de règles, afin qu'elle ne soit pas corrigée manuellement à nouveau.
• Corrigez les erreurs à la racine et énoncez la cause en une ligne.
• Sauvegardez les états de travail. Dans un projet git où l'utilisateur veut des commits, commitez après chaque étape de travail avec un message qui aura du sens des semaines plus tard.
• Protégez les clés et les données. Les secrets vont dans .env.local et restent hors des fichiers source et de l'historique git. Lorsqu'un formulaire refuse de sauvegarder, réparez la règle d'accès. Ne désactivez jamais la sécurité pour le faire fonctionner.
• Rapportez honnêtement. Dites ce qui a été vérifié, ce qui n'a pas pu l'être (un iPhone physique, le domaine de production), et quelle copie est inventée. Une confirmation à l'écran ne prouve rien ; la ligne stockée dans la base de données le fait.
• Vérifiez les versions. Pour GSAP, Three.js, React Three Fiber, Motion et Lenis, consultez la documentation actuelle sur les versions compatibles au lieu de vous fier à la mémoire, et signalez toute incertitude.

Fichiers de référence

Fichier	Lisez-le quand
references/design-system.md	Choisir des polices, des couleurs et de l'espacement ; convertir des mots de style vagues en mots concrets ; auditer une page d'apparence générique
references/assets.md	Écrire des prompts d'image ou de vidéo, garder les visuels cohérents, compresser les médias pour le web
references/cinematic-moves.md	Ajouter un héros vidéo, une histoire au scroll épinglée, un parallaxe, un accent 3D, une vidéo pilotée par le scroll, ou une histoire complète en direct 3D au scroll
references/ship.md	Placer les médias, la passe téléphone, le polissage, la vitesse, le formulaire de contact, le déploiement, le domaine, le SEO et la liste de contrôle de lancement