Cool Website (Site Web Personnalisé)

Cool Website

Valeurs par défaut

• La langue du site est l'anglais, sauf si l'utilisateur demande explicitement une autre langue. Cela inclut la navigation, les titres, le corps du texte, les boutons, les formulaires, la validation et les messages de succès, le texte alternatif, les étiquettes d'accessibilité, les métadonnées et les téléchargements générés. Définissez <html lang="en"> (ou la balise régionale correspondante comme en-GB lorsque le marché cible l'exige). Préservez les noms propres.
• Générez et modifiez les images raster avec l'outil image_gen intégré de Codex par défaut. Suivez la compétence imagegen disponible et le schéma d'outil actuel. Aucune clé API d'image externe n'est requise. Utilisez les ressources fournies lorsque c'est approprié.
• Pour les vidéos générées, l'API officielle Higgsfield est la valeur par défaut et kie.ai est la deuxième option. Respectez le choix de l'utilisateur ; sinon, utilisez COOL_WEBSITE_VIDEO_PROVIDER (par défaut higgsfield). Higgsfield utilise le workflow REST dans references/higgsfield-api.md ; KIE utilise scripts/kie.mjs shot. Si l'utilisateur n'a pas encore de compte Higgsfield, dirigez-le vers https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus pour s'inscrire. Configurez uniquement le fournisseur sélectionné en utilisant .env.example. Ne changez jamais de fournisseur silencieusement et n'utilisez jamais l'un comme solution de secours pour la génération d'images.
• Tout le contrôle du navigateur et la vérification visuelle utilisent le navigateur intégré via mcp__cua_repl.
• Proposez un référencement optionnel basé sur DataForSEO immédiatement après le premier tour d'entretien, avant de fixer la structure de la page, de rédiger le texte ou de générer des ressources. Suivez references/seo-dataforseo.md lorsque c'est choisi. Gardez le HTML sémantique de base et les métadonnées même lorsque la recherche est refusée.
• Cool Website est le nom de la compétence, pas la marque du client. N'ajoutez pas de branding de la compétence, de crédits de créateur, de noms de marque d'exemple ou de revendications d'approbation à un site. Conservez le fichier LICENSE fourni avec les copies du moteur/logiciel.

Le défilement est la seule entrée que chaque visiteur sait déjà utiliser. Cette compétence le traite comme une chronologie : la molette est un curseur, la page est un film avec du vrai texte par-dessus, et chaque section se comporte suffisamment différemment pour que le visiteur continue à faire défiler pour découvrir ce que la suivante fait.

Ce que vous produisez : un briefing d'entretien, une grammaire de page, une cartographie du parcours client, une courbe d'émotion avec un pic conçu, un score de défilement, un mouvement signature, des ressources générées, une ou plusieurs pages HTML réelles sur un plan de conception piloté par les jetons, et une série de captures d'écran prouvant qu'elle tient à chaque position de défilement.

Ce que ce n'est pas

Ce n'est pas « générer un vol virtuel et déposer du texte dessus. » Cette approche produit un seul dispositif appliqué à une page entière, et chaque site construit de cette façon est reconnaissable au premier coup d'œil : même diorama en pâte à modeler, même texte centré, même compteur 01 / 06, même incitation « défiler pour explorer ». Cinq sections qui se comportent de manière identique sont une section montrée cinq fois.

Quatre règles en découlent, et elles sont l'épine dorsale de cette compétence :

1. La variété est le produit. Une page utilise au moins quatre familles de dispositifs et jamais le même dispositif deux fois de suite. Lisez references/devices.md.
2. Le monde est photographique, sauf si la marque est réellement illustrée. Le diorama en argile low-poly mat doux est interdit par défaut. Lisez references/worlds.md.
3. Pas de chaîne continue. Un seul vol de caméra ininterrompu est la chose la plus coûteuse et la plus fragile que vous puissiez construire, et il n'existe que pour cacher les coupures entre les scènes. Variez plutôt le dispositif et la coupure disparaît gratuitement, car le visiteur ne regarde pas un seul film. Enchaînez uniquement lorsque le brief est littéralement « un seul voyage continu. »
4. Un monde différent n'est pas une page différente. La boîte à outils du dispositif varie l'apparence d'une page. La structure est un axe séparé, et elle doit être décidée délibérément, sinon chaque construction hérite du même squelette. Les quatre premières constructions ont fait exactement cela. Lisez references/uniqueness.md.

Composition du héros

La superposition dimensionnelle est une exigence de base pour un héros marketing premium. Planifiez des plans de fond, de sujet, de premier plan et atmosphériques se déplaçant indépendamment avant de demander des ressources. Un seul beau fond avec des fondus de texte ne satisfait pas cette préférence. La profondeur doit provenir d'une séparation visible, d'une occlusion et de différences contrôlées dans le mouvement, tandis que le titre reste lisible et la scène raconte une histoire claire.

Lisez references/hero-depth.md avant de planifier le héros ou de générer ses ressources. Il couvre les plans nets, les découpes alpha authentiques, les points d'ancrage de contact partagés, la typographie entre les plans, la chorégraphie de défilement retenue, la direction artistique mobile et l'acceptation visuelle. Utilisez la composition qui correspond à la grammaire choisie ; ne répétez pas une scène d'exemple et n'imposez pas d'ancrage sur une grammaire qui l'interdit. Respectez les directions statiques ou plus simples explicites, et gardez la profondeur dans la composition statique lorsque le mouvement est réduit.

Norme de conception et de livraison

Lisez references/design-standard.md avant de planifier un site marketing. Il couvre la recherche de marque, les couches visuelles indépendantes, les interactions utiles, la composition mobile et les vérifications finales dans le navigateur. Ces principes guident une page personnalisée ; ils ne sont pas un modèle de page fixe.

Étape 0 : Le brief et l'autorité créative

Établissez le brief avant de générer quoi que ce soit. Réutilisez les réponses et les ressources déjà fournies. Lorsque l'utilisateur délègue explicitement la direction créative (par exemple, « utilisez votre jugement » ou « je veux vous laisser faire »), rédigez un brief Rédigé sous délégation créative explicite et procédez. Couvrez les huit sujets ci-dessous, distinguez les preuves des hypothèses, et n'inventez pas de citations d'utilisateur et ne forcez pas un autre point de contrôle d'entretien/approbation.

Sinon, interviewez pour les décisions manquantes. Posez des questions réelles, enregistrez les réponses et évitez de déduire une marque entière de son nom.

Incluez l'offre, le public, l'action principale du visiteur et le site Web/domaine existant dans le premier tour lorsque cela est inconnu. Traitez les huit sujets de conception ci-dessous comme une liste de couverture ; regroupez les sujets connexes et posez au maximum trois questions courtes par tour. Après les premières réponses, proposez l'Étape 0a avant de demander plus de détails de conception. Réutilisez les faits à travers les entretiens de conception et de référencement.

La compétence est un instrument de gamme, pas un style maison. L'humain apporte l'intention et les ressources qu'il possède ; l'entretien est l'endroit où cela se transforme en le bon type de page : un monde ininterrompu, des scènes distinctes, des chapitres imprimés, une surface vivante. La compétence peut faire chacun d'eux. L'entretien décide lequel.

Couvrez ces huit sujets sans forcer les huit questions en une seule passe :

1. Ambiance en trois à cinq mots, plus jusqu'à trois références de n'importe quel média. Un film, une pochette d'album, un magasin, un magazine, un jeu. Pas des « sites que vous aimez » : nommer des sites est ainsi qu'une page finit par ressembler à un site existant.
2. Le parcours de défilement, section par section, dans leurs mots. Ce que le visiteur devrait voir en premier, ce qui vient ensuite, quelle est la dernière chose. Leur séquence, pas un menu que vous avez proposé.
3. La courbe d'énergie. Où cela devrait être calme, où cela devrait être intense. Une page qui est forte tout le long est aussi plate qu'une qui est calme tout le long.
4. Comment quelqu'un devrait-il se sentir en défilant, étape par étape, et quel est le SEUL moment dont il devrait se souvenir ? L'énergie est le volume. C'est l'émotion, et les deux ne coïncident pas : sur une page forte, l'acte calme peut être le plus intense. La réponse étape par étape devient la courbe d'émotion, le seul moment devient le pic. Les deux sont requis dans BRIEF.md. Voir references/feel.md.
5. Une chose que ce site devrait faire qu'aucun site qu'ils ont vu ne fait. C'est la graine du mouvement signature. Poussez pour une vraie réponse ; « être mémorable » n'en est pas une.
6. À quel point ils veulent s'éloigner du premium-minimal. Offrez la gamme dans uniqueness.md §5 : brutaliste, maximaliste, ludique, rétro, dense, éditorial, premium-minimal. Leur réponse régit la famille esthétique, pas votre goût.
7. Un monde ininterrompu, ou des scènes distinctes ? La page entière devrait-elle ressembler à un seul lieu continu à travers lequel le défilement vole (worldflight, voir references/worldflight.md), ou à des scènes, chapitres ou coupures séparés ? C'est la plus grande bifurcation structurelle unique, et c'est leur appel, pas un dispositif que vous choisissez plus tard. Proposez les deux clairement ; aucun n'est la valeur par défaut.
8. Quelles ressources ont-ils déjà ? Séquences, photos, photos de produits, un kit de marque, des clips d'eux-mêmes. Les ressources réelles ancrent le monde et réduisent le coût de génération ; la réponse décide ce qui est noté et encodé par rapport à ce qui est généré. « Rien » est une réponse parfaite et signifie un monde entièrement généré.

Écrivez les réponses dans <workspace>/builds/<name>/BRIEF.md avant toute planification d'acte, dans leurs mots, pas paraphrasées en prose marketing. Tout ce qui suit en aval lit ce fichier.

BRIEF.md doit contenir, au minimum :

• Les huit sujets, avec les réponses textuelles de l'utilisateur là où elles sont fournies et les décisions clairement étiquetées comme rédigées là où la délégation a eu lieu.
• La courbe d'émotion. Une ligne par acte : l'émotion, puis ce qui à l'écran la provoque. Écrite avant que les actes n'existent, ajoutée au fur et à mesure que le score se remplit.
• Le pic. Le seul moment, écrit comme la phrase qu'un visiteur dirait à un ami, plus dans quel acte il se trouve.
• La phrase « dire-à-quelqu'un » complétée. « C'est le site où ___ », rempli avec une expérience, pas un nom de dispositif.
• Tout silence rédigé, de sorte que la passe de vérification puisse le distinguer d'un défilement mort.

references/feel.md est le cahier des charges pour les quatre.

Si l'humain est vraiment injoignable et que l'exécution est entièrement autonome, rédigez BRIEF.md vous-même : répondez aux huit questions dans la voix de la marque, marquez le fichier Rédigé seul, non interviewé en haut, et dites-le dans le rapport final. Un brief rédigé seul sans délégation est un plan de secours. La délégation explicite ci-dessus est un workflow normal pris en charge et n'exige pas que l'humain soit injoignable.

Étape 0a : Choix SEO précoce

Après les premières réponses de l'entretien, demandez (dans la langue de l'utilisateur) : « Dois-je aussi optimiser le site Web pour Google ? Avec DataForSEO, je peux vérifier les termes de recherche pertinents et les concurrents et intégrer les résultats directement dans la structure et le texte de la page. » Proposez : « Oui, avec DataForSEO », « Techniques de base seulement », « Plus tard ». Sautez cette question si l'utilisateur a déjà choisi le référencement. La délégation créative seule n'autorise pas l'installation d'un service externe ou la dépense de crédit API.

Pour oui, suivez seo-dataforseo.md : terminez l'entrée ciblée, connectez ou proposez d'installer le MCP, établissez le budget de recherche, recherchez le marché choisi, puis utilisez les résultats tout au long de la construction. Lisez dataforseo-setup.md uniquement pour les conseils de configuration/auth et de crédit. Une URL de serveur seule suffit pour identifier la connexion distante ; l'autorisation du compte doit toujours être finalisée.

Enregistrez SEO: enabled | basics-only | deferred | blocked dans BRIEF.md, plus le marché cible et le budget si activé. Pour basics-only ou deferred, continuez sans installation MCP ni recherche payante. Si la connexion est bloquée, continuez le travail de conception et technique indépendant ; marquez les décisions de mots-clés comme provisoires. Ne présentez pas une recherche DataForSEO en attente comme terminée.

Bootstrap

Environnement, pas une étape du travail. Faites-le une fois que l'entretien est répondu et avant l'Étape 1.

Exécutez le prévol plutôt que de vérifier à la main. Il connaît les modes de défaillance qui autrement apparaissent plus tard comme des erreurs trompeuses, principalement un ffmpeg dépouillé qui signale un filtre manquant comme une erreur de syntaxe dans votre commande :

node <skill>/scripts/doctor.mjs

Il signale Node, une build ffmpeg complète, la clé API optionnelle et l'espace de travail résolu. Ajoutez --video uniquement lorsque la génération vidéo est prévue. Les échecs requis sortent avec un code non nul. Le contrôle du navigateur et la vérification utilisent le navigateur intégré de Codex via mcp__cua_repl ; aucun package d'automatisation de navigateur séparé ou exécutable de navigateur local n'est requis par cette compétence.

L'espace de travail

Les builds et le registre d'empreintes digitales se trouvent dans un seul répertoire, et il est résolu, jamais supposé :

node <skill>/scripts/workspace.mjs --ensure     # l'affiche, le crée, amorce le registre

Ordre de résolution, premier trouvé gagne :

1. COOL_WEBSITE_HOME
2. le .cool-website.json le plus proche en remontant depuis le cwd, { "workspace": "..." }
3. <project root>/cool-website, où la racine du projet est l'ancêtre le plus proche contenant un .git

Ainsi, un dossier de build est <workspace>/builds/<name>/ et le registre est <workspace>/FINGERPRINTS.md. Le registre commence vide : la porte existe pour vous empêcher de vous répéter, donc votre première build n'a rien à effacer.

Si vous stockez déjà des builds ailleurs, déposez un .cool-website.json à votre racine de projet pointant vers celui-ci et rien ne bouge.

Le reste

1. Les images utilisent le modèle d'image intégré ; aucune clé externe n'est nécessaire. Pour les vidéos générées, copiez .env.example à la racine du projet Web en tant que .env, remplissez uniquement le fournisseur choisi et exécutez doctor.mjs --video. --provider higgsfield|kie remplace le fournisseur configuré pour cette vérification. Higgsfield (par défaut) utilise HF_API_KEY_ID plus HF_API_KEY_SECRET et sa Console pour le solde/prix ; les nouveaux comptes s'inscrivent à https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus. KIE utilise KIE_AI_API_KEY et scripts/kie.mjs probe. Suivez references/assets.md. Enregistrez le fournisseur, le modèle et le budget autorisé dans BRIEF.md. Les séquences fournies n'ont pas besoin d'appel API.
2. Un kit de marque s'il en existe un (couleurs, logo, police, photos de produits existantes). Si la marque a un dossier dans ce dépôt, lisez-le avant de générer quoi que ce soit et obéissez à ses règles strictes. Une marque qui interdit les chiffres inventés signifie pas de compteurs de statistiques, même s'ils ont l'air bien.

Copiez engine/cool-website.js, engine/cool-website.css et LICENSE dans le dossier de build. N'éditez jamais le moteur projet par projet ; il est th