Que fait site-inspirado ?
Ce qui distingue un site banal d’un site mémorable n’est pas le code, c’est le processus : référence visuelle → questions → recherche → images dans le même style → page avec mouvement → vérifier qu’on trouve encore le bouton.
S=<dossier de cette compétence> · T=<dossier du site> (un par site ; utilise celui indiqué par la personne, ex. : ~/mon-site ; sans indication, ~/projets/output/site-inspirado/<slug>). Travaille toujours dans T.
Le site final N’utilise PAS l’identité visuelle INEMA (noir et jaune). Le style vient des références de la personne. L’identité visuelle INEMA vaut seulement pour le guide du kit.
Les 6 étapes (dans l’ordre ; chacune a une porte)
| # | Étape | Tu produis | Porte |
|---|---|---|---|
| 1 | Références | T/refs/ (2 à 5 images) | la personne a confirmé que c’est cette ambiance |
| 2 | Questions + recherche | T/BRIEF.md | toutes les questions du bon bloc ont été répondues ; rien d’inventé |
| 3 | Style | T/estilo.json | palette mesurée + prompt_estilo écrit en regardant les refs ; contraste du texte ≥ 4,5 |
| 4 | Images | T/img/*.jpg + T/img/folha.jpg | tu as REGARDÉ la feuille : même style, pas de lettre dessinée, pas de main tordue |
| 5 | Page | T/index.html | un data-cta sur le bouton principal ; transitions via movimento.js |
| 6 | Porte + publication | rapport de la porte, photos | portao.js sort 0 ; puis publie (GitHub Pages / Vercel du client) |
1. Références
Demande 2 à 5 images : ce que la personne possède déjà (faire-part, logo, photo du magasin) + inspiration (Pinterest :
« site boulangerie », « wedding website watercolor »). Si elle n’en a pas, génères-en 2 via Codex (image_gen) et
montre-les avant de continuer. Stocke dans T/refs/.
2. Questions et recherche (avant de générer QUOI QUE CE SOIT)
Dis ceci à l’IA (ou fais-le toi‑même) : « Avant de générer quoi que ce soit, demande-moi tout ce dont tu as besoin et recherche ce qu’un site de ce type a généralement. » Utilise le bloc de referencias/perguntas.md correspondant au type de site
(événement, commerce local, service / consulting, portfolio). Recherche ce qui est FACTUEL (comment s’y rendre,
climat de la saison, activités à proximité) et marque dans le BRIEF ce qui vient de la personne et ce qui vient de la recherche.
Décide du type de site dans le BRIEF : negocio (l’objectif est une action : commander, prendre rendez-vous, appeler) ou
visual (événement, portfolio, faire-part : peut avoir plus de mouvement).
3. Style mesuré
python3 $S/scripts/estilo.py T/refs T/estilo.json --prompt "<style en anglais, en regardant les refs>"
Le script mesure la palette et suggère fond/texte/accent avec le contraste calculé. Tu décides les couleurs
finales (assombris le texte si le contraste passe sous 4,5). Le prompt_estilo décrit TECHNIQUE + LUMIÈRE + PALETTE
(ex. : « loose watercolor on cotton paper, burgundy, sage and cream, thin gold ink accents »).
4. Images dans le même style
Écris T/plano.json (une ligne par image : nome, prompt du SUJET, largura, altura) et génère :
python3 $S/scripts/imagens.py T/plano.json T/estilo.json T/img --refs T/refs
Chaque image reçoit les refs + la première image générée (ancre) comme référence : la série sort avec la
même main. Une par une ; le script attend si la mémoire libre descend sous 30 Go. Ouvre T/img/folha.jpg
et refais avec --so nom ce qui détonne. Personnes : de dos ou petites dans le paysage (un visage inventé
de « vrais mariés » trompe).
Moteur vidéo (clip animé à partir d’une image : Kling, Magnific, etc.) est optionnel et seulement avec
autorisation de la personne pour ce service. Sans lui, le mouvement est fait en code (étape 5).
5. Page avec mouvement
Une page par site, conçue pour le sujet (ne copie jamais un autre pilote). Utilise :
cp $S/runtime/movimento.js T/et<script src="movimento.js">(toujours dansT, avant la porte) :data-revela(monte/apparaît/côté/zoom/rideau),data-parallax,data-intro(voile ≤ 1,2 s),data-conta,data-contagem. Tout s’arrête quand le système demande « réduire le mouvement ».- Le bouton principal porte
data-cta. Ennegocio, il est dans le premier écran, sans animation d’entrée, et sur mobile il gagne une barre fixe. - Images avec
width/height,loading="lazy"en dessous du pli etaltqui décrit la scène.
Mesure de la quantité de mouvement à utiliser : referencias/visual-x-conversao.md.
6. Porte et publication
node $S/scripts/portao.js T/index.html --tipo negocio|visual --fotos T/fotos
Vérifie, en 1440×900 et 390×844, avec et sans « réduire le mouvement » : CTA (dans le 1er écran en 1,5 s si negocio),
0 erreur de console, 0 fichier cassé, pas de défilement latéral, images chargées, aucune animation
en cours avec « réduire le mouvement », poids (negocio < 3 Mo, visual < 8 Mo). Ne publie qu’avec PASSA.
Première fois : cd $S/scripts && npm install && npx playwright install chromium.