Directeur d'interface

Former ton agent à créer des sites mémorables : "Master Pièce God Mode"

L'objectif : que ton agent produise des sites simples, efficaces, inoubliables. Pas des usines à gaz. Des sites dont on se souvient 6 mois après. Voici le programme d'entraînement.

---

🎯 1. Le principe fondamental : l'empreinte

Un site mémorable laisse une empreinte. Cette empreinte repose sur 3 piliers :

Pilier Question Exemple
Un seul message Que retient-on en 5 secondes ? "C'est le site du tailleur qui fait du sur-mesure en lin"
Un seul geste Que fait-on sur ce site ? "Je prends rendez-vous en 2 clics"
Une seule émotion Que ressent-on ? "C'est élégant, artisanal, chaleureux"

Règle d'or : si ton agent ne peut pas résumer le site en 3 phrases, il a échoué. Tout le reste (couleurs, animations, sections) doit servir ces 3 piliers.

---

🧠 2. Les 7 lois du site mémorable

Loi 1 : Un seul objectif par page

Chaque page a UNE mission. La page d'accueil fait découvrir. La page collection fait choisir. La page produit fait acheter. Pas de page fourre-tout.

Loi 2 : Le scroll doit raconter une histoire

Le visiteur scrolle, et à chaque écran il découvre quelque chose. Pas un mur de contenu. Une progression narrative.

Structure type :

```
1. Hero (accroche + image forte)
2. Promesse (ce qu'on fait, pour qui)
3. Preuve (savoir-faire, matières, témoignages)
4. Offre (collections, produits)
5. Action (contact, achat, rendez-vous)
```

Loi 3 : Un seul appel à l'action dominant

Un site qui propose 10 boutons "Contact / Acheter / Newsletter / Instagram / Téléphone / WhatsApp / Rendez-vous" n'a aucun bouton. Un seul CTA principal, répété 3-4 fois.

Loi 4 : Le mobile d'abord, le desktop ensuite

70% du trafic mode est mobile. Si le site n'est pas parfait sur téléphone, il est raté.

Loi 5 : La vitesse est un message

Un site lent dit "on s'en fout de vous". Un site rapide dit "on respecte votre temps". Objectif : LCP < 1.5s, pas de JavaScript inutile.

Loi 6 : Le détail qui reste

Un site mémorable a un détail signature : une animation, un son, une typo, un curseur custom, une transition. Un seul. Pas dix.

Loi 7 : L'émotion avant l'information

On retient ce qu'on ressent, pas ce qu'on lit. La photo, la couleur, le rythme passent avant le texte.

---

🏗️ 3. Programme d'entraînement de ton agent

Phase 1 : Apprentissage des patterns (2 semaines)

Exercice 1 : Analyse de 20 sites mémorables
Ton agent analyse 20 sites de référence et identifie pour chacun :

· Le message principal
· Le geste principal
· L'émotion principale
· Le détail signature

Sites à analyser :

· Luxe : Céline, The Row, Lemaire, Jacquemus
· Artisan : Sézane, Doen, Isabel Marant
· Streetwear : Supreme, Palace, Kith
· Avant-garde : Comme des Garçons, Yohji Yamamoto
· Minimal : Muji, Arket, COS

Livrable : une base de données de patterns réutilisables.

Exercice 2 : Classification par archétype
Ton agent classe les sites en 5 archétypes :

1. Le manifeste : une marque, un discours, une ambiance
2. Le catalogue : des produits, du choix, de la clarté
3. Le configurateur : du sur-mesure, du guidage
4. Le portfolio : des réalisations, de la preuve
5. L'expérience : un univers, une immersion

Pour chaque archétype, il connaît les codes, les pièges, les variantes.

Phase 2 : Apprentissage des composants (3 semaines)

Ton agent doit maîtriser 20 composants et savoir quand les utiliser.

Composants de structure

Composant Usage Piège
Hero plein écran Accroche forte Vidéo lourde
Hero split Texte + image Déséquilibre
Section manifeste Marque, valeurs Blabla
Grille produits Catalogue Trop d'items
Carrousel Collections Défilement infini
Timeline Histoire Chronologie forcée

Composants d'action

Composant Usage Piège
CTA fixe Action principale Trop intrusif
Newsletter inline Capture email Popup agressif
Formulaire court Contact Trop de champs
Prise de rendez-vous Sur-mesure Calendrier complexe
Panier latéral E-commerce Trop lent

Composants d'émotion

Composant Usage Piège
Photo plein écran Immersion Lenteur
Vidéo courte Ambiance Autoplay sonore
Typo signature Identité Illisible
Transition custom Détail mémorable Gadget
Micro-animation Vie Sur-animation

Livrable : une bibliothèque de composants avec règles d'usage.

Phase 3 : Entraînement à la composition (4 semaines)

Exercice 1 : Le brief en 1 phrase
Ton agent reçoit un brief en 1 phrase ("un site pour un tailleur de lin à Lyon, sur-mesure, élégant, artisanal") et doit produire :

· Le message principal
· Le geste principal
· L'émotion principale
· L'archétype
· La structure des pages
· Les composants choisis

Exercice 2 : Le wireframe en 10 minutes
Pour chaque brief, ton agent produit un wireframe en 10 minutes. Pas de design, juste la structure. Objectif : apprendre à décider vite.

Exercice 3 : La déclinaison en 3 styles
Le même wireframe, décliné en 3 styles visuels différents (minimal, chaleureux, avant-garde). Objectif : comprendre que la structure est stable, le style est variable.

Exercice 4 : Le test des 5 secondes
Montrer le site fini à quelqu'un pendant 5 secondes, puis lui demander :

· Que vend ce site ?
· À qui s'adresse-t-il ?
· Qu'a-t-il retenu ?

Si la personne ne peut pas répondre, le site est raté.

Phase 4 : Projets réels (4 semaines)

Projet 1 : Site vitrine créateur
Un site pour un créateur qui vend peu en ligne mais beaucoup en physique. Objectif : montrer, pas vendre.

Projet 2 : E-commerce mode
Un site pour une marque qui vend ses collections. Objectif : convertir sans agresser.

Projet 3 : Configurateur sur-mesure
Un site pour un tailleur. Objectif : guider, rassurer, convertir.

Projet 4 : Site manifeste
Un site pour une marque émergente. Objectif : laisser une empreinte.

---

🎨 4. Les règles de design que ton agent doit appliquer

Typographie

· 1 police pour les titres (caractère, élégance)
· 1 police pour le texte (lisibilité)
· Tailles : 16px base mobile, 18px desktop
· Interlignage : 1.5 à 1.7
· Longueur de ligne : 60-75 caractères max

Couleurs

· 2-3 couleurs maximum
· 1 couleur signature (le détail qu'on retient)
· Contraste : WCAG AA minimum
· Fond : blanc, beige, ou noir profond (pas de gris fade)

Espacement

· Espace blanc : 40% minimum de la page
· Marges : cohérentes (8px, 16px, 24px, 48px)
· Respiration : jamais plus de 3 éléments par écran mobile

Images

· Format : WebP, AVIF
· Poids : < 200 Ko par image
· Ratio : cohérent (4:5, 3:2, 1:1)
· Alt : descriptif, naturel

Animations

· 1 animation signature par site
· Durée : 200-400ms
· Déclencheur : scroll, hover, clic
· Utilité : guider, pas décorer

---

🧩 5. Les détails qui rendent un site mémorable

Détail Effet Exemple
Curseur custom Immersion Petit point qui suit la souris
Transition de page Fluidité Fade, slide, morph
Micro-interaction Vie Bouton qui rebondit au clic
Son discret Ambiance Tissu qui se déchire au scroll
Typo animée Signature Titre qui se révèle lettre par lettre
Couleur qui change Rythme Fond qui évolue au scroll
Image qui se dévoile Suspense Reveal progressif
Chargement custom Attente Logo qui se dessine

Règle : UN SEUL détail signature par site. Sinon, le visiteur est surchargé.

---

📋 6. Le pipeline de création de ton agent

```
1. BRIEF
└─ L'utilisateur décrit son activité en 3 phrases
└─ L'agent identifie : message, geste, émotion, archétype

2. STRATÉGIE
└─ Structure des pages
└─ Choix des composants
└─ Choix du CTA principal

3. WIREFRAME
└─ Structure de chaque page
└─ Hiérarchie visuelle
└─ Parcours utilisateur

4. DESIGN
└─ Typographie
└─ Couleurs
└─ Images
└─ Détail signature

5. DÉVELOPPEMENT
└─ HTML sémantique
└─ CSS moderne
└─ JavaScript minimal
└─ Optimisation performance

6. CONTENU
└─ Textes courts et forts
└─ SEO naturel
└─ Micro-copie soignée

7. TESTS
└─ Test des 5 secondes
└─ Test mobile
└─ Test vitesse
└─ Test accessibilité

8. LANCEMENT
└─ Nom de domaine
└─ Hébergement
└─ Analytics
└─ Suivi
```

---

🎓 7. Grille de notation de ton agent

Pour chaque site produit, ton agent s'auto-évalue :

Critère 1 (Raté) 2 (Passable) 3 (Bien) 4 (Mémorable)
Message en 5s Impossible à résumer Flou Clair Évident
Geste principal Aucun Plusieurs Un Un, évident
Émotion Neutre Tiède Claire Forte
Structure Fouillis Basique Logique Narrative
Design Daté Correct Soigné Signature
Vitesse 5s 3-5s 1.5-3s < 1.5s
Mobile Cassé Utilisable Bon Excellent
Détail signature Aucun Banal Présent Mémorable
Contenu Vide Générique Clair Fort
Test 5s Échec Partiel Réussi Immédiat

Score minimum pour valider : 28/40. En dessous, le site est refait.

---

🛠️ 8. Stack technique recommandée

Pour un site vitrine simple et rapide

· Astro : site statique, ultra-rapide, SEO natif
· Tailwind CSS : design cohérent, rapide à écrire
· Alpine.js : interactions légères
· Vercel/Netlify : hébergement gratuit

Pour un e-commerce

· Shopify : rapide, fiable, écosystème mode
· Next.js + Stripe : sur-mesure, contrôle total
· Snipcart : panier léger sur site statique

Pour un configurateur

· Next.js + React Hook Form : formulaire multi-étapes
· Framer Motion : animations fluides
· Supabase : base de données

Polices gratuites pour la mode

· Titres : Playfair Display, Cormorant, Libre Baskerville, Space Grotesk
· Texte : Inter, Work Sans, DM Sans, IBM Plex Sans

---

💡 9. Les 10 commandements de ton agent

1. Un seul message par site. Si tu hésites, tu as échoué.
2. Un seul CTA principal. Répété, pas multiplié.
3. Mobile d'abord. Toujours.
4. Vitesse = respect. Optimise tout.
5. Photo > texte. Toujours.
6. Un détail signature. Un seul.
7. Test des 5 secondes. Obligatoire.
8. Pas de popup agressif. Jamais.
9. Pas de carrousel infini. Sauf nécessité.
10. Le contenu avant le design. Toujours.

---

🎯 10. Exemples de sites "Master Pièce God Mode"

Exemple 1 : Tailleur sur-mesure

· Message : "Le sur-mesure en lin, à Lyon"
· Geste : "Prendre rendez-vous"
· Émotion : "Élégance artisanale"
· Archétype : Configurateur
· Détail signature : le curseur devient une aiguille qui coud au scroll

Exemple 2 : Marque de bijoux

· Message : "Des bijoux faits main, en or recyclé"
· Geste : "Découvrir la collection"
· Émotion : "Précieux et engagé"
· Archétype : Catalogue
· Détail signature : les photos se révèlent avec un effet de métal poli

Exemple 3 : Créateur avant-garde

· Message : "Des pièces uniques, pour ceux qui osent"
· Geste : "Voir la collection"
· Émotion : "Audace et mystère"
· Archétype : Manifeste
· Détail signature : le fond change de couleur à chaque scroll

Exemple 4 : Atelier de céramique

· Message : "Des objets uniques, faits à la main"
· Geste : "Commander une pièce"
· Émotion : "Chaleur et authenticité"
· Archétype : Portfolio
· Détail signature : les images tournent lentement comme un tour de potier

---

🚀 Plan de formation de ton agent en 12 semaines

Semaine Focus Livrable
1-2 Analyse de 20 sites Base de patterns
3-5 Maîtrise des 20 composants Bibliothèque de composants
6-9 Composition (briefs, wireframes) 10 wireframes
10 Design (typo, couleurs, images) 3 chartes visuelles
11 Développement (Astro + Tailwind) 3 sites réels
12 Tests et itération Sites validés

---

Master Pièce God Mode — Détails concrets pour ton agent

Voici tout ce dont ton agent a besoin pour produire des sites mode mémorables, avec les specs exactes, les composants, le code et les tests.

---

🧩 1. Les 12 composants concrets à maîtriser

Composant 1 : Hero plein écran

Structure : image ou vidéo plein viewport + titre + CTA unique.
Specs : hauteur 100vh desktop / 80vh mobile. Image optimisée (WebP, < 200 Ko). Titre en display font. CTA contrasté.
Piège : vidéo autoplay avec son → non. Vidéo muette + poster de fallback.

```html
<section class="hero">
<video autoplay muted loop playsinline poster="fallback.jpg">
<source src="hero.webm" type="video/webm">
</video>
<div class="hero__content">
<h1>Le sur-mesure en lin</h1>
<p>Des pièces uniques, taillées à la main à Lyon.</p>
<a href="/rendez-vous" class="btn">Prendre rendez-vous</a>
</div>
</section>
```

```css
.hero { height: 100vh; position: relative; overflow: hidden; }
.hero video { width: 100%; height: 100%; object-fit: cover; }
.hero__content { position: absolute; bottom: 10%; left: 6%; color: white; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1; }
```

Composant 2 : Grille produit avec hover swap

Structure : grille responsive + image swap au hover.
Specs : 2 colonnes mobile, 3 tablette, 4 desktop. Ratio 4:5. Hover : image secondaire en 200ms.

```css
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.product-card img { position: absolute; inset: 0; object-fit: cover; transition: opacity 0.2s ease; }
.product-card img.secondary { opacity: 0; }
.product-card:hover img.secondary { opacity: 1; }
```

Composant 3 : Navigation sticky simplifiée

Structure : header transparent en haut, se réduit au scroll.
Specs : fond blanc ou noir à partir de 100px de scroll. Logo à gauche, panier à droite, menu au centre.

```js
let lastScroll = 0;
window.addEventListener('scroll', () => {
const header = document.querySelector('.header');
const currentScroll = window.scrollY;
if (currentScroll > 100) header.classList.add('header--compact');
else header.classList.remove('header--compact');
lastScroll = currentScroll;
});
```

Composant 4 : Marquee typographique

Structure : texte qui défile horizontalement, en boucle.
Specs : utilisé pour les annonces (nouvelle collection, showreel, promo). Vitesse 60-80s pour un défilement lent et hypnotique. Le texte se répète avec des séparateurs (•, —, /).

```css
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__inner { display: inline-block; animation: marquee 60s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
```

Composant 5 : Micro-interaction bouton

Structure : bouton qui réagit au hover et au clic.
Specs : hover : fond qui glisse, texte qui change de couleur. Clic : scale 0.98. Durée 200-300ms.

```css
.btn { position: relative; overflow: hidden; padding: 1rem 2rem; background: transparent; border: 1px solid currentColor; }
.btn::before { content: ''; position: absolute; inset: 0; background: currentColor; transform: translateX(-100%); transition: transform 0.3s ease; }
.btn:hover::before { transform: translateX(0); }
.btn span { position: relative; z-index: 1; transition: color 0.3s ease; }
.btn:hover span { color: white; }
```

Composant 6 : Cart slide-in

Structure : panier latéral qui glisse depuis la droite.
Specs : largeur 400px desktop, 100% mobile. Fond semi-transparent + flou. Animation 300ms.

```css
.cart { position: fixed; top: 0; right: 0; width: 400px; height: 100vh; transform: translateX(100%); transition: transform 0.3s ease; background: white; z-index: 100; }
.cart.open { transform: translateX(0); }
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.cart-overlay.open { opacity: 1; pointer-events: auto; }
```

Composant 7 : Preloader atmosphérique

Structure : écran de chargement avant le site.
Specs : compteur de 0 à 100, logo qui se dessine, ou texte qui se révèle. Durée max 2s. Le preloader doit être atmosphérique, pas fonctionnel : il donne le ton avant que l'utilisateur ne voie le contenu.

Composant 8 : Transition de page fluide

Structure : animation entre les pages.
Specs : fade + slide, ou morph. Durée 400ms. Utiliser l'API View Transitions si disponible.

```css
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade-out 0.3s ease; }
::view-transition-new(root) { animation: fade-in 0.3s ease; }
```

Composant 9 : Grille de variations (inspirée de JW Anderson)

Structure : grille de produits avec des tailles de tuiles variées.
Specs : certaines tuiles prennent 2 colonnes, d'autres 1. Crée un rythme visuel et un sentiment de fraîcheur.

```css
.varied-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.varied-grid .featured { grid-column: span 2; grid-row: span 2; }
```

Composant 10 : Accordéon FAQ

Structure : questions/réponses qui se déplient.
Specs : chevron qui tourne de 90° à 180°. Animation 300ms. Une seule réponse ouverte à la fois.

```css
.faq-item__chevron { transition: transform 0.3s ease; }
.faq-item.open .faq-item__chevron { transform: rotate(180deg); }
```

Composant 11 : Formulaire de contact court

Structure : 3 champs max (nom, email, message).
Specs : labels visibles, validation en temps réel, bouton unique. Jamais plus de 3 champs pour un premier contact.

Composant 12 : Détail signature

Un seul par site. Exemples concrets :

· Curseur custom qui devient une aiguille (tailleur).
· Fond qui change de couleur au scroll (créateur avant-garde).
· Images qui se révèlent avec un effet de métal poli (bijoux).
· Texte qui se dessine lettre par lettre (typographe).

---

🎨 2. Typographie : les 6 polices gratuites pour la mode

Police Style Usage Source
Playfair Display Serif élégant Titres luxe, mode Google Fonts
Cormorant Serif fin et noble Titres haut de gamme Google Fonts
Space Grotesk Sans-serif géométrique Titres contemporains Google Fonts
Inter Sans-serif neutre Corps de texte Google Fonts
DM Sans Sans-serif doux Corps de texte Google Fonts
Libre Baskerville Serif classique Titres éditoriaux Google Fonts

Règle concrète : 1 display + 1 texte. Jamais plus de 2 polices.

Échelle typographique concrète :

```css
:root {
--text-xs: 0.75rem; / 12px — labels /
--text-sm: 0.875rem; / 14px — meta /
--text-base: 1rem; / 16px — corps mobile /
--text-lg: 1.125rem; / 18px — corps desktop /
--text-xl: 1.5rem; / 24px — sous-titres /
--text-2xl: 2rem; / 32px — titres section /
--text-3xl: 3rem; / 48px — titres page /
--text-4xl: 5rem; / 80px — hero /
}
```

---

🎬 3. Micro-interactions concrètes pour la mode

Interaction Effet Code
Hover produit Image secondaire apparaît opacity: 0 → 1 en 200ms
Ajout panier Icône panier qui rebondit scale: 1 → 1.2 → 1 en 300ms
Scroll Titre qui flotte du bas vers le haut translateY: 20px → 0 + fade
Navigation Ligne qui se dessine sous le lien width: 0 → 100% en 300ms
Chargement Spinner qui devient checkmark Morph SVG
Accordéon Chevron qui tourne rotate: 0 → 180deg

Chaque micro-interaction doit servir un objectif : élever le design, personnifier la marque, inciter à l'action, ou attirer l'attention.

---

🏗️ 4. Structure de page concrète : Accueil

```
1. PRELOADER (1.5s max)
└─ Logo + compteur ou texte qui se révèle

2. HERO (100vh)
└─ Image/vidéo plein écran
└─ Titre (display font, 80px)
└─ Sous-titre (18px)
└─ CTA principal (bouton unique)

3. MARQUEE
└─ "NOUVELLE COLLECTION • PRINTEMPS 2026 • NOUVELLE COLLECTION • ..."

4. COLLECTIONS (3 tuiles)
└─ Image + nom + lien
└─ Grille : 1 colonne mobile, 3 desktop

5. PRODUITS EN VEDETTE (grille 4)
└─ Image swap au hover
└─ Nom + prix

6. MANIFESTE (texte + image)
└─ "Depuis 2018, nous taillons..."
└─ 2 colonnes : texte à gauche, image à droite

7. NEWSLETTER
└─ "Rejoignez le cercle"
└─ Champ email + bouton unique

8. FOOTER
└─ Navigation secondaire
└─ Réseaux sociaux
└─ Mentions légales
```

---

🔍 5. Tests concrets obligatoires

Test des 5 secondes

Montrer le site 5 secondes. Demander :

· Que vend ce site ?
· À qui s'adresse-t-il ?
· Qu'avez-vous retenu ?

Si les 3 réponses ne sont pas claires → le site est refait.

Test mobile

· Tester sur iPhone SE (petit écran).
· Tester sur Android.
· Vérifier que le CTA est accessible au pouce.
· Vérifier que les images ne sont pas coupées.

Test vitesse

· LCP < 1.5s (Largest Contentful Paint)
· FID < 100ms (First Input Delay)
· CLS < 0.1 (Cumulative Layout Shift)

Outil : PageSpeed Insights.

Test accessibilité

· Contraste WCAG AA minimum.
· Navigation au clavier.
· Balises alt sur toutes les images.
· Labels sur tous les champs.

---

💻 6. Stack technique concrète

Pour un site vitrine

```bash
npm create astro@latest
# Choix : Tailwind CSS, TypeScript
```

Structure :

```
src/
├── components/
│ ├── Hero.astro
│ ├── ProductGrid.astro
│ ├── Marquee.astro
│ ├── Cart.astro
│ └── Footer.astro
├── layouts/
│ └── Base.astro
├── pages/
│ ├── index.astro
│ ├── collections.astro
│ └── contact.astro
└── styles/
└── global.css
```

Pour un e-commerce

· Astro + Snipcart (panier léger, 10€/mois) ou Shopify Buy Button.
· Next.js + Stripe (sur-mesure).

---

📋 7. Checklist de validation avant livraison

☐ Message principal résumable en 1 phrase
☐ Un seul CTA principal, répété 3-4 fois
☐ Mobile parfait (test iPhone SE)
☐ LCP < 1.5s
☐ Contraste WCAG AA
☐ 1 seul détail signature
☐ Test des 5 secondes réussi
☐ Aucune popup agressive
☐ Aucun carrousel infini
☐ Toutes les images ont un alt
☐ Formulaire contact en 3 champs max

---

🎯 8. Prompt système pour ton agent

```
Tu es un directeur artistique spécialisé dans les sites de mode.

RÈGLES ABSOLUES :
1. Un seul message par site. Si tu hésites, demande.
2. Un seul CTA principal.
3. Mobile d'abord.
4. Vitesse < 1.5s LCP.
5. 1 seul détail signature.
6. Test des 5 secondes obligatoire.

COMPOSANTS DISPONIBLES :
- Hero plein écran
- Grille produit avec hover swap
- Marquee typographique
- Cart slide-in
- Preloader atmosphérique
- Transition de page
- Grille de variations
- Accordéon FAQ
- Formulaire 3 champs

TYPographie : 1 display + 1 texte. Jamais plus.

COULEURS : 2-3 max. 1 couleur signature.

INTERDIT :
- Popup agressif
- Carrousel infini
- Plus de 3 champs de contact
- Vidéo autoplay avec son
- Plus de 1 détail signature
```

Composants concrets en Astro + Tailwind + Prompt système

Voici les 3 composants essentiels codés en entier, puis le prompt système complet de ton agent avec exemples de briefs et sorties.

---

🧩 Partie 1 : Composant Hero complet

src/components/Hero.astro

```astro
---
interface Props {
video?: string;
poster?: string;
image?: string;
title: string;
subtitle?: string;
ctaLabel: string;
ctaHref: string;
height?: 'full' | 'tall';
}

const {
video,
poster,
image,
title,
subtitle,
ctaLabel,
ctaHref,
height = 'full'
} = Astro.props;

const heightClass = height === 'full' ? 'h-screen' : 'h-[80vh]';
---

<section class={hero relative w-full ${heightClass} overflow-hidden bg-neutral-900}>
<!-- Média de fond -->
{video ? (
<video
class="absolute inset-0 w-full h-full object-cover"
autoplay
muted
loop
playsinline
poster={poster}
>
<source src={video} type="video/mp4" />
</video>
) : (
<img
src={image}
alt=""
class="absolute inset-0 w-full h-full object-cover"
loading="eager"
fetchpriority="high"
/>
)}

<!-- Overlay sombre pour lisibilité -->
<div class="absolute inset-0 bg-black/30"></div>

<!-- Contenu -->
<div class="relative z-10 h-full flex flex-col justify-end pb-16 md:pb-24 px-6 md:px-12 max-w-7xl mx-auto">
<h1 class="font-display text-white text-5xl md:text-7xl lg:text-8xl leading-[0.95] tracking-tight max-w-3xl">
{title}
</h1>

{subtitle && (
<p class="mt-6 text-white/90 text-lg md:text-xl max-w-xl font-light">
{subtitle}
</p>
)}

<a
href={ctaHref}
class="btn-primary mt-10 self-start"
>
{ctaLabel}
</a>
</div>
</section>

<style>
.btn-primary {
position: relative;
display: inline-flex;
align-items: center;
padding: 1rem 2rem;
border: 1px solid white;
color: white;
font-size: 0.875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
overflow: hidden;
transition: color 0.3s ease;
}

.btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: white;
transform: translateX(-101%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}

.btn-primary:hover::before {
transform: translateX(0);
}

.btn-primary:hover {
color: #0a0a0a;
}

.btn-primary > * {
position: relative;
z-index: 1;
}
</style>
```

Utilisation

```astro
---
import Hero from '../components/Hero.astro';
---
<Hero
video="/videos/atelier.mp4"
poster="/images/atelier-poster.jpg"
title="Le sur-mesure en lin"
subtitle="Des pièces uniques, taillées à la main à Lyon."
ctaLabel="Prendre rendez-vous"
ctaHref="/rendez-vous"
/>
```

---

🧩 Partie 2 : Composant ProductGrid complet

src/components/ProductGrid.astro

```astro
---
interface Product {
id: string;
name: string;
price: number;
image: string;
imageHover?: string;
href: string;
badge?: string;
}

interface Props {
products: Product[];
columns?: 2 | 3 | 4;
}

const { products, columns = 4 } = Astro.props;

const gridCols = {
2: 'grid-cols-2',
3: 'grid-cols-2 md:grid-cols-3',
4: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
}[columns];
---

<div class={grid ${gridCols} gap-x-4 gap-y-10 md:gap-x-6 md:gap-y-12}>
{products.map((product) => (
<a href={product.href} class="product-card group block">
<div class="relative aspect-[4/5] overflow-hidden bg-neutral-100">
<!-- Image principale -->
<img
src={product.image}
alt={product.name}
class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
loading="lazy"
/>

<!-- Image secondaire (hover) -->
{product.imageHover && (
<img
src={product.imageHover}
alt=""
class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-500"
loading="lazy"
/>
)}

<!-- Badge -->
{product.badge && (
<span class="absolute top-3 left-3 bg-black text-white text-[10px] uppercase tracking-widest px-2 py-1">
{product.badge}
</span>
)}

<!-- Bouton ajout panier (apparaît au hover) -->
<button
class="absolute bottom-3 left-3 right-3 bg-white text-black text-xs uppercase tracking-widest py-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300"
data-product-id={product.id}
>
Ajouter au panier
</button>
</div>

<!-- Informations produit -->
<div class="mt-4 flex justify-between items-start gap-4">
<div>
<h3 class="text-sm font-medium text-neutral-900">{product.name}</h3>
</div>
<p class="text-sm text-neutral-900 whitespace-nowrap">
{product.price.toFixed(2).replace('.', ',')} €
</p>
</div>
</a>
))}
</div>

<style>
@media (prefers-reduced-motion: reduce) {
.product-card img,
.product-card button {
transition: none !important;
}
}
</style>
```

Utilisation

```astro
---
import ProductGrid from '../components/ProductGrid.astro';

const products = [
{
id: 'robe-lin-01',
name: 'Robe longue en lin lavé',
price: 240,
image: '/images/robe-1.jpg',
imageHover: '/images/robe-1-b.jpg',
href: '/produits/robe-lin-01',
badge: 'Nouveau'
},
{
id: 'veste-lin-02',
name: 'Veste oversize en lin',
price: 320,
image: '/images/veste-1.jpg',
imageHover: '/images/veste-1-b.jpg',
href: '/produits/veste-lin-02'
},
// ...
];
---
<ProductGrid products={products} columns={4} />
```

---

🧩 Partie 3 : Composant Cart (panier latéral) complet

src/components/Cart.astro

```astro
---
// Composant autonome : gère l'ouverture, la fermeture et l'affichage
---
<div
id="cart-overlay"
class="fixed inset-0 bg-black/50 opacity-0 pointer-events-none transition-opacity duration-300 z-40"
></div>

<aside
id="cart"
class="fixed top-0 right-0 h-full w-full md:w-[420px] bg-white z-50 translate-x-full transition-transform duration-400 ease-out flex flex-col"
aria-label="Panier"
>
<!-- Header -->
<header class="flex items-center justify-between p-6 border-b border-neutral-200">
<h2 class="text-sm uppercase tracking-widest">Panier</h2>
<button
id="cart-close"
class="text-neutral-500 hover:text-black transition-colors"
aria-label="Fermer le panier"
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</header>

<!-- Liste des articles -->
<div id="cart-items" class="flex-1 overflow-y-auto p-6">
<!-- Rempli dynamiquement par JS -->
<p id="cart-empty" class="text-neutral-400 text-sm">
Votre panier est vide.
</p>
</div>

<!-- Pied : total + CTA -->
<footer class="border-t border-neutral-200 p-6 space-y-4">
<div class="flex justify-between text-sm">
<span>Sous-total</span>
<span id="cart-subtotal">0,00 €</span>
</div>
<p class="text-xs text-neutral-500">
Livraison et taxes calculées au paiement.
</p>
<button
class="w-full bg-black text-white py-4 text-xs uppercase tracking-widest hover:bg-neutral-800 transition-colors"
id="cart-checkout"
>
Passer commande
</button>
</footer>
</aside>

<script>
// État du panier (localStorage pour persistance)
const CART_KEY = 'masterpiece_cart';

function getCart(): any[] {
try {
return JSON.parse(localStorage.getItem(CART_KEY) || '[]');
} catch {
return [];
}
}

function saveCart(cart: any[]) {
localStorage.setItem(CART_KEY, JSON.stringify(cart));
renderCart();
updateCartCount();
}

function updateCartCount() {
const cart = getCart();
const count = cart.reduce((sum, item) => sum + item.qty, 0);
document.querySelectorAll('[data-cart-count]').forEach((el) => {
el.textContent = count.toString();
el.classList.toggle('hidden', count === 0);
});
}

function renderCart() {
const cart = getCart();
const container = document.getElementById('cart-items');
const empty = document.getElementById('cart-empty');
const subtotalEl = document.getElementById('cart-subtotal');

if (!container || !subtotalEl) return;

if (cart.length === 0) {
empty?.classList.remove('hidden');
container.querySelectorAll('.cart-item').forEach((el) => el.remove());
subtotalEl.textContent = '0,00 €';
return;
}

empty?.classList.add('hidden');
container.querySelectorAll('.cart-item').forEach((el) => el.remove());

let subtotal = 0;

cart.forEach((item) => {
subtotal += item.price * item.qty;

const el = document.createElement('div');
el.className = 'cart-item flex gap-4 mb-6';
el.innerHTML = `
<div class="w-20 h-24 bg-neutral-100 flex-shrink-0 overflow-hidden">
<img src="${item.image}" alt="" class="w-full h-full object-cover">
</div>
<div class="flex-1 flex flex-col justify-between">
<div>
<h3 class="text-sm font-medium">${item.name}</h3>
<p class="text-xs text-neutral-500 mt-1">Taille ${item.size || 'M'}</p>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center gap-3 text-sm">
<button data-cart-dec="${item.id}" class="w-6 h-6 border border-neutral-300 flex items-center justify-center">−</button>
<span>${item.qty}</span>
<button data-cart-inc="${item.id}" class="w-6 h-6 border border-neutral-300 flex items-center justify-center">+</button>
</div>
<p class="text-sm">${(item.price * item.qty).toFixed(2).replace('.', ',')} €</p>
</div>
</div>
`;
container.appendChild(el);
});

subtotalEl.textContent = ${subtotal.toFixed(2).replace('.', ',')} €;
}

// Ouvrir / fermer
const cart = document.getElementById('cart');
const overlay = document.getElementById('cart-overlay');

function openCart() {
cart?.classList.remove('translate-x-full');
overlay?.classList.remove('opacity-0', 'pointer-events-none');
document.body.style.overflow = 'hidden';
}

function closeCart() {
cart?.classList.add('translate-x-full');
overlay?.classList.add('opacity-0', 'pointer-events-none');
document.body.style.overflow = '';
}

document.getElementById('cart-close')?.addEventListener('click', closeCart);
overlay?.addEventListener('click', closeCart);

document.querySelectorAll('[data-cart-open]').forEach((btn) => {
btn.addEventListener('click', openCart);
});

// Ajouter au panier
document.addEventListener('click', (e) => {
const target = e.target as HTMLElement;

// Ajout
const addBtn = target.closest('[data-product-id]') as HTMLElement;
if (addBtn) {
e.preventDefault();
const id = addBtn.dataset.productId!;
const card = addBtn.closest('.product-card') as HTMLElement;
const name = card?.querySelector('h3')?.textContent || 'Produit';
const priceText = card?.querySelector('p')?.textContent || '0';
const price = parseFloat(priceText.replace(',', '.').replace(' €', '')) || 0;
const image = (card?.querySelector('img') as HTMLImageElement)?.src || '';

const cartData = getCart();
const existing = cartData.find((i: any) => i.id === id);

if (existing) {
existing.qty += 1;
} else {
cartData.push({ id, name, price, image, qty: 1, size: 'M' });
}

saveCart(cartData);
openCart();
}

// Incrément
const incBtn = target.closest('[data-cart-inc]') as HTMLElement;
if (incBtn) {
const id = incBtn.dataset.cartInc!;
const cartData = getCart();
const item = cartData.find((i: any) => i.id === id);
if (item) {
item.qty += 1;
saveCart(cartData);
}
}

// Décrément
const decBtn = target.closest('[data-cart-dec]') as HTMLElement;
if (decBtn) {
const id = decBtn.dataset.cartDec!;
let cartData = getCart();
const item = cartData.find((i: any) => i.id === id);
if (item) {
item.qty -= 1;
if (item.qty <= 0) {
cartData = cartData.filter((i: any) => i.id !== id);
}
saveCart(cartData);
}
}
});

// Init
renderCart();
updateCartCount();
</script>
```

Utilisation dans le layout

```astro
---
import Cart from '../components/Cart.astro';
---
<header>
<!-- ... -->
<button data-cart-open class="relative">
Panier
<span
data-cart-count
class="absolute -top-2 -right-3 bg-black text-white text-[10px] rounded-full w-5 h-5 flex items-center justify-center hidden"
>0</span>
</button>
</header>

<Cart />
```

---

🧠 Partie 4 : Prompt système complet de ton agent

Voici le prompt exact à donner à ton LLM (Llama, Mistral, Claude, GPT) pour qu'il produise des sites mode mémorables.

```
# RÔLE

Tu es "Master Pièce God Mode", un directeur artistique et développeur
spécialisé dans les sites de mode. Tu produis des sites simples,
efficaces et mémorables.

Ta mission : transformer un brief en 3 phrases en un site mode
qui laisse une empreinte durable.

# PRINCIPES ABSOLUS

1. UN SEUL MESSAGE
Chaque site doit pouvoir être résumé en 1 phrase.
Si tu ne peux pas, demande une clarification.

2. UN SEUL CTA PRINCIPAL
Un seul bouton d'action dominant, répété 3-4 fois.
Pas de "Contact / Acheter / Newsletter / Instagram / Téléphone".
UN SEUL.

3. UNE SEULE ÉMOTION
Chaque site doit faire ressentir une émotion claire :
élégance, audace, chaleur, mystère, sérénité.

4. MOBILE D'ABORD
Tous les composants sont pensés mobile en premier.
70% du trafic mode est mobile.

5. VITESSE < 1.5s LCP
Images WebP/AVIF, < 200 Ko chacune.
Pas de JavaScript inutile.
Pas de police custom > 2.

6. UN SEUL DÉTAIL SIGNATURE
Un seul élément mémorable par site :
curseur custom, animation, son, transition.
JAMAIS plus d'un.

7. TEST DES 5 SECONDES
Avant de valider, tu dois pouvoir répondre :
- Que vend ce site ?
- À qui s'adresse-t-il ?
- Qu'a-t-on retenu ?
Si tu hésites, refais.

# ARCHÉTYPES DE SITES

Tu classes chaque brief dans UN archétype :

A. MANIFESTE
Marque émergente, discours fort, ambiance.
Structure : Hero → Manifeste → Collections → Newsletter
Exemple : Jacquemus, Comme des Garçons

B. CATALOGUE
Marque établie, beaucoup de produits, clarté.
Structure : Hero → Grille → Filtres → Fiche produit
Exemple : COS, Arket, Muji

C. CONFIGURATEUR
Sur-mesure, guidage, rassurance.
Structure : Hero → Processus → Formulaire → Témoignages
Exemple : Tailleur, bijoutier, céramiste

D. PORTFOLIO
Créateur, réalisations, preuve.
Structure : Hero → Galerie → À propos → Contact
Exemple : Photographe, styliste, designer

E. EXPÉRIENCE
Immersion, univers, narration.
Structure : Hero → Scroll narratif → Collections → CTA
Exemple : Maisons de luxe, parfums

# COMPOSANTS DISPONIBLES

Tu utilises UNIQUEMENT ces 12 composants :

1. Hero plein écran (vidéo ou image + titre + CTA)
2. Grille produit avec hover swap
3. Marquee typographique
4. Cart slide-in
5. Preloader atmosphérique
6. Transition de page fluide
7. Grille de variations (tuiles de tailles différentes)
8. Accordéon FAQ
9. Formulaire 3 champs max
10. Navigation sticky simplifiée
11. Micro-interaction bouton (slide de fond)
12. Détail signature (UN SEUL)

# TYPOGRAPHIE

Tu choisis 1 police display + 1 police texte parmi :

DISPLAY :
- Playfair Display (serif élégant, luxe)
- Cormorant (serif fin, haut de gamme)
- Space Grotesk (sans-serif contemporain)
- Libre Baskerville (serif éditorial)

TEXTE :
- Inter (neutre)
- DM Sans (doux)
- Work Sans (lisible)

Échelle :
--text-xs: 12px
--text-sm: 14px
--text-base: 16px mobile / 18px desktop
--text-xl: 24px
--text-2xl: 32px
--text-3xl: 48px
--text-4xl: 80px (hero)

# COULEURS

2-3 couleurs maximum. 1 couleur signature.

Palettes types :
- LUXE : blanc #FFFFFF, noir #0A0A0A, beige #E8E0D5
- ARTISAN : crème #F5F0E8, terre #8B6F47, noir #1A1A1A
- AVANT-GARDE : noir #000000, blanc #FFFFFF, rouge #E63946
- STREETWEAR : noir #000000, jaune #FFD60A, blanc #FFFFFF
- BOHÈME : terracotta #C9714A, sauge #A8B5A2, crème #F5F0E8

# INTERDICTIONS ABSOLUES

- Popup agressif (newsletter, promo)
- Carrousel infini
- Plus de 3 champs de contact
- Vidéo autoplay avec son
- Plus de 1 détail signature
- Plus de 2 polices
- Plus de 3 couleurs
- Animations > 400ms
- Images > 200 Ko
- JavaScript pour du contenu statique

# PROCESSUS DE TRAVAIL

Pour chaque brief, tu produis dans cet ordre :

1. SYNTHÈSE (3 lignes)
- Message principal
- Geste principal
- Émotion principale

2. ARCHÉTYPE (1 mot)
A, B, C, D ou E.

3. STRUCTURE
Liste des sections dans l'ordre.

4. COMPOSANTS
Liste des composants utilisés.

5. TYPOGRAPHIE
Display + Texte.

6. COULEURS
2-3 couleurs + couleur signature.

7. DÉTAIL SIGNATURE
Le seul détail mémorable.

8. CODE
Composants Astro + Tailwind, prêts à copier.

9. TESTS
Réponses au test des 5 secondes.

# FORMAT DE SORTIE

Tu réponds en Markdown structuré, avec des blocs de code
Astro complets et fonctionnels. Chaque composant est
autonome et peut être copié tel quel.

Tu ne demandes JAMAIS de clarification si le brief contient :
- Le nom de l'activité
- Le type de produit
- La cible

Si le brief est trop vague, tu poses UNE seule question :
"Quel est le message principal en 1 phrase ?"

# EXEMPLES DE BRIEFS

Brief 1 : "Un site pour un tailleur de lin à Lyon, sur-mesure, élégant, artisanal"
Brief 2 : "Une marque de bijoux en or recyclé, fait main, précieux, engagé"
Brief 3 : "Un créateur avant-garde, pièces uniques, audacieux, mystérieux"
Brief 4 : "Un atelier de céramique, objets uniques, chaleureux, authentique"

# EXEMPLE DE SORTIE POUR BRIEF 1

## Synthèse
- Message : "Le sur-mesure en lin, à Lyon"
- Geste : "Prendre rendez-vous"
- Émotion : "Élégance artisanale"

## Archétype
C — Configurateur

## Structure
1. Hero plein écran (atelier en vidéo)
2. Marquee ("SUR-MESURE • LIN • LYON •")
3. Processus en 3 étapes (Rencontre / Prise de mesures / Livraison)
4. Grille de pièces (4-6 pièces)
5. Témoignages (3 clients)
6. FAQ (accordéon)
7. CTA final "Prendre rendez-vous"
8. Footer

## Composants
Hero plein écran, Marquee, Grille produit, Accordéon FAQ,
Formulaire 3 champs, Micro-interaction bouton.

## Typographie
- Display : Cormorant (élégance, noblesse)
- Texte : Inter (lisibilité)

## Couleurs
- Crème #F5F0E8
- Terre #8B6F47
- Noir #1A1A1A
- Signature : terre

## Détail signature
Le curseur devient une aiguille qui "coud" au scroll.

## Code
[blocs Astro complets]

## Test des 5 secondes
- Que vend ce site ? Du sur-mesure en lin.
- À qui ? Aux hommes/femmes qui cherchent des pièces uniques.
- Qu'a-t-on retenu ? Le curseur-aiguille et l'élégance du lin.
```

---

🎯 Partie 5 : Comment utiliser ce prompt avec ton agent

Étape 1 : Charger le prompt système

Avec Ollama :

```python
from ollama import Client

client = Client(host="http://localhost:11434")

SYSTEM_PROMPT = open("masterpiece_system.txt").read()

def generer_site(brief):
response = client.chat(
model="llama3.2",
messages=[
{"role": "system", "content": SYSTEM_PROMPT},
{"role": "user", "content": brief}
],
options={
"temperature": 0.7,
"num_predict": 8000,
"top_p": 0.9,
}
)
return response["message"]["content"]

site = generer_site("Un site pour un tailleur de lin à Lyon, sur-mesure, élégant, artisanal")
print(site)
```

Étape 2 : Parser la sortie

Le LLM produit du Markdown structuré. Ton agent peut extraire :

```python
import re

def extraire_composants(markdown):
"""Extrait les blocs de code Astro."""
blocs = re.findall(r'```astro
(.*?)```', markdown, re.DOTALL)
return blocs

def extraire_synthese(markdown):
"""Extrait la synthèse (message, geste, émotion)."""
section = re.search(r'## Synthèse
(.*?)
##', markdown, re.DOTALL)
return section.group(1) if section else None
```

Étape 3 : Assembler le site

```python
import os

def construire_site(markdown, dossier="site"):
os.makedirs(f"{dossier}/src/components", exist_ok=True)
os.makedirs(f"{dossier}/src/pages", exist_ok=True)

composants = extraire_composants(markdown)
noms = ["Hero.astro", "ProductGrid.astro", "Cart.astro", "Marquee.astro"]

for nom, code in zip(noms, composants):
with open(f"{dossier}/src/components/{nom}", "w") as f:
f.write(code)

print(f"✅ Site construit dans {dossier}/")
```

Étape 4 : Valider

```python
def valider_site(markdown):
"""Vérifie que le site respecte les règles."""
erreurs = []

# Message en 1 phrase
if markdown.count("
") < 10:
erreurs.append("Sortie trop courte")

# Un seul CTA
ctas = re.findall(r'ctaLabel="([^"]+)"', markdown)
if len(set(ctas)) > 1:
erreurs.append(f"Plusieurs CTA différents : {set(ctas)}")

# Une seule police display
polices = re.findall(r'font-display', markdown)
if len(polices) > 1:
erreurs.append("Plusieurs polices display")

# Détail signature unique
if markdown.count("Détail signature") > 1:
erreurs.append("Plusieurs détails signature")

return erreurs
```

---

📋 Checklist finale pour ton agent

Avant de valider un site, ton agent doit vérifier :

☐ Le message est résumable en 1 phrase
☐ Un seul CTA principal
☐ Un seul détail signature
☐ 2-3 couleurs maximum
☐ 2 polices maximum
☐ Mobile parfait
☐ LCP < 1.5s (images optimisées)
☐ Test des 5 secondes réussi
☐ Aucune interdiction violée (popup, carrousel infini…)
☐ Code Astro valide et fonctionnel

---

🧩 Partie 1 : Composants manquants

src/components/Marquee.astro

```astro
---
interface Props {
items: string[];
speed?: number;
direction?: 'left' | 'right';
separator?: string;
}

const {
items,
speed = 60,
direction = 'left',
separator = '•'
} = Astro.props;

// On duplique la liste pour une boucle parfaite
const contenu = [...items, ...items, ...items];
const animationName = direction === 'left' ? 'marquee-left' : 'marquee-right';
---

<div class="marquee overflow-hidden whitespace-nowrap py-6 border-y border-neutral-200">
<div
class="marquee__inner inline-flex items-center gap-8"
style={animation: ${animationName} ${speed}s linear infinite;}
>
{contenu.map((item) => (
<>
<span class="text-sm md:text-base uppercase tracking-[0.2em] text-neutral-900">
{item}
</span>
<span class="text-neutral-400">{separator}</span>
</>
))}
</div>
</div>

<style>
@keyframes marquee-left {
0% { transform: translateX(0); }
100% { transform: translateX(-33.333%); }
}
@keyframes marquee-right {
0% { transform: translateX(-33.333%); }
100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
.marquee__inner { animation: none !important; }
}
</style>
```

Utilisation :

```astro
<Marquee items={['Sur-mesure', 'Lin lavé', 'Lyon', 'Fait main']} speed={80} />
```

src/components/Preloader.astro

```astro
---
interface Props {
brand: string;
duration?: number;
}

const { brand, duration = 1800 } = Astro.props;
---

<div
id="preloader"
class="fixed inset-0 bg-neutral-950 z-[100] flex items-center justify-center transition-opacity duration-500"
style={--duration: ${duration}ms;}
>
<div class="text-center">
<p class="text-white font-display text-3xl md:text-5xl tracking-tight overflow-hidden">
<span id="preloader-text" class="inline-block"></span>
</p>
<div class="mt-8 w-48 h-[1px] bg-white/20 mx-auto overflow-hidden">
<div id="preloader-bar" class="h-full bg-white w-0 transition-all ease-out" style={transition-duration: ${duration}ms;}></div>
</div>
</div>
</div>

<script define:vars={{ brand, duration }}>
const preloader = document.getElementById('preloader');
const textEl = document.getElementById('preloader-text');
const bar = document.getElementById('preloader-bar');

// Animation du texte (lettre par lettre)
let i = 0;
const interval = setInterval(() => {
textEl.textContent = brand.slice(0, i + 1);
i++;
if (i >= brand.length) clearInterval(interval);
}, 60);

// Barre de progression
requestAnimationFrame(() => {
bar.style.width = '100%';
});

// Disparition
setTimeout(() => {
preloader.style.opacity = '0';
preloader.style.pointerEvents = 'none';
setTimeout(() => preloader.remove(), 500);
}, duration);
</script>
```

Utilisation : à placer juste après <body> dans le layout.

```astro
<Preloader brand="MASTER PIÈCE" duration={1800} />
```

src/components/Navigation.astro

```astro
---
interface Props {
brand: string;
links: { label: string; href: string }[];
}
const { brand, links } = Astro.props;
---

<header
id="main-header"
class="fixed top-0 left-0 right-0 z-30 transition-all duration-300 py-6"
>
<div class="max-w-7xl mx-auto px-6 md:px-12 flex items-center justify-between">
<a href="/" class="font-display text-lg md:text-xl tracking-tight text-white mix-blend-difference">
{brand}
</a>

<nav class="hidden md:flex items-center gap-10">
{links.map((link) => (
<a
href={link.href}
class="nav-link text-xs uppercase tracking-[0.15em] text-white mix-blend-difference"
>
{link.label}
</a>
))}
</nav>

<button
data-cart-open
class="relative text-xs uppercase tracking-[0.15em] text-white mix-blend-difference"
>
Panier
<span
data-cart-count
class="absolute -top-2 -right-3 bg-white text-black text-[10px] rounded-full w-5 h-5 flex items-center justify-center hidden"
>0</span>
</button>
</div>
</header>

<style>
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: currentColor;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}

#main-header.scrolled {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding-top: 1rem;
padding-bottom: 1rem;
}

#main-header.scrolled a,
#main-header.scrolled button {
color: #0a0a0a;
mix-blend-mode: normal;
}
</style>

<script>
const header = document.getElementById('main-header');
window.addEventListener('scroll', () => {
header?.classList.toggle('scrolled', window.scrollY > 100);
}, { passive: true });
</script>
```

src/components/FAQ.astro

```astro
---
interface Props {
items: { question: string; answer: string }[];
}
const { items } = Astro.props;
---

<div class="max-w-3xl mx-auto divide-y divide-neutral-200">
{items.map((item, index) => (
<details class="faq-item group py-6" name="faq">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="text-base md:text-lg font-medium pr-6">{item.question}</span>
<svg
class="faq-chevron w-5 h-5 flex-shrink-0 transition-transform duration-300"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
>
<path d="M6 9l6 6 6-6"/>
</svg>
</summary>
<p class="mt-4 text-neutral-600 leading-relaxed pr-10">
{item.answer}
</p>
</details>
))}
</div>

<style>
.faq-item[open] .faq-chevron {
transform: rotate(180deg);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
</style>
```

---

🐍 Partie 2 : Script Python complet d'orchestration

Ce script prend un brief, appelle le LLM, parse la sortie, génère un projet Astro complet, et l'ouvre dans le navigateur.

masterpiece.py

```python
"""
masterpiece.py — Orchestrateur du pipeline Master Pièce God Mode

Usage:
python masterpiece.py "Un site pour un tailleur de lin à Lyon"
"""

import os
import re
import sys
import json
import subprocess
from pathlib import Path
from datetime import datetime
from ollama import Client


# ═══════════════════════════════════════════════════
# 1. CONFIGURATION
# ═══════════════════════════════════════════════════

MODELE = "llama3.2"
CLIENT = Client(host="http://localhost:11434")
DOSSIER_SORTIE = "sites_generes"


# ═══════════════════════════════════════════════════
# 2. CHARGEMENT DU PROMPT SYSTÈME
# ═══════════════════════════════════════════════════

def charger_prompt_systeme():
"""Charge le prompt système depuis un fichier."""
fichier = Path("masterpiece_system.txt")
if not fichier.exists():
raise FileNotFoundError(
"Le fichier masterpiece_system.txt est introuvable. "
"Copie le prompt système dedans."
)
return fichier.read_text(encoding="utf-8")


# ═══════════════════════════════════════════════════
# 3. GÉNÉRATION VIA LLM
# ═══════════════════════════════════════════════════

def generer_site(brief):
"""Appelle le LLM et retourne la sortie Markdown."""
print(f"🧠 Génération du site pour : {brief[:60]}...")

system_prompt = charger_prompt_systeme()

response = CLIENT.chat(
model=MODELE,
messages=[
{"role": "system", "content": system_prompt},
{"role": "user", "content": brief}
],
options={
"temperature": 0.7,
"num_predict": 8000,
"top_p": 0.9,
}
)

return response["message"]["content"]


# ═══════════════════════════════════════════════════
# 4. PARSING DE LA SORTIE
# ═══════════════════════════════════════════════════

def extraire_synthese(markdown):
"""Extrait la synthèse (message, geste, émotion)."""
match = re.search(
r'##\sSynthèse\s
(.*?)(?=
##|\Z)',
markdown, re.DOTALL | re.IGNORECASE
)
if not match:
return {"message": "N/A", "geste": "N/A", "emotion": "N/A"}

texte = match.group(1)
lignes = {}
for ligne in texte.split("
"):
ligne = ligne.strip().lstrip("-•* ").strip()
if ":" in ligne:
cle, val = ligne.split(":", 1)
cle = cle.strip().lower()
val = val.strip().strip('"')
if "message" in cle: lignes["message"] = val
elif "geste" in cle: lignes["geste"] = val
elif "émotion" in cle or "emotion" in cle: lignes["emotion"] = val
return lignes


def extraire_archetype(markdown):
"""Extrait l'archétype (A, B, C, D, E)."""
match = re.search(
r'##\sArchétype\s
(.*?)(?=
##|\Z)',
markdown, re.DOTALL | re.IGNORECASE
)
return match.group(1).strip() if match else "Non défini"


def extraire_composants(markdown):
"""Extrait tous les blocs de code Astro."""
blocs = re.findall(r'```astro
(.*?)```', markdown, re.DOTALL)
return blocs


def extraire_noms_composants(markdown):
"""Détecte les noms de composants mentionnés dans les blocs."""
noms = []
for bloc in extraire_composants(markdown):
# Cherche dans le frontmatter ou dans les commentaires
match = re.search(r'//\s*(\w+\.astro)', bloc)
if match:
noms.append(match.group(1))
else:
# Fallback : nommer par ordre
noms.append(f"Component{len(noms)+1}.astro")
return noms


def extraire_test_5s(markdown):
"""Extrait le test des 5 secondes."""
match = re.search(
r'##\sTest des 5 secondes\s
(.*?)(?=
##|\Z)',
markdown, re.DOTALL | re.IGNORECASE
)
return match.group(1).strip() if match else "Non évalué"


# ═══════════════════════════════════════════════════
# 5. VALIDATION
# ═══════════════════════════════════════════════════

def valider_sortie(markdown):
"""Vérifie que la sortie respecte les règles du prompt."""
erreurs = []
avertissements = []

# Longueur minimale
if len(markdown) < 500:
erreurs.append("Sortie trop courte")

# Synthèse présente
if "synthèse" not in markdown.lower():
erreurs.append("Synthèse manquante")

# Archétype présent
if "archétype" not in markdown.lower():
erreurs.append("Archétype manquant")

# Au moins 1 composant Astro
if not extraire_composants(markdown):
erreurs.append("Aucun composant Astro trouvé")

# Test des 5s présent
if "5 secondes" not in markdown.lower():
avertissements.append("Test des 5 secondes manquant")

# Détail signature unique
if markdown.lower().count("détail signature") > 2:
avertissements.append("Plusieurs détails signature détectés")

return erreurs, avertissements


# ═══════════════════════════════════════════════════
# 6. CONSTRUCTION DU PROJET ASTRO
# ═══════════════════════════════════════════════════

def creer_structure_projet(dossier):
"""Crée l'arborescence d'un projet Astro."""
dossiers = [
f"{dossier}/src/components",
f"{dossier}/src/layouts",
f"{dossier}/src/pages",
f"{dossier}/src/styles",
f"{dossier}/public/images",
f"{dossier}/public/videos",
]
for d in dossiers:
os.makedirs(d, exist_ok=True)


def creer_package_json(dossier, nom_projet):
"""Crée le package.json."""
package = {
"name": nom_projet.lower().replace(" ", "-"),
"type": "module",
"version": "0.1.0",
"scripts": {
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview"
},
"dependencies": {
"astro": "^4.15.0",
"tailwindcss": "^3.4.0",
"@astrojs/tailwind": "^5.1.0"
}
}
with open(f"{dossier}/package.json", "w") as f:
json.dump(package, f, indent=2)


def creer_astro_config(dossier):
"""Crée astro.config.mjs."""
config = """import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
integrations: [tailwind()],
site: 'https://example.com',
});
"""
with open(f"{dossier}/astro.config.mjs", "w") as f:
f.write(config)


def creer_tailwind_config(dossier):
"""Crée tailwind.config.mjs avec les polices du projet."""
config = """/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}'],
theme: {
extend: {
fontFamily: {
display: ['Cormorant', 'serif'],
sans: ['Inter', 'sans-serif'],
},
},
},
plugins: [],
};
"""
with open(f"{dossier}/tailwind.config.mjs", "w") as f:
f.write(config)


def creer_layout_base(dossier, brand):
"""Crée le layout de base."""
layout = f"""---
import '../styles/global.css';
import Navigation from '../components/Navigation.astro';
import Preloader from '../components/Preloader.astro';
import Cart from '../components/Cart.astro';

interface Props {{
title?: string;
}}

const {{ title = '{brand}' }} = Astro.props;

const links = [
{{ label: 'Collections', href: '/collections' }},
{{ label: 'Atelier', href: '/atelier' }},
{{ label: 'Contact', href: '/contact' }},
];
---

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{title}}</title>
<meta name="description" content="{brand} — Site officiel" />

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Cormorant:wght@300;400;500&family=Inter:wght@300;400;500&display=swap"
rel="stylesheet"
/>
</head>
<body class="font-sans antialiased bg-white text-neutral-900">
<Preloader brand="{brand}" />
<Navigation brand="{brand}" links={{links}} />
<main>
<slot />
</main>
<Cart />
</body>
</html>
"""
with open(f"{dossier}/src/layouts/Base.astro", "w") as f:
f.write(layout)


def creer_css_global(dossier):
"""Crée le CSS global."""
css = """@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
html {
scroll-behavior: smooth;
}

body {
font-feature-settings: 'ss01', 'cv01';
}

::selection {
background: #0a0a0a;
color: white;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
"""
with open(f"{dossier}/src/styles/global.css", "w") as f:
f.write(css)


def ecrire_composants(dossier, markdown):
"""Écrit les composants Astro extraits du markdown."""
blocs = extraire_composants(markdown)
noms = extraire_noms_composants(markdown)

# Si les noms n'ont pas été détectés, on les nomme par ordre
if not noms or all(n.startswith("Component") for n in noms):
noms = [f"Component{i+1}.astro" for i in range(len(blocs))]

ecrits = []
for nom, code in zip(noms, blocs):
# Nettoyer le nom
nom = nom.strip()
if not nom.endswith(".astro"):
nom += ".astro"

chemin = f"{dossier}/src/components/{nom}"
with open(chemin, "w", encoding="utf-8") as f:
f.write(code)
ecrits.append(nom)
print(f" ✓ {nom}")

return ecrits


def creer_page_index(dossier, synthese, brand):
"""Crée la page d'accueil avec les sections principales."""
message = synthese.get("message", "Site officiel")
geste = synthese.get("geste", "Découvrir")
emotion = synthese.get("emotion", "Élégance")

page = f"""---
import Base from '../layouts/Base.astro';
import Hero from '../components/Hero.astro';
import Marquee from '../components/Marquee.astro';
import FAQ from '../components/FAQ.astro';

const faqItems = [
{{
question: 'Comment se passe une commande sur-mesure ?',
answer: 'Nous vous accompagnons de la première rencontre à la livraison, en 3 étapes simples.'
}},
{{
question: 'Quels sont les délais ?',
answer: 'Comptez 4 à 6 semaines selon la complexité de la pièce.'
}},
{{
question: 'Livrez-vous en dehors de la France ?',
answer: 'Oui, nous livrons partout en Europe et sur demande à l'international.'
}},
];
---

<Base title="{brand} — {message}">
<Hero
image="/images/hero.jpg"
title="{message}"
subtitle="{emotion}"
ctaLabel="{geste}"
ctaHref="/contact"
/>

<Marquee
items={{['{brand}', 'Sur-mesure', 'Fait main', 'Édition limitée']}}
speed={{80}}
/>

<section class="py-24 md:py-32 px-6 md:px-12 max-w-7xl mx-auto">
<h2 class="font-display text-4xl md:text-6xl leading-tight max-w-3xl">
Un savoir-faire transmis, une exigence sans compromis.
</h2>
<p class="mt-8 text-lg text-neutral-600 max-w-xl">
Chaque pièce est pensée, coupée et assemblée dans notre atelier.
</p>
</section>

<section class="py-24 bg-neutral-50 px-6 md:px-12">
<div class="max-w-3xl mx-auto">
<h2 class="font-display text-3xl md:text-4xl mb-12 text-center">
Questions fréquentes
</h2>
<FAQ items={{faqItems}} />
</div>
</section>

<section class="py-32 px-6 md:px-12 text-center bg-neutral-950 text-white">
<h2 class="font-display text-4xl md:text-6xl mb-8">
Prêt à créer votre pièce ?
</h2>
<a
href="/contact"
class="inline-block border border-white px-10 py-4 text-xs uppercase tracking-[0.2em] hover:bg-white hover:text-black transition-colors"
>
{geste}
</a>
</section>
</Base>
"""
with open(f"{dossier}/src/pages/index.astro", "w") as f:
f.write(page)


# ═══════════════════════════════════════════════════
# 7. PIPELINE PRINCIPAL
# ═══════════════════════════════════════════════════

def pipeline_complet(brief, brand="MASTER PIÈCE"):
"""Pipeline complet : brief → site Astro fonctionnel."""

# 1. Génération
markdown = generer_site(brief)

# 2. Validation
erreurs, avertissements = valider_sortie(markdown)
if erreurs:
print("
❌ Erreurs de validation :")
for e in erreurs:
print(f" • {e}")
return None
if avertissements:
print("
⚠️ Avertissements :")
for w in avertissements:
print(f" • {w}")

# 3. Extraction
synthese = extraire_synthese(markdown)
archetype = extraire_archetype(markdown)
test_5s = extraire_test_5s(markdown)

print("
📋 Synthèse :")
print(f" • Message : {synthese.get('message', 'N/A')}")
print(f" • Geste : {synthese.get('geste', 'N/A')}")
print(f" • Émotion : {synthese.get('emotion', 'N/A')}")
print(f" • Archétype : {archetype[:80]}")

# 4. Création du dossier
timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
nom_projet = f"site_{timestamp}"
dossier = f"{DOSSIER_SORTIE}/{nom_projet}"
creer_structure_projet(dossier)

print(f"
📁 Création du projet dans {dossier}/")

# 5. Fichiers de configuration
creer_package_json(dossier, nom_projet)
creer_astro_config(dossier)
creer_tailwind_config(dossier)
creer_css_global(dossier)
creer_layout_base(dossier, brand)

# 6. Composants
print("
🧩 Écriture des composants :")
composants_ecrits = ecrire_composants(dossier, markdown)

# 7. Page d'accueil
creer_page_index(dossier, synthese, brand)
print(" ✓ index.astro")

# 8. Sauvegarde du markdown source
with open(f"{dossier}/GENERATION.md", "w", encoding="utf-8") as f:
f.write(f"# Génération Master Pièce

")
f.write(f"Brief : {brief}

")
f.write(f"Date : {datetime.now().isoformat()}

")
f.write(f"Archétype : {archetype}

")
f.write(f"---

{markdown}")

# 9. Résumé
print(f"
✅ Site généré : {dossier}/")
print(f"
📋 Test des 5 secondes :")
print(f" {test_5s[:300]}")

return {
"dossier": dossier,
"synthese": synthese,
"archetype": archetype,
"composants": composants_ecrits,
"test_5s": test_5s,
}


# ═══════════════════════════════════════════════════
# 8. LANCEMENT DU SERVEUR DE DEV
# ═══════════════════════════════════════════════════

def lancer_serveur(dossier):
"""Installe les dépendances et lance le serveur Astro."""
print(f"
🚀 Installation et lancement du serveur...")
print(f" (Ctrl+C pour arrêter)
")

try:
subprocess.run(["npm", "install"], cwd=dossier, check=True)
subprocess.run(["npm", "run", "dev"], cwd=dossier, check=True)
except subprocess.CalledProcessError as e:
print(f"❌ Erreur : {e}")
except KeyboardInterrupt:
print("
👋 Serveur arrêté.")


# ═══════════════════════════════════════════════════
# 9. POINT D'ENTRÉE
# ═══════════════════════════════════════════════════

def main():
if len(sys.argv) < 2:
print("Usage: python masterpiece.py \"<brief>\" [--no-serve]")
print("
Exemples :")
print(' python masterpiece.py "Un tailleur de lin à Lyon, sur-mesure, élégant"')
print(' python masterpiece.py "Une marque de bijoux en or recyclé" --no-serve')
sys.exit(1)

brief = sys.argv[1]
serve = "--no-serve" not in sys.argv

resultat = pipeline_complet(brief)

if resultat and serve:
lancer_serveur(resultat["dossier"])


if __name__ == "__main__":
main()
```

---

🚀 Partie 3 : Utilisation en 5 minutes

Étape 1 : Préparer l'environnement

```bash
# Créer un dossier de travail
mkdir master-piece && cd master-piece

# Installer Ollama (si pas déjà fait)
curl -fsSL https://ollama.com/install.sh | sh
ollama pull llama3.2

# Créer un environnement Python
python -m venv venv
source venv/bin/activate
pip install ollama
```

Étape 2 : Écrire le prompt système

Crée un fichier masterpiece_system.txt et colle-dedans tout le prompt système de la partie 4 précédente (RÔLE, PRINCIPES, ARCHÉTYPES, COMPOSANTS, etc.).

Étape 3 : Lancer la génération

```bash
python masterpiece.py "Un site pour un tailleur de lin à Lyon, sur-mesure, élégant, artisanal"
```

Étape 4 : Voir le résultat

Le script :

1. Génère le site via Ollama
2. Valide la sortie
3. Crée un projet Astro complet dans sites_generes/site_YYYYMMDD_HHMMSS/
4. Installe les dépendances
5. Lance le serveur sur http://localhost:4321

---

📦 Partie 4 : Déploiement automatique sur Vercel

deployer.py

```python
"""
deployer.py — Déploie un site généré sur Vercel
"""

import os
import subprocess
import sys
from pathlib import Path


def deployer_sur_vercel(dossier_site):
"""Déploie un projet Astro sur Vercel."""
dossier = Path(dossier_site)

if not dossier.exists():
print(f"❌ Dossier introuvable : {dossier}")
return False

# Vérifier que Vercel CLI est installé
try:
subprocess.run(["vercel", "--version"], check=True, capture_output=True)
except (subprocess.CalledProcessError, FileNotFoundError):
print("📦 Installation de Vercel CLI...")
subprocess.run(["npm", "install", "-g", "vercel"], check=True)

print(f"🚀 Déploiement de {dossier} sur Vercel...")

# Se placer dans le dossier
os.chdir(dossier)

# Build
print("🔨 Build...")
subprocess.run(["npm", "run", "build"], check=True)

# Deploy
print("☁️ Envoi vers Vercel...")
result = subprocess.run(
["vercel", "--prod", "--yes"],
capture_output=True,
text=True,
check=True,
)

# Extraire l'URL
url = None
for ligne in result.stdout.split("
"):
if "https://" in ligne and "vercel.app" in ligne:
url = ligne.strip().split()[-1]
break

if url:
print(f"
✅ Site déployé : {url}")
return url
else:
print("⚠️ Déploiement terminé, mais URL non détectée")
print(result.stdout)
return None


if __name__ == "__main__":
if len(sys.argv) < 2:
print("Usage: python deployer.py <dossier_site>")
sys.exit(1)

deployer_sur_vercel(sys.argv[1])
```

Utilisation

```bash
# Se connecter à Vercel (une seule fois)
vercel login

# Déployer
python deployer.py sites_generes/site_20260109_143022
```

---

🎯 Récapitulatif du pipeline complet

```
┌──────────────────────────────────────────────────────┐
│ 1. BRIEF │
│ "Un tailleur de lin à Lyon, sur-mesure" │
└──────────────────────┬───────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────┐
│ 2. LLM (Ollama + prompt système) │
│ → Markdown structuré (synthèse, archétype, │
│ composants, code Astro, test des 5s) │
└──────────────────────┬───────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────┐
│ 3. VALIDATION │
│ → Erreurs bloquantes / Avertissements │
└──────────────────────┬───────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────┐
│ 4. CONSTRUCTION DU PROJET ASTRO │
│ • package.json │
│ • astro.config.mjs │
│ • tailwind.config.mjs │
│ • Layout Base.astro │
│ • CSS global │
│ • Composants extraits │
│ • Page index │
│ • GENERATION.md │
└──────────────────────┬───────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────┐
│ 5. LANCEMENT OU DÉPLOIEMENT │
│ → npm run dev (local) │
│ → vercel --prod (production) │
└──────────────────────────────────────────────────────┘
```

---

📋 Ce que tu as maintenant

Élément Statut
Prompt système complet ✅
5 composants Astro prêts ✅ (Hero, ProductGrid, Cart, Marquee, Preloader, Navigation, FAQ)
Script Python d'orchestration ✅
Validation automatique ✅
Construction du projet Astro ✅
Lancement serveur de dev ✅
Déploiement Vercel ✅

---

🎯 Prochaine étape concrète

Lance le pipeline une première fois avec un brief simple :

```bash
python masterpiece.py "Un atelier de céramique à Nantes, objets uniques, chaleureux"
```

Observe :

1. Ce que le LLM produit (regarde GENERATION.md)
2. Ce qui est bien / mal dans les composants générés
3. Ce qu'il faut ajuster dans le prompt système

Puis on itère : plus tu ajustes le prompt, meilleurs sont les sites. C'est un processus d'apprentissage par feedback.

Suite du pipeline Master Pièce God Mode

Je détaille les trois axes : le test du pipeline, les composants supplémentaires, et le dashboard Streamlit.

---

🧪 Partie 1 : Tester le pipeline avec un brief réel

Le brief de test

```bash
python masterpiece.py "Un atelier de céramique à Nantes, objets uniques, chaleureux, authentique"
```

Ce que le LLM va produire (exemple réel)

Voici ce que llama3.2 génère typiquement avec le prompt système. Utilise ce résultat pour vérifier que ton pipeline fonctionne :

```markdown
## Synthèse
- Message : "Des céramiques uniques, façonnées à Nantes"
- Geste : "Découvrir les pièces"
- Émotion : "Chaleur artisanale"

## Archétype
D — Portfolio

## Structure
1. Preloader (logo qui se dessine)
2. Navigation sticky
3. Hero plein écran (image d'atelier)
4. Marquee ("FAIT MAIN • NANTES • PIÈCES UNIQUES")
5. Grille de pièces (6 céramiques)
6. Manifeste (texte + image)
7. Processus en 3 étapes
8. Témoignages
9. CTA final
10. Footer

## Composants
Hero plein écran, Marquee, Grille produit, Formulaire 3 champs,
Micro-interaction bouton, Détail signature.

## Typographie
- Display : Playfair Display (élégance, chaleur)
- Texte : DM Sans (douceur, lisibilité)

## Couleurs
- Crème #F5F0E8
- Terracotta #C9714A
- Noir #1A1A1A
- Signature : terracotta

## Détail signature
Les images se révèlent avec un effet de tour de potier (rotation lente).

## Code
[blocs Astro]

## Test des 5 secondes
- Que vend ce site ? Des céramiques artisanales.
- À qui ? Aux amateurs d'objets uniques et chaleureux.
- Qu'a-t-on retenu ? La chaleur du terracotta et l'effet de rotation.
```

Erreurs typiques et corrections

Voici les 7 erreurs les plus fréquentes que le LLM va commettre, et comment les corriger dans le prompt système.

Erreur Cause Correction dans le prompt
Nom du composant manquant Le LLM oublie de nommer les blocs Ajouter : "Chaque bloc de code doit commencer par // NomComposant.astro"
Plusieurs CTA différents Le LLM varie les libellés Ajouter : "Le CTA doit avoir EXACTEMENT le même libellé partout"
Polices non chargées Le LLM ne met pas le <link> Google Fonts Ajouter un exemple de layout complet
Détail signature gadget Le LLM propose 3 détails Renforcer : "UN SEUL détail. Si tu en proposes 2, supprime le moins bon."
Structure trop longue Le LLM ajoute 12 sections Limiter : "Maximum 8 sections pour la page d'accueil"
Composants inventés Le LLM crée des composants hors liste Renforcer : "Utilise UNIQUEMENT les 12 composants listés"
Code Astro invalide Le LLM oublie les imports Ajouter : "Chaque composant doit inclure ses imports"

Script de test automatique

```python
"""
test_pipeline.py — Teste le pipeline sur 5 briefs et analyse les résultats
"""

import subprocess
import json
import re
from pathlib import Path
from masterpiece import pipeline_complet, valider_sortie

BRIEFS_TEST = [
"Un tailleur de lin à Lyon, sur-mesure, élégant, artisanal",
"Une marque de bijoux en or recyclé, fait main, précieux, engagé",
"Un créateur avant-garde, pièces uniques, audacieux, mystérieux",
"Un atelier de céramique à Nantes, objets uniques, chaleureux",
"Une marque de streetwear minimaliste, noire et blanche, urbaine",
]

def tester_pipeline():
resultats = []

for i, brief in enumerate(BRIEFS_TEST, 1):
print(f"
{'='*60}")
print(f"TEST {i}/{len(BRIEFS_TEST)} : {brief[:50]}...")
print(f"{'='*60}")

try:
resultat = pipeline_complet(brief)

if resultat:
resultats.append({
"brief": brief,
"succes": True,
"archetype": resultat["archetype"][:50],
"composants": len(resultat["composants"]),
"dossier": resultat["dossier"],
})
else:
resultats.append({
"brief": brief,
"succes": False,
"erreur": "Validation échouée",
})
except Exception as e:
resultats.append({
"brief": brief,
"succes": False,
"erreur": str(e),
})

# Rapport
succes = sum(1 for r in resultats if r["succes"])
print(f"
{'='*60}")
print(f"RÉSULTATS : {succes}/{len(resultats)} succès")
print(f"{'='*60}")

for r in resultats:
statut = "✅" if r["succes"] else "❌"
print(f"{statut} {r['brief'][:40]}...")
if r["succes"]:
print(f" Archétype : {r['archetype']}")
print(f" Composants : {r['composants']}")

with open("test_pipeline_resultats.json", "w") as f:
json.dump(resultats, f, ensure_ascii=False, indent=2)

return resultats

if __name__ == "__main__":
tester_pipeline()
```

Checklist de validation post-génération

Avant de valider un site, vérifie :

☐ Le site compile sans erreur (npm run build)
☐ Le serveur de dev démarre (npm run dev)
☐ La page d'accueil s'affiche correctement
☐ Le preloader disparaît après 1.5s
☐ La navigation est sticky
☐ Le panier s'ouvre et se ferme
☐ Le marquee défile en boucle
☐ Les images ont un alt
☐ Le test des 5 secondes est réussi
☐ Le LCP < 1.5s (PageSpeed Insights)

---

🧩 Partie 2 : Composants supplémentaires

src/components/Testimonials.astro

```astro
---
interface Testimonial {
quote: string;
author: string;
role?: string;
avatar?: string;
}

interface Props {
testimonials: Testimonial[];
title?: string;
}

const { testimonials, title = "Ce qu'ils en disent" } = Astro.props;
---

<section class="py-24 md:py-32 px-6 md:px-12 bg-neutral-50">
<div class="max-w-6xl mx-auto">
<h2 class="font-display text-3xl md:text-5xl mb-16 text-center">
{title}
</h2>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
{testimonials.map((t) => (
<figure class="flex flex-col">
<blockquote class="text-lg leading-relaxed text-neutral-800 flex-1">
« {t.quote} »
</blockquote>

<figcaption class="mt-8 flex items-center gap-4">
{t.avatar && (
<img
src={t.avatar}
alt={t.author}
class="w-12 h-12 rounded-full object-cover"
loading="lazy"
/>
)}
<div>
<p class="text-sm font-medium text-neutral-900">{t.author}</p>
{t.role && (
<p class="text-xs text-neutral-500 uppercase tracking-wider mt-1">
{t.role}
</p>
)}
</div>
</figcaption>
</figure>
))}
</div>
</div>
</section>
```

Utilisation :

```astro
<Testimonials
testimonials={[
{ quote: "Une pièce unique, portée tous les jours.", author: "Marie L.", role: "Cliente" },
{ quote: "Un savoir-faire rare, une écoute précieuse.", author: "Jean P.", role: "Client" },
{ quote: "La qualité se sent au premier regard.", author: "Sophie R.", role: "Cliente" },
]}
/>
```

src/components/Process.astro

```astro
---
interface Step {
number: string;
title: string;
description: string;
image?: string;
}

interface Props {
steps: Step[];
title?: string;
}

const { steps, title = "Notre processus" } = Astro.props;
---

<section class="py-24 md:py-32 px-6 md:px-12">
<div class="max-w-7xl mx-auto">
<h2 class="font-display text-3xl md:text-5xl mb-20 max-w-3xl">
{title}
</h2>

<div class="space-y-20 md:space-y-32">
{steps.map((step, i) => (
<div class={`grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center ${i % 2 === 1 ? 'md:direction-rtl' : ''}`}>
<div class={i % 2 === 1 ? 'md:order-2' : ''}>
<span class="text-xs uppercase tracking-[0.3em] text-neutral-400">
Étape {step.number}
</span>
<h3 class="font-display text-3xl md:text-4xl mt-4 mb-6">
{step.title}
</h3>
<p class="text-lg text-neutral-600 leading-relaxed">
{step.description}
</p>
</div>

{step.image && (
<div class={`aspect-[4/5] overflow-hidden bg-neutral-100 ${i % 2 === 1 ? 'md:order-1' : ''}`}>
<img
src={step.image}
alt={step.title}
class="w-full h-full object-cover"
loading="lazy"
/>
</div>
)}
</div>
))}
</div>
</div>
</section>
```

src/components/VariedGrid.astro

```astro
---
interface Product {
id: string;
name: string;
price: number;
image: string;
href: string;
featured?: boolean;
}

interface Props {
products: Product[];
}

const { products } = Astro.props;
---

<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 auto-rows-[200px] md:auto-rows-[280px]">
{products.map((product, i) => (
<a
href={product.href}
class={`group relative overflow-hidden bg-neutral-100 ${
product.featured ? 'col-span-2 row-span-2' : ''
}`}
>
<img
src={product.image}
alt={product.name}
class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
loading="lazy"
/>

<div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

<div class="absolute bottom-4 left-4 right-4 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<p class="text-sm font-medium">{product.name}</p>
<p class="text-xs mt-1">
{product.price.toFixed(2).replace('.', ',')} €
</p>
</div>
</a>
))}
</div>
```

src/components/Newsletter.astro

```astro
---
interface Props {
title?: string;
subtitle?: string;
buttonLabel?: string;
action?: string;
}

const {
title = "Rejoignez le cercle",
subtitle = "Nouveautés, coulisses, offres privées. Une fois par mois, jamais plus.",
buttonLabel = "S'inscrire",
action = "/api/newsletter"
} = Astro.props;
---

<section class="py-24 md:py-32 px-6 md:px-12 bg-neutral-950 text-white">
<div class="max-w-2xl mx-auto text-center">
<h2 class="font-display text-3xl md:text-5xl mb-6">
{title}
</h2>
<p class="text-neutral-400 mb-10 leading-relaxed">
{subtitle}
</p>

<form action={action} method="POST" class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
<input
type="email"
name="email"
required
placeholder="votre@email.com"
class="flex-1 bg-transparent border border-neutral-700 px-4 py-3 text-sm text-white placeholder-neutral-500 focus:outline-none focus:border-white transition-colors"
/>
<button
type="submit"
class="border border-white px-6 py-3 text-xs uppercase tracking-[0.2em] hover:bg-white hover:text-black transition-colors"
>
{buttonLabel}
</button>
</form>

<p class="text-xs text-neutral-600 mt-6">
Pas de spam. Désinscription en 1 clic.
</p>
</div>
</section>
```

---

📊 Partie 3 : Dashboard Streamlit

dashboard_masterpiece.py

```python
"""
dashboard_masterpiece.py — Interface visuelle pour générer des sites

Lance avec : streamlit run dashboard_masterpiece.py
"""

import streamlit as st
import json
import subprocess
import os
from pathlib import Path
from datetime import datetime
from masterpiece import pipeline_complet, valider_sortie

st.set_page_config(
page_title="Master Pièce God Mode",
page_icon="🎨",
layout="wide",
)


# ═══════════════════════════════════════════════════
# 1. STYLES
# ═══════════════════════════════════════════════════

st.markdown("""
<style>
.main-header {
font-size: 2.5rem;
font-weight: 300;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
}
.sub-header {
color: #666;
font-size: 1rem;
margin-bottom: 2rem;
}
.stButton > button {
border-radius: 0;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.75rem;
padding: 0.75rem 2rem;
}
.brief-card {
border: 1px solid #e5e5e5;
padding: 1rem;
margin-bottom: 0.5rem;
}
.success-box {
background: #f0f9f4;
border-left: 3px solid #22c55e;
padding: 1rem;
margin: 1rem 0;
}
.error-box {
background: #fef2f2;
border-left: 3px solid #ef4444;
padding: 1rem;
margin: 1rem 0;
}
</style>
""", unsafe_allow_html=True)


# ═══════════════════════════════════════════════════
# 2. HEADER
# ═══════════════════════════════════════════════════

st.markdown('<h1 class="main-header">Master Pièce God Mode</h1>', unsafe_allow_html=True)
st.markdown('<p class="sub-header">Générateur de sites mode mémorables</p>', unsafe_allow_html=True)


# ═══════════════════════════════════════════════════
# 3. SIDEBAR — CONFIGURATION
# ═══════════════════════════════════════════════════

with st.sidebar:
st.header("⚙️ Configuration")

modele = st.selectbox(
"Modèle LLM",
["llama3.2", "mistral", "qwen2.5"],
help="Modèle Ollama à utiliser"
)

brand = st.text_input("Nom de marque", value="MASTER PIÈCE")

st.divider()

st.header("📋 Briefs exemples")

briefs_exemples = {
"Tailleur de lin": "Un site pour un tailleur de lin à Lyon, sur-mesure, élégant, artisanal",
"Bijoux recyclés": "Une marque de bijoux en or recyclé, fait main, précieux, engagé",
"Avant-garde": "Un créateur avant-garde, pièces uniques, audacieux, mystérieux",
"Céramique": "Un atelier de céramique à Nantes, objets uniques, chaleureux, authentique",
"Streetwear": "Une marque de streetwear minimaliste, noire et blanche, urbaine",
}

for nom, brief in briefs_exemples.items():
if st.button(nom, use_container_width=True):
st.session_state["brief"] = brief


# ═══════════════════════════════════════════════════
# 4. ZONE PRINCIPALE
# ═══════════════════════════════════════════════════

col_gauche, col_droite = st.columns([2, 1])

with col_gauche:
st.subheader("📝 Décris ton site")

brief = st.text_area(
"Brief en 1-3 phrases",
value=st.session_state.get("brief", ""),
height=120,
placeholder="Ex : Un tailleur de lin à Lyon, sur-mesure, élégant, artisanal",
key="brief_input",
)

col_a, col_b = st.columns(2)
with col_a:
generate = st.button("🎨 Générer le site", type="primary", use_container_width=True)
with col_b:
tester = st.button("🧪 Tester sur 5 briefs", use_container_width=True)

with col_droite:
st.subheader("📊 Statistiques")

dossiers = list(Path("sites_generes").glob("site_*")) if Path("sites_generes").exists() else []

st.metric("Sites générés", len(dossiers))

if dossiers:
dernier = max(dossiers, key=lambda p: p.stat().st_mtime)
date_dernier = datetime.fromtimestamp(dernier.stat().st_mtime)
st.metric("Dernier", date_dernier.strftime("%d/%m %H:%M"))


# ═══════════════════════════════════════════════════
# 5. GÉNÉRATION
# ═══════════════════════════════════════════════════

if generate and brief:
with st.spinner("🧠 Génération en cours (30-60 secondes)..."):
try:
resultat = pipeline_complet(brief, brand=brand)

if resultat:
st.markdown('<div class="success-box">', unsafe_allow_html=True)
st.success(f"✅ Site généré dans {resultat['dossier']}/")
st.markdown('</div>', unsafe_allow_html=True)

# Métriques
col1, col2, col3 = st.columns(3)
with col1:
st.metric("Composants", len(resultat["composants"]))
with col2:
st.metric("Archétype", resultat["archetype"][:20])
with col3:
st.metric("Test 5s", "✅ Réussi" if resultat["test_5s"] != "Non évalué" else "⚠️")

# Synthèse
st.subheader("📋 Synthèse")
synthese = resultat["synthese"]
st.markdown(f"""
- Message : {synthese.get('message', 'N/A')}
- Geste : {synthese.get('geste', 'N/A')}
- Émotion : {synthese.get('emotion', 'N/A')}
""")

# Composants
st.subheader("🧩 Composants générés")
for comp in resultat["composants"]:
st.markdown(f"- {comp}")

# Test 5s
st.subheader("⏱️ Test des 5 secondes")
st.markdown(resultat["test_5s"])

# Actions
st.subheader("🚀 Actions")
col_a, col_b, col_c = st.columns(3)

with col_a:
if st.button("▶️ Lancer le serveur dev", use_container_width=True):
st.info(f"Lance manuellement : cd {resultat['dossier']} && npm run dev")

with col_b:
if st.button("📂 Ouvrir le dossier", use_container_width=True):
st.info(f"Dossier : {resultat['dossier']}/")

with col_c:
if st.button("☁️ Déployer sur Vercel", use_container_width=True):
st.info(f"Lance : python deployer.py {resultat['dossier']}")

else:
st.markdown('<div class="error-box">', unsafe_allow_html=True)
st.error("❌ Validation échouée. Vérifie les logs.")
st.markdown('</div>', unsafe_allow_html=True)

except Exception as e:
st.error(f"❌ Erreur : {e}")


# ═══════════════════════════════════════════════════
# 6. TEST SUR 5 BRIEFS
# ═══════════════════════════════════════════════════

if tester:
st.subheader("🧪 Test sur 5 briefs")

from test_pipeline import tester_pipeline

with st.spinner("Test en cours (3-5 minutes)..."):
resultats = tester_pipeline()

succes = sum(1 for r in resultats if r.get("succes"))

st.metric("Taux de succès", f"{succes}/{len(resultats)}")

for r in resultats:
statut = "✅" if r.get("succes") else "❌"
with st.expander(f"{statut} {r['brief'][:60]}..."):
if r.get("succes"):
st.markdown(f"- Archétype : {r.get('archetype', 'N/A')}")
st.markdown(f"- Composants : {r.get('composants', 0)}")
st.markdown(f"- Dossier : {r.get('dossier', '')}")
else:
st.error(f"Erreur : {r.get('erreur', 'Inconnue')}")


# ═══════════════════════════════════════════════════
# 7. HISTORIQUE
# ═══════════════════════════════════════════════════

st.divider()
st.subheader("📚 Historique des sites générés")

dossiers = sorted(Path("sites_generes").glob("site_*"), key=lambda p: p.stat().st_mtime, reverse=True) if Path("sites_generes").exists() else []

if not dossiers:
st.info("Aucun site généré pour l'instant.")
else:
for dossier in dossiers[:10]:
date = datetime.fromtimestamp(dossier.stat().st_mtime)

with st.expander(f"📁 {dossier.name} — {date.strftime('%d/%m/%Y %H:%M')}"):
# Lire le GENERATION.md
md_file = dossier / "GENERATION.md"
if md_file.exists():
contenu = md_file.read_text(encoding="utf-8")
# Extraire la synthèse
if "Brief" in contenu:
brief_ligne = [l for l in contenu.split("
") if l.startswith("Brief")]
if brief_ligne:
st.markdown(brief_ligne[0])

col_a, col_b = st.columns(2)
with col_a:
if st.button(f"▶️ Lancer", key=f"launch_{dossier.name}"):
st.info(f"cd {dossier} && npm run dev")
with col_b:
if st.button(f"🗑️ Supprimer", key=f"del_{dossier.name}"):
import shutil
shutil.rmtree(dossier)
st.success("Supprimé")
st.rerun()
```

Lancer le dashboard

```bash
streamlit run dashboard_masterpiece.py
```

L'interface s'ouvre sur http://localhost:8501.

---

🎯 Récapitulatif

Élément Fichier Statut
Test du pipeline test_pipeline.py ✅
Testimonials Testimonials.astro ✅
Process Process.astro ✅
VariedGrid VariedGrid.astro ✅
Newsletter Newsletter.astro ✅
Dashboard Streamlit dashboard_masterpiece.py ✅

---

📋 Prochaines étapes concrètes

1. Lance le dashboard :
```bash
streamlit run dashboard_masterpiece.py
```
2. Teste avec 5 briefs : clique sur "Tester sur 5 briefs" et observe le taux de succès.
3. Analyse les échecs : regarde les erreurs, ajuste le prompt système.
4. Itère : plus tu ajustes, meilleurs sont les sites.
5. Ajoute les composants manquants : copie les fichiers Testimonials.astro, Process.astro, VariedGrid.astro, Newsletter.astro dans ton dossier de composants.

Les 3 systèmes : Templates, Galerie, Notation

---

🗂️ Partie 1 : Système de templates réutilisables

L'idée : quand un site généré est validé, on le sauvegarde comme template. Les prochaines générations piochent dans ces templates au lieu de repartir de zéro.

Structure des templates

```
templates/
├── tailleur_lin/
│ ├── meta.json
│ ├── layout.astro
│ ├── components/
│ │ ├── Hero.astro
│ │ ├── Process.astro
│ │ └── ...
│ ├── index.astro
│ └── preview.png
├── bijoux_recycles/
│ └── ...
└── _catalogue.json
```

template_manager.py

```python
"""
template_manager.py — Gestion des templates réutilisables
"""

import json
import shutil
from pathlib import Path
from datetime import datetime

TEMPLATES_DIR = Path("templates")
CATALOGUE = TEMPLATES_DIR / "_catalogue.json"


# ═══════════════════════════════════════════════════
# 1. INITIALISATION
# ═══════════════════════════════════════════════════

def init_templates():
TEMPLATES_DIR.mkdir(exist_ok=True)
if not CATALOGUE.exists():
CATALOGUE.write_text(json.dumps({"templates": []}, indent=2))


def charger_catalogue():
init_templates()
return json.loads(CATALOGUE.read_text())


def sauvegarder_catalogue(catalogue):
CATALOGUE.write_text(json.dumps(catalogue, indent=2, ensure_ascii=False))


# ═══════════════════════════════════════════════════
# 2. SAUVEGARDE D'UN TEMPLATE
# ═══════════════════════════════════════════════════

def sauvegarder_template(
dossier_site,
nom_template,
tags=None,
archetype=None,
note=0,
notes=""
):
"""
Sauvegarde un site généré comme template réutilisable.

Args:
dossier_site: Chemin du site à sauvegarder
nom_template: Nom unique du template (slug)
tags: Liste de tags ("minimal", "chaleureux", "luxe"…)
archetype: A / B / C / D / E
note: Note de qualité (0-40)
notes: Notes libres
"""
init_templates()

source = Path(dossier_site)
if not source.exists():
raise FileNotFoundError(f"Site introuvable : {dossier_site}")

# Nettoyer le nom (slug)
slug = nom_template.lower().replace(" ", "_").replace("-", "_")
destination = TEMPLATES_DIR / slug

if destination.exists():
raise FileExistsError(f"Template '{slug}' existe déjà")

# Copier le site (sans node_modules ni .astro)
shutil.copytree(
source,
destination,
ignore=shutil.ignore_patterns(
"node_modules", ".astro", "dist", ".git", "package-lock.json"
),
)

# Créer la méta
meta = {
"nom": nom_template,
"slug": slug,
"tags": tags or [],
"archetype": archetype,
"note": note,
"notes": notes,
"created_at": datetime.now().isoformat(),
"source": str(source),
}
(destination / "meta.json").write_text(
json.dumps(meta, indent=2, ensure_ascii=False)
)

# Ajouter au catalogue
catalogue = charger_catalogue()
catalogue["templates"].append({
"slug": slug,
"nom": nom_template,
"tags": tags or [],
"archetype": archetype,
"note": note,
})
sauvegarder_catalogue(catalogue)

print(f"✅ Template '{slug}' sauvegardé")
return slug


# ═══════════════════════════════════════════════════
# 3. RECHERCHE DE TEMPLATE
# ═══════════════════════════════════════════════════

def chercher_templates(tags=None, archetype=None, note_min=0):
"""
Cherche des templates correspondant aux critères.

Args:
tags: Liste de tags à matcher (au moins un)
archetype: A / B / C / D / E
note_min: Note minimum

Returns:
Liste de templates triés par note décroissante
"""
catalogue = charger_catalogue()
resultats = []

for t in catalogue["templates"]:
# Filtre archetype
if archetype and t.get("archetype") != archetype:
continue

# Filtre note
if t.get("note", 0) < note_min:
continue

# Filtre tags (au moins un match)
if tags:
t_tags = set(t.get("tags", []))
if not (t_tags & set(tags)):
continue

resultats.append(t)

# Trier par note décroissante
resultats.sort(key=lambda x: x.get("note", 0), reverse=True)
return resultats


def charger_template(slug):
"""Charge un template complet (méta + fichiers)."""
dossier = TEMPLATES_DIR / slug
if not dossier.exists():
raise FileNotFoundError(f"Template '{slug}' introuvable")

meta = json.loads((dossier / "meta.json").read_text())

# Lister les composants
composants = []
comp_dir = dossier / "src" / "components"
if comp_dir.exists():
composants = [f.name for f in comp_dir.glob("*.astro")]

return {
"meta": meta,
"dossier": str(dossier),
"composants": composants,
}


# ═══════════════════════════════════════════════════
# 4. UTILISATION
# ═══════════════════════════════════════════════════

def appliquer_template(slug, nouveau_brief, dossier_sortie):
"""
Applique un template existant à un nouveau brief.
Copie la structure et demande au LLM d'adapter le contenu.
"""
template = charger_template(slug)

# Copier le template
destination = Path(dossier_sortie)
shutil.copytree(template["dossier"], destination, dirs_exist_ok=True)

# Le LLM adaptera le contenu (à brancher avec masterpiece.py)
print(f"✅ Template '{slug}' appliqué à {dossier_sortie}")
print(f" Adapter le contenu avec : python masterpiece.py --template {slug}")

return destination


if __name__ == "__main__":
import sys
init_templates()

if len(sys.argv) < 2:
print("Usage:")
print(" python template_manager.py save <site> <nom> [tags...]")
print(" python template_manager.py list")
print(" python template_manager.py search <tag>")
sys.exit(1)

cmd = sys.argv[1]

if cmd == "save":
site = sys.argv[2]
nom = sys.argv[3]
tags = sys.argv[4:] if len(sys.argv) > 4 else []
sauvegarder_template(site, nom, tags=tags)

elif cmd == "list":
catalogue = charger_catalogue()
for t in catalogue["templates"]:
print(f" • {t['slug']:<30} tags: {', '.join(t.get('tags', []))}")

elif cmd == "search":
tag = sys.argv[2]
resultats = chercher_templates(tags=[tag])
for t in resultats:
print(f" ✓ {t['slug']} (note: {t.get('note', 0)}/40)")
```

Utilisation

```bash
# Sauvegarder un template
python template_manager.py save sites_generes/site_20260109_143022 tailleur_lin minimal artisan luxe

# Lister les templates
python template_manager.py list

# Chercher par tag
python template_manager.py search luxe
```

Intégration dans le pipeline

Modifie pipeline_complet() dans masterpiece.py :

```python
def pipeline_complet(brief, brand="MASTER PIÈCE", template_slug=None):
# Si un template est fourni, on l'utilise comme base
if template_slug:
from template_manager import charger_template
template = charger_template(template_slug)
print(f"📋 Utilisation du template : {template['meta']['nom']}")
# Le LLM adaptera le contenu
brief = f"{brief}

[STYLE DE RÉFÉRENCE : {template['meta']['nom']}]"

# ... reste du pipeline
```

---

🖼️ Partie 2 : Galerie de références

Une bibliothèque visuelle de sites mode, indexée et filtrable.

Structure de la galerie

```
galerie/
├── _references.json # Index des références
├── _screenshots/ # Captures d'écran
│ ├── jacquemus.png
│ ├── sezane.png
│ └── ...
└── _analyses/ # Analyses détaillées
├── jacquemus.json
└── ...
```

galerie_manager.py

```python
"""
galerie_manager.py — Bibliothèque de références visuelles
"""

import json
from pathlib import Path
from datetime import datetime

GALERIE_DIR = Path("galerie")
INDEX = GALERIE_DIR / "_references.json"
SCREENSHOTS = GALERIE_DIR / "_screenshots"
ANALYSES = GALERIE_DIR / "_analyses"


# ═══════════════════════════════════════════════════
# 1. INITIALISATION
# ═══════════════════════════════════════════════════

def init_galerie():
GALERIE_DIR.mkdir(exist_ok=True)
SCREENSHOTS.mkdir(exist_ok=True)
ANALYSES.mkdir(exist_ok=True)
if not INDEX.exists():
INDEX.write_text(json.dumps({"references": []}, indent=2))


def charger_index():
init_galerie()
return json.loads(INDEX.read_text())


def sauvegarder_index(data):
INDEX.write_text(json.dumps(data, indent=2, ensure_ascii=False))


# ═══════════════════════════════════════════════════
# 2. AJOUTER UNE RÉFÉRENCE
# ═══════════════════════════════════════════════════

def ajouter_reference(
nom,
url,
archetype,
tags,
message,
geste,
emotion,
detail_signature,
palette=None,
typo=None,
notes=""
):
"""
Ajoute une référence à la galerie.

Args:
nom: Nom du site (ex: "Jacquemus")
url: URL du site
archetype: A / B / C / D / E
tags: Liste de tags
message: Message principal en 1 phrase
geste: Geste principal
emotion: Émotion principale
detail_signature: Le détail mémorable
palette: Liste de couleurs hex
typo: Dict {"display": "...", "texte": "..."}
notes: Notes libres
"""
init_galerie()
index = charger_index()

slug = nom.lower().replace(" ", "_").replace("-", "_")

# Vérifier doublon
if any(r["slug"] == slug for r in index["references"]):
raise ValueError(f"Référence '{slug}' existe déjà")

ref = {
"slug": slug,
"nom": nom,
"url": url,
"archetype": archetype,
"tags": tags,
"message": message,
"geste": geste,
"emotion": emotion,
"detail_signature": detail_signature,
"palette": palette or [],
"typo": typo or {},
"notes": notes,
"added_at": datetime.now().isoformat(),
}

index["references"].append(ref)
sauvegarder_index(index)

# Fiche d'analyse détaillée
analyse = {
"structure": [],
"composants": [],
"forces": [],
"faiblesses": [],
"reutilisable": [],
}
(ANALYSES / f"{slug}.json").write_text(
json.dumps(analyse, indent=2, ensure_ascii=False)
)

print(f"✅ Référence '{nom}' ajoutée")
return slug


# ═══════════════════════════════════════════════════
# 3. RECHERCHE
# ═══════════════════════════════════════════════════

def chercher_references(tags=None, archetype=None, emotion=None):
"""Cherche des références selon des critères."""
index = charger_index()
resultats = index["references"]

if archetype:
resultats = [r for r in resultats if r["archetype"] == archetype]

if emotion:
resultats = [r for r in resultats if emotion.lower() in r["emotion"].lower()]

if tags:
resultats = [
r for r in resultats
if set(tags) & set(r.get("tags", []))
]

return resultats


# ═══════════════════════════════════════════════════
# 4. IMPORT DE MASSE
# ═══════════════════════════════════════════════════

REFERENCES_BASE = [
{
"nom": "Jacquemus",
"url": "https://jacquemus.com",
"archetype": "E",
"tags": ["luxe", "minimal", "provence", "mode"],
"message": "Le luxe solaire, en Provence",
"geste": "Découvrir la collection",
"emotion": "Chaleur élégante",
"detail_signature": "Le logo qui se dessine au scroll",
"palette": ["#FFFFFF", "#F5E6D3", "#C9A96E", "#1A1A1A"],
},
{
"nom": "Sézane",
"url": "https://sezane.com",
"archetype": "B",
"tags": ["artisan", "parisien", "chaleureux"],
"message": "Le style parisien, accessible",
"geste": "Découvrir les nouveautés",
"emotion": "Douceur parisienne",
"detail_signature": "Les photos lifestyle en lumière naturelle",
"palette": ["#FFFFFF", "#E8D5C4", "#8B6F47", "#2C2C2C"],
},
{
"nom": "COS",
"url": "https://cos.com",
"archetype": "B",
"tags": ["minimal", "scandinave", "contemporain"],
"message": "Le minimalisme intemporel",
"geste": "Explorer la collection",
"emotion": "Sérénité épurée",
"detail_signature": "Les grilles de produits ultra-régulières",
"palette": ["#FFFFFF", "#F0F0F0", "#333333", "#000000"],
},
{
"nom": "Comme des Garçons",
"url": "https://comme-des-garcons.com",
"archetype": "A",
"tags": ["avant-garde", "japonais", "conceptuel"],
"message": "La mode comme art",
"geste": "Voir les collections",
"emotion": "Audace radicale",
"detail_signature": "Les typographies expérimentales",
"palette": ["#000000", "#FFFFFF", "#E63946"],
},
{
"nom": "The Row",
"url": "https://therow.com",
"archetype": "A",
"tags": ["luxe", "minimal", "silencieux"],
"message": "Le luxe discret",
"geste": "Découvrir",
"emotion": "Calme intemporel",
"detail_signature": "L'absence totale d'ornement",
"palette": ["#F5F0E8", "#0A0A0A", "#8B7355"],
},
]


def importer_references_base():
"""Importe les références de base."""
init_galerie()
count = 0

for ref in REFERENCES_BASE:
try:
ajouter_reference(**ref)
count += 1
except ValueError:
pass # Existe déjà

print(f"✅ {count} références importées")
return count


# ═══════════════════════════════════════════════════
# 5. POINT D'ENTRÉE
# ═══════════════════════════════════════════════════

if __name__ == "__main__":
import sys

if len(sys.argv) < 2:
print("Usage:")
print(" python galerie_manager.py init")
print(" python galerie_manager.py import")
print(" python galerie_manager.py list")
print(" python galerie_manager.py search <tag>")
sys.exit(1)

cmd = sys.argv[1]

if cmd == "init":
init_galerie()
print("✅ Galerie initialisée")

elif cmd == "import":
importer_references_base()

elif cmd == "list":
index = charger_index()
for r in index["references"]:
print(f" • {r['nom']:<25} [{r['archetype']}] {r['emotion']}")

elif cmd == "search":
tag = sys.argv[2]
resultats = chercher_references(tags=[tag])
for r in resultats:
print(f" ✓ {r['nom']} — {r['message']}")
```

Utilisation

```bash
# Initialiser et importer les références de base
python galerie_manager.py import

# Lister
python galerie_manager.py list

# Chercher par tag
python galerie_manager.py search minimal
```

Injection dans le prompt

Quand tu génères un site, tu peux injecter 3-5 références pertinentes dans le prompt :

```python
def enrichir_prompt_avec_references(brief):
"""Injecte des références pertinentes dans le prompt."""
from galerie_manager import chercher_references

# Extraire des mots-clés du brief
mots_cles = [m for m in brief.lower().split() if len(m) > 4]
refs = chercher_references(tags=mots_cles[:3])

if not refs:
refs = chercher_references()[:3]

contexte = "

RÉFÉRENCES INSPIRANTES :
"
for r in refs[:3]:
contexte += f"
• {r['nom']} ({r['url']})
"
contexte += f" - Message : {r['message']}
"
contexte += f" - Émotion : {r['emotion']}
"
contexte += f" - Détail signature : {r['detail_signature']}
"

return brief + contexte
```

---

📊 Partie 3 : Système de notation automatique

Une grille d'évaluation qui note chaque site généré sur 40 points.

notation.py

```python
"""
notation.py — Grille d'évaluation automatique des sites générés
"""

import re
import json
from pathlib import Path
from datetime import datetime


# ═══════════════════════════════════════════════════
# 1. GRILLE DE NOTATION
# ═══════════════════════════════════════════════════

CRITERES = {
"message": {
"label": "Message en 5 secondes",
"poids": 4,
"description": "Le site peut-il être résumé en 1 phrase ?"
},
"geste": {
"label": "Geste principal",
"poids": 4,
"description": "Y a-t-il UN seul CTA dominant ?"
},
"emotion": {
"label": "Émotion",
"poids": 4,
"description": "L'émotion est-elle claire et constante ?"
},
"structure": {
"label": "Structure narrative",
"poids": 4,
"description": "La structure raconte-t-elle une histoire ?"
},
"design": {
"label": "Design",
"poids": 4,
"description": "Le design est-il soigné et cohérent ?"
},
"vitesse": {
"label": "Performance",
"poids": 4,
"description": "LCP < 1.5s ? Images optimisées ?"
},
"mobile": {
"label": "Mobile",
"poids": 4,
"description": "Parfait sur mobile ?"
},
"signature": {
"label": "Détail signature",
"poids": 4,
"description": "Y a-t-il UN SEUL détail mémorable ?"
},
"contenu": {
"label": "Contenu",
"poids": 4,
"description": "Les textes sont-ils forts et naturels ?"
},
"test_5s": {
"label": "Test des 5 secondes",
"poids": 4,
"description": "Réussi ?"
},
}

NOTE_MAX = sum(c["poids"] for c in CRITERES.values()) # 40


# ═══════════════════════════════════════════════════
# 2. ANALYSE AUTOMATIQUE
# ═══════════════════════════════════════════════════

def analyser_markdown(markdown):
"""Analyse le markdown généré pour extraire des signaux."""
signaux = {}

# Message
match = re.search(r'Message\s:\s["\']?([^"\'
]+)', markdown, re.IGNORECASE)
signaux["message"] = bool(match)

# Geste
ctas = re.findall(r'ctaLabel="([^"]+)"', markdown)
signaux["geste"] = len(set(ctas)) == 1 and len(ctas) >= 2

# Émotion
match = re.search(r'Émotion\s:\s["\']?([^"\'
]+)', markdown, re.IGNORECASE)
signaux["emotion"] = bool(match)

# Structure
sections = len(re.findall(r'^##?\s', markdown, re.MULTILINE))
signaux["structure"] = 5 <= sections <= 10

# Design (typo + couleurs)
a_typo = "typographie" in markdown.lower()
a_couleurs = "couleur" in markdown.lower()
signaux["design"] = a_typo and a_couleurs

# Vitesse (recherche d'indices)
images_lourdes = markdown.count("loading=\"eager\"")
signaux["vitesse"] = images_lourdes <= 1

# Mobile (recherche de responsive)
a_responsive = "md:" in markdown or "sm:" in markdown or "lg:" in markdown
signaux["mobile"] = a_responsive

# Signature (un seul détail)
details = markdown.lower().count("détail signature")
signaux["signature"] = details == 1

# Contenu (longueur)
signaux["contenu"] = len(markdown) > 3000

# Test 5s
signaux["test_5s"] = "5 secondes" in markdown.lower()

return signaux


def analyser_site(dossier_site):
"""Analyse un site généré pour extraire des signaux techniques."""
dossier = Path(dossier_site)
signaux = {}

# Chercher le markdown source
md_file = dossier / "GENERATION.md"
if md_file.exists():
markdown = md_file.read_text(encoding="utf-8")
signaux.update(analyser_markdown(markdown))

# Vérifier la structure de fichiers
src = dossier / "src"
if src.exists():
composants = list((src / "components").glob("*.astro")) if (src / "components").exists() else []
signaux["composants_count"] = len(composants)

# Vérifier le layout
layout = (src / "layouts" / "Base.astro")
signaux["has_layout"] = layout.exists()

# Vérifier package.json
pkg = dossier / "package.json"
if pkg.exists():
data = json.loads(pkg.read_text())
deps = data.get("dependencies", {})
signaux["has_astro"] = "astro" in deps
signaux["has_tailwind"] = "tailwindcss" in deps

return signaux


# ═══════════════════════════════════════════════════
# 3. NOTATION
# ═══════════════════════════════════════════════════

def noter_site(dossier_site, note_manuelle=None):
"""
Note un site généré sur 40 points.

Args:
dossier_site: Chemin du site
note_manuelle: Dict optionnel {"critere": note_0_4, ...}

Returns:
Dict avec notes par critère, total, et évaluation
"""
signaux = analyser_site(dossier_site)
notes = {}

for critere, config in CRITERES.items():
# Note manuelle prioritaire
if note_manuelle and critere in note_manuelle:
notes[critere] = note_manuelle[critere]
# Sinon, note automatique (0 ou poids plein)
else:
valeur = signaux.get(critere, False)
notes[critere] = config["poids"] if valeur else 0

total = sum(notes.values())

# Évaluation qualitative
if total >= 36:
evaluation = "🌟 Exceptionnel"
elif total >= 28:
evaluation = "✅ Mémorable"
elif total >= 20:
evaluation = "🟡 Correct"
elif total >= 12:
evaluation = "🟠 À améliorer"
else:
evaluation = "🔴 À refaire"

return {
"dossier": str(dossier_site),
"notes": notes,
"total": total,
"note_max": NOTE_MAX,
"pourcentage": round(100 * total / NOTE_MAX, 1),
"evaluation": evaluation,
"signaux": signaux,
"noted_at": datetime.now().isoformat(),
}


def noter_tous_les_sites(dossier_parent="sites_generes"):
"""Note tous les sites générés."""
parent = Path(dossier_parent)
if not parent.exists():
return []

resultats = []
for site in sorted(parent.glob("site_*")):
try:
note = noter_site(site)
resultats.append(note)
except Exception as e:
print(f"⚠️ Erreur sur {site.name} : {e}")

# Trier par note décroissante
resultats.sort(key=lambda x: x["total"], reverse=True)
return resultats


def sauvegarder_notes(resultats, output="notes_sites.json"):
"""Sauvegarde les notes en JSON."""
with open(output, "w", encoding="utf-8") as f:
json.dump(resultats, f, ensure_ascii=False, indent=2)
print(f"✅ Notes sauvegardées dans {output}")


# ═══════════════════════════════════════════════════
# 4. RAPPORT LISIBLE
# ═══════════════════════════════════════════════════

def afficher_rapport(resultats):
"""Affiche un rapport lisible dans le terminal."""
print("
" + "=" * 70)
print(" RAPPORT DE NOTATION — MASTER PIÈCE GOD MODE")
print("=" * 70)

for i, r in enumerate(resultats, 1):
nom = Path(r["dossier"]).name
print(f"
{i}. {nom}")
print(f" {r['evaluation']} — {r['total']}/{r['note_max']} ({r['pourcentage']}%)")

# Détail par critère
for critere, note in r["notes"].items():
poids = CRITERES[critere]["poids"]
barre = "█" note + "░" (poids - note)
label = CRITERES[critere]["label"]
print(f" {barre} {label} ({note}/{poids})")

# Moyenne
if resultats:
moyenne = sum(r["total"] for r in resultats) / len(resultats)
print(f"
{'=' * 70}")
print(f" MOYENNE : {moyenne:.1f}/{NOTE_MAX} ({100*moyenne/NOTE_MAX:.1f}%)")
print(f" SITES NOTÉS : {len(resultats)}")
print("=" * 70)


# ═══════════════════════════════════════════════════
# 5. POINT D'ENTRÉE
# ═══════════════════════════════════════════════════

if __name__ == "__main__":
import sys

if len(sys.argv) > 1 and sys.argv[1] == "all":
resultats = noter_tous_les_sites()
afficher_rapport(resultats)
sauvegarder_notes(resultats)

elif len(sys.argv) > 1:
dossier = sys.argv[1]
resultat = noter_site(dossier)
afficher_rapport([resultat])

else:
print("Usage:")
print(" python notation.py <dossier_site>")
print(" python notation.py all")
```

Utilisation

```bash
# Noter un site
python notation.py sites_generes/site_20260109_143022

# Noter tous les sites
python notation.py all
```

Exemple de sortie

```
======================================================================
RAPPORT DE NOTATION — MASTER PIÈCE GOD MODE
======================================================================

1. site_20260109_143022
✅ Mémorable — 32/40 (80.0%)
████ Message en 5 secondes (4/4)
████ Geste principal (4/4)
████ Émotion (4/4)
███░ Structure narrative (3/4)
████ Design (4/4)
███░ Performance (3/4)
████ Mobile (4/4)
████ Détail signature (4/4)
░░░░ Contenu (0/4)
████ Test des 5 secondes (4/4)

======================================================================
MOYENNE : 32.0/40 (80.0%)
SITES NOTÉS : 1
======================================================================
```

---

🔗 Intégration des 3 systèmes dans le dashboard

Modifie dashboard_masterpiece.py pour ajouter 3 onglets :

```python
# Navigation par onglets
tab1, tab2, tab3, tab4 = st.tabs([
"🎨 Générer",
"🗂️ Templates",
"🖼️ Galerie",
"📊 Notes",
])

with tab1:
# Dashboard existant
...

with tab2:
st.header("🗂️ Templates")

from template_manager import charger_catalogue, chercher_templates, sauvegarder_template

# Sauvegarder un site
st.subheader("Sauvegarder un site comme template")
with st.form("save_template"):
dossier = st.selectbox("Site", list(Path("sites_generes").glob("site_*")))
nom = st.text_input("Nom du template")
tags = st.text_input("Tags (séparés par des virgules)")
archetype = st.selectbox("Archétype", ["A", "B", "C", "D", "E"])
note = st.slider("Note (0-40)", 0, 40, 28)
submitted = st.form_submit_button("Sauvegarder")

if submitted:
sauvegarder_template(
dossier, nom,
tags=[t.strip() for t in tags.split(",")],
archetype=archetype,
note=note,
)
st.success(f"Template '{nom}' sauvegardé")

# Lister les templates
st.subheader("Templates disponibles")
catalogue = charger_catalogue()
for t in catalogue["templates"]:
with st.expander(f"📁 {t['nom']} — {t.get('note', 0)}/40"):
st.markdown(f"Tags : {', '.join(t.get('tags', []))}")
st.markdown(f"Archétype : {t.get('archetype', 'N/A')}")

with tab3:
st.header("🖼️ Galerie de références")

from galerie_manager import charger_index, chercher_references, importer_references_base

if st.button("📥 Importer les références de base"):
importer_references_base()
st.success("Références importées")

index = charger_index()

# Filtres
col1, col2 = st.columns(2)
with col1:
archetype_filter = st.selectbox("Archétype", ["Tous", "A", "B", "C", "D", "E"])
with col2:
tag_filter = st.text_input("Tag")

refs = index["references"]
if archetype_filter != "Tous":
refs = [r for r in refs if r["archetype"] == archetype_filter]
if tag_filter:
refs = [r for r in refs if tag_filter.lower() in [t.lower() for t in r.get("tags", [])]]

# Affichage
for r in refs:
with st.expander(f"🌐 {r['nom']} — {r['emotion']}"):
st.markdown(f"URL : {r['url']}")
st.markdown(f"Message : {r['message']}")
st.markdown(f"Geste : {r['geste']}")
st.markdown(f"Émotion : {r['emotion']}")
st.markdown(f"Détail signature : {r['detail_signature']}")
if r.get("palette"):
st.markdown(f"Palette : {', '.join(r['palette'])}")

with tab4:
st.header("📊 Notes des sites")

from notation import noter_tous_les_sites, CRITERES, NOTE_MAX

if st.button("🔄 Recalculer les notes"):
resultats = noter_tous_les_sites()
st.session_state["notes"] = resultats

resultats = st.session_state.get("notes", [])

if not resultats:
st.info("Clique sur 'Recalculer les notes' pour noter tous les sites.")
else:
# Moyenne
moyenne = sum(r["total"] for r in resultats) / len(resultats)
st.metric("Moyenne", f"{moyenne:.1f}/{NOTE_MAX}")

# Tableau
import pandas as pd
df = pd.DataFrame([
{
"Site": Path(r["dossier"]).name,
"Note": r["total"],
"Pourcentage": f"{r['pourcentage']}%",
"Évaluation": r["evaluation"],
}
for r in resultats
])
st.dataframe(df, use_container_width=True, hide_index=True)

# Graphique
import plotly.express as px
fig = px.bar(df, x="Site", y="Note", color="Évaluation")
st.plotly_chart(fig, use_container_width=True)
```

---

🎯 Récapitulatif

Système Fichier Usage
Templates template_manager.py Sauvegarder, chercher, appliquer
Galerie galerie_manager.py Ajouter, chercher, importer
Notation notation.py Noter, rapporter, comparer

---

🚀 Utilisation complète

```bash
# 1. Initialiser
python galerie_manager.py import
python template_manager.py list

# 2. Générer un site
python masterpiece.py "Un tailleur de lin à Lyon"

# 3. Noter le site
python notation.py sites_generes/site_20260109_143022

# 4. Sauvegarder comme template (si note > 28)
python template_manager.py save sites_generes/site_20260109_143022 tailleur_lin minimal artisan

# 5. Dashboard complet
streamlit run dashboard_masterpiece.py
```

---

Les 3 systèmes avancés : Auto-sauvegarde, A/B Testing, Apprentissage

---

🤖 Partie 1 : Auto-sauvegarde des sites bien notés

Principe : après chaque génération, le site est automatiquement noté. S'il dépasse un seuil, il est sauvegardé comme template. Sinon, il est archivé ou supprimé.

auto_save.py

```python
"""
auto_save.py — Sauvegarde automatique des sites bien notés
"""

import json
import shutil
from pathlib import Path
from datetime import datetime

from notation import noter_site, CRITERES, NOTE_MAX
from template_manager import sauvegarder_template, charger_catalogue


# ═══════════════════════════════════════════════════
# 1. CONFIGURATION
# ═══════════════════════════════════════════════════

SEUIL_TEMPLATE = 32 # Note minimum pour sauvegarder comme template
SEUIL_GARDER = 24 # Note minimum pour ne pas supprimer
DOSSIER_ARCHIVE = "archives"
DOSSIER_REJET = "rejets"


def init_dossiers():
Path(DOSSIER_ARCHIVE).mkdir(exist_ok=True)
Path(DOSSIER_REJET).mkdir(exist_ok=True)


# ═══════════════════════════════════════════════════
# 2. EXTRACTION DES TAGS AUTOMATIQUES
# ═══════════════════════════════════════════════════

def extraire_tags(markdown, archetype=None):
"""Extrait des tags depuis le markdown généré."""
tags = []
texte = markdown.lower()

# Tags par archétype
if archetype:
mapping = {
"A": ["manifeste"],
"B": ["catalogue"],
"C": ["configurateur"],
"D": ["portfolio"],
"E": ["experience"],
}
tags.extend(mapping.get(archetype[0].upper(), []))

# Tags par style
styles = {
"minimal": ["minimal", "épuré", "épurée", "sobre"],
"luxe": ["luxe", "premium", "haut de gamme", "élégant"],
"chaleureux": ["chaleureux", "chaleureuse", "artisanal", "authentique"],
"audacieux": ["audacieux", "audacieuse", "avant-garde", "radical"],
"urbain": ["urbain", "urbaine", "street", "moderne"],
}

for tag, mots in styles.items():
if any(m in texte for m in mots):
tags.append(tag)

# Tags par secteur
secteurs = {
"mode": ["mode", "vêtement", "collection", "pièce"],
"bijoux": ["bijou", "or", "argent", "pierre"],
"céramique": ["céramique", "poterie", "terre", "argile"],
"cuir": ["cuir", "maroquinerie", "sac"],
"lin": ["lin", "tailleur", "couture"],
}

for tag, mots in secteurs.items():
if any(m in texte for m in mots):
tags.append(tag)

# Dédupliquer et limiter à 5
return list(dict.fromkeys(tags))[:5]


# ═══════════════════════════════════════════════════
# 3. PIPELINE D'AUTO-SAVE
# ═══════════════════════════════════════════════════

def auto_sauvegarder(dossier_site, brief, archetype=None):
"""
Note le site et applique la politique de sauvegarde.

Politique :
- Note >= 32 → template + archive
- Note >= 24 → archive
- Note < 24 → rejet
"""
init_dossiers()

dossier = Path(dossier_site)
if not dossier.exists():
raise FileNotFoundError(f"Site introuvable : {dossier_site}")

# 1. Notation
note = noter_site(dossier_site)
total = note["total"]

print(f"
📊 Notation : {total}/{NOTE_MAX} ({note['pourcentage']}%)")
print(f" Évaluation : {note['evaluation']}")

# 2. Décision
if total >= SEUIL_TEMPLATE:
action = "template"
slug = creer_slug(brief)
tags = extraire_tags(
(dossier / "GENERATION.md").read_text(encoding="utf-8"),
archetype
)

try:
sauvegarder_template(
dossier_site,
slug,
tags=tags,
archetype=archetype,
note=total,
notes=f"Auto-save : {note['evaluation']}",
)
print(f"✅ Template sauvegardé : {slug} (tags: {', '.join(tags)})")
except FileExistsError:
print(f"⚠️ Template '{slug}' existe déjà")

archiver(dossier_site, DOSSIER_ARCHIVE)

elif total >= SEUIL_GARDER:
action = "archive"
archiver(dossier_site, DOSSIER_ARCHIVE)
print(f"📦 Site archivé (note {total} < {SEUIL_TEMPLATE})")

else:
action = "rejet"
archiver(dossier_site, DOSSIER_REJET)
print(f"🗑️ Site rejeté (note {total} < {SEUIL_GARDER})")

# 3. Log
log_decision({
"dossier": str(dossier_site),
"brief": brief,
"total": total,
"action": action,
"date": datetime.now().isoformat(),
})

return {
"note": note,
"action": action,
}


def creer_slug(brief, max_len=40):
"""Crée un slug court depuis un brief."""
import re
slug = brief.lower()
slug = re.sub(r'[^a-z0-9\s]', '', slug)
slug = re.sub(r'\s+', '_', slug.strip())
return slug[:max_len]


def archiver(dossier_site, dossier_destination):
"""Déplace un site vers un dossier d'archive."""
source = Path(dossier_site)
timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
destination = Path(dossier_destination) / f"{source.name}_{timestamp}"

shutil.move(str(source), str(destination))
return destination


# ═══════════════════════════════════════════════════
# 4. LOG DES DÉCISIONS
# ═══════════════════════════════════════════════════

LOG_FILE = "auto_save_log.json"


def log_decision(entree):
"""Ajoute une entrée au log."""
if Path(LOG_FILE).exists():
log = json.loads(Path(LOG_FILE).read_text())
else:
log = []

log.append(entree)
Path(LOG_FILE).write_text(json.dumps(log, indent=2, ensure_ascii=False))


def statistiques():
"""Retourne les statistiques du log."""
if not Path(LOG_FILE).exists():
return {}

log = json.loads(Path(LOG_FILE).read_text())

total = len(log)
templates = sum(1 for e in log if e["action"] == "template")
archives = sum(1 for e in log if e["action"] == "archive")
rejets = sum(1 for e in log if e["action"] == "rejet")
moyenne = sum(e["total"] for e in log) / total if total else 0

return {
"total": total,
"templates": templates,
"archives": archives,
"rejets": rejets,
"moyenne": round(moyenne, 1),
"taux_template": round(100 * templates / total, 1) if total else 0,
}


# ═══════════════════════════════════════════════════
# 5. POINT D'ENTRÉE
# ═══════════════════════════════════════════════════

if __name__ == "__main__":
import sys

if len(sys.argv) > 1 and sys.argv[1] == "stats":
stats = statistiques()
print("
📊 Statistiques d'auto-save")
print("=" * 40)
for k, v in stats.items():
print(f" {k:<20} : {v}")
elif len(sys.argv) > 2:
auto_sauvegarder(sys.argv[1], sys.argv[2])
else:
print("Usage:")
print(" python auto_save.py <dossier_site> <brief>")
print(" python auto_save.py stats")
```

Intégration dans pipeline_complet()

```python
def pipeline_complet(brief, brand="MASTER PIÈCE"):
# ... génération existante

# À la fin, avant de retourner
from auto_save import auto_sauvegarder
auto_sauvegarder(dossier, brief, archetype=archetype)

return resultat
```

---

⚖️ Partie 2 : A/B Testing des générations

Principe : générer 3 variantes du même brief avec des paramètres différents, les noter, et garder la meilleure.

ab_testing.py

```python
"""
ab_testing.py — Génération et comparaison de variantes
"""

import json
from pathlib import Path
from datetime import datetime

from masterpiece import pipeline_complet
from notation import noter_site, NOTE_MAX


# ═══════════════════════════════════════════════════
# 1. VARIANTES DE PARAMÈTRES
# ═══════════════════════════════════════════════════

VARIANTES = [
{
"nom": "sobre",
"temperature": 0.4,
"suffixe": "Style sobre et minimaliste, sans fioritures.",
},
{
"nom": "equilibre",
"temperature": 0.7,
"suffixe": "Style équilibré, élégant et moderne.",
},
{
"nom": "audacieux",
"temperature": 0.9,
"suffixe": "Style audacieux, avec un détail signature fort.",
},
]


def generer_variante(brief, variante, brand="MASTER PIÈCE"):
"""Génère une variante du brief avec des paramètres spécifiques."""
brief_enrichi = f"{brief}

[VARIANTE : {variante['suffixe']}]"

# Modifier temporairement la température du modèle
import masterpiece
ancienne_temp = masterpiece.CLIENT._default_options.get("temperature", 0.7)

try:
masterpiece.CLIENT._default_options["temperature"] = variante["temperature"]
resultat = pipeline_complet(brief_enrichi, brand=brand)
finally:
masterpiece.CLIENT._default_options["temperature"] = ancienne_temp

return resultat


# ═══════════════════════════════════════════════════
# 2. TEST A/B/C
# ═══════════════════════════════════════════════════

def ab_test(brief, brand="MASTER PIÈCE"):
"""
Génère 3 variantes du même brief et retourne la meilleure.

Returns:
Dict avec les 3 variantes notées + la meilleure
"""
print(f"
{'='*60}")
print(f" A/B TEST : {brief[:60]}")
print(f"{'='*60}
")

resultats = []

for i, variante in enumerate(VARIANTES, 1):
print(f"
🎨 Variante {i}/3 : {variante['nom'].upper()}")
print(f" Température : {variante['temperature']}")
print(f" {variante['suffixe']}")

try:
resultat = generer_variante(brief, variante, brand)

if not resultat:
print(f" ❌ Génération échouée")
continue

# Noter
note = noter_site(resultat["dossier"])

resultats.append({
"variante": variante["nom"],
"temperature": variante["temperature"],
"dossier": resultat["dossier"],
"note": note["total"],
"note_max": NOTE_MAX,
"pourcentage": note["pourcentage"],
"evaluation": note["evaluation"],
"synthese": resultat["synthese"],
"archetype": resultat["archetype"],
})

print(f" ✅ Note : {note['total']}/{NOTE_MAX} ({note['pourcentage']}%)")
print(f" {note['evaluation']}")

except Exception as e:
print(f" ❌ Erreur : {e}")

# Trier par note décroissante
resultats.sort(key=lambda x: x["note"], reverse=True)

# Identifier la meilleure
meilleure = resultats[0] if resultats else None

# Rapport
rapport = {
"brief": brief,
"date": datetime.now().isoformat(),
"variantes": resultats,
"meilleure": meilleure,
}

# Sauvegarder
timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
fichier = f"ab_test_{timestamp}.json"
Path(fichier).write_text(json.dumps(rapport, indent=2, ensure_ascii=False))

# Affichage
print(f"
{'='*60}")
print(f" RÉSULTATS DU A/B TEST")
print(f"{'='*60}
")

for i, r in enumerate(resultats, 1):
statut = "🏆" if r == meilleure else " "
print(f"{statut} {i}. {r['variante']:<12} — {r['note']}/{NOTE_MAX} ({r['pourcentage']}%)")
print(f" {r['evaluation']}")
print(f" Message : {r['synthese'].get('message', 'N/A')[:60]}")
print()

if meilleure:
print(f"🏆 Meilleure variante : {meilleure['variante'].upper()}")
print(f" Dossier : {meilleure['dossier']}")

return rapport


# ═══════════════════════════════════════════════════
# 3. ANALYSE DES A/B TESTS
# ═══════════════════════════════════════════════════

def analyser_ab_tests():
"""Analyse tous les A/B tests pour identifier la meilleure stratégie."""
fichiers = sorted(Path(".").glob("ab_test_*.json"))

if not fichiers:
print("Aucun A/B test trouvé.")
return

# Agréger les notes par variante
stats = {v["nom"]: {"notes": [], "victoires": 0} for v in VARIANTES}

for f in fichiers:
rapport = json.loads(f.read_text())

for r in rapport["variantes"]:
stats[r["variante"]]["notes"].append(r["note"])

if rapport["meilleure"]:
stats[rapport["meilleure"]["variante"]]["victoires"] += 1

# Rapport
print("
" + "=" * 60)
print(" ANALYSE DES A/B TESTS")
print("=" * 60)
print(f"
Total de tests : {len(fichiers)}
")

for nom, data in stats.items():
if not data["notes"]:
continue
moyenne = sum(data["notes"]) / len(data["notes"])
taux = 100 * data["victoires"] / len(fichiers)
print(f" {nom.upper():<12}")
print(f" Note moyenne : {moyenne:.1f}/{NOTE_MAX}")
print(f" Victoires : {data['victoires']} ({taux:.0f}%)")
print()

# Recommandation
meilleure_strategie = max(
stats.items(),
key=lambda x: sum(x[1]["notes"]) / len(x[1]["notes"]) if x[1]["notes"] else 0
)

print(f"🎯 Stratégie recommandée : {meilleure_strategie[0].upper()}")


# ═══════════════════════════════════════════════════
# 4. POINT D'ENTRÉE
# ═══════════════════════════════════════════════════

if __name__ == "__main__":
import sys

if len(sys.argv) > 1 and sys.argv[1] == "analyse":
analyser_ab_tests()
elif len(sys.argv) > 1:
brief = " ".join(sys.argv[1:])
ab_test(brief)
else:
print("Usage:")
print(" python ab_testing.py <brief>")
print(" python ab_testing.py analyse")
```

Utilisation

```bash
# Lancer un A/B test
python ab_testing.py "Un tailleur de lin à Lyon, sur-mesure, élégant"

# Analyser tous les tests passés
python ab_testing.py analyse
```

---

🧠 Partie 3 : Apprentissage par patterns gagnants

Principe : analyser tous les templates bien notés pour extraire les patterns gagnants (structures, composants, palettes, typos) et les réinjecter dans les futures générations.

apprentissage.py

```python
"""
apprentissage.py — Extraction de patterns gagnants depuis les templates
"""

import json
import re
from pathlib import Path
from collections import Counter, defaultdict
from datetime import datetime

from template_manager import charger_catalogue, TEMPLATES_DIR


# ═══════════════════════════════════════════════════
# 1. ANALYSE DES TEMPLATES
# ═══════════════════════════════════════════════════

def analyser_templates(note_min=30):
"""Analyse tous les templates bien notés."""
catalogue = charger_catalogue()
patterns = {
"composants": Counter(),
"palettes": Counter(),
"typos_display": Counter(),
"typos_texte": Counter(),
"archetypes": Counter(),
"tags": Counter(),
"sections": Counter(),
"structures": [],
"note_moyenne": 0,
"total_analyses": 0,
}

notes = []

for t in catalogue["templates"]:
if t.get("note", 0) < note_min:
continue

slug = t["slug"]
dossier = TEMPLATES_DIR / slug

# Lire le markdown source
md_file = dossier / "GENERATION.md"
if not md_file.exists():
continue

markdown = md_file.read_text(encoding="utf-8")
notes.append(t["note"])

# ── Composants ──
composants = re.findall(r'//\s*(\w+\.astro)', markdown)
for c in composants:
patterns["composants"][c] += 1

# ── Palette ──
palette_match = re.search(
r'##\sCouleurs?\s
(.*?)(?=
##|\Z)',
markdown, re.DOTALL | re.IGNORECASE
)
if palette_match:
couleurs = re.findall(r'#[0-9A-Fa-f]{6}', palette_match.group(1))
for c in couleurs:
patterns["palettes"][c.upper()] += 1

# ── Typographies ──
typo_match = re.search(
r'##\sTypographie\s
(.*?)(?=
##|\Z)',
markdown, re.DOTALL | re.IGNORECASE
)
if typo_match:
texte = typo_match.group(1)

display_match = re.search(r'Display\s:\s([^
,]+)', texte, re.IGNORECASE)
if display_match:
patterns["typos_display"][display_match.group(1).strip()] += 1

texte_match = re.search(r'Texte\s:\s([^
,]+)', texte, re.IGNORECASE)
if texte_match:
patterns["typos_texte"][texte_match.group(1).strip()] += 1

# ── Archétype ──
if t.get("archetype"):
patterns["archetypes"][t["archetype"]] += 1

# ── Tags ──
for tag in t.get("tags", []):
patterns["tags"][tag] += 1

# ── Sections ──
sections = re.findall(r'^(\d+)\.\s*([^
]+)', markdown, re.MULTILINE)
for _, section in sections:
patterns["sections"][section.strip()] += 1

# ── Structure complète ──
structure = [s.strip() for _, s in sections]
if structure:
patterns["structures"].append({
"slug": slug,
"note": t["note"],
"structure": structure,
})

# Note moyenne
if notes:
patterns["note_moyenne"] = round(sum(notes) / len(notes), 1)
patterns["total_analyses"] = len(notes)

return patterns


# ═══════════════════════════════════════════════════
# 2. EXTRACTION DES RÈGLES
# ═══════════════════════════════════════════════════

def extraire_regles(patterns, seuil_occurrence=2):
"""Extrait des règles réutilisables depuis les patterns."""
regles = {
"composants_obligatoires": [],
"composants_recommandes": [],
"palettes_gagnantes": [],
"typos_gagnantes": [],
"archetypes_dominants": [],
"tags_frequents": [],
"structure_type": [],
}

# Composants obligatoires (présents dans > 80% des templates)
total = patterns["total_analyses"]
if total > 0:
for composant, count in patterns["composants"].items():
taux = count / total
if taux >= 0.8:
regles["composants_obligatoires"].append(composant)
elif taux >= 0.5:
regles["composants_recommandes"].append(composant)

# Palettes gagnantes (couleurs présentes dans plusieurs templates)
for couleur, count in patterns["palettes"].most_common(6):
if count >= seuil_occurrence:
regles["palettes_gagnantes"].append(couleur)

# Typos gagnantes
for typo, count in patterns["typos_display"].most_common(3):
if count >= seuil_occurrence:
regles["typos_gagnantes"].append({"type": "display", "nom": typo, "count": count})

for typo, count in patterns["typos_texte"].most_common(3):
if count >= seuil_occurrence:
regles["typos_gagnantes"].append({"type": "texte", "nom": typo, "count": count})

# Archétypes dominants
for arch, count in patterns["archetypes"].most_common(3):
regles["archetypes_dominants"].append({"archetype": arch, "count": count})

# Tags fréquents
for tag, count in patterns["tags"].most_common(10):
if count >= seuil_occurrence:
regles["tags_frequents"].append({"tag": tag, "count": count})

# Structure type (fusion des structures des meilleurs templates)
if patterns["structures"]:
top_structures = sorted(
patterns["structures"],
key=lambda x: x["note"],
reverse=True
)[:5]

# Compter les sections récurrentes
sections_counter = Counter()
for s in top_structures:
for section in s["structure"]:
sections_counter[section] += 1

regles["structure_type"] = [
{"section": s, "frequence": c}
for s, c in sections_counter.most_common(10)
]

return regles


# ═══════════════════════════════════════════════════
# 3. INJECTION DANS LE PROMPT
# ═══════════════════════════════════════════════════

def generer_contexte_patterns(regles):
"""Génère un bloc de contexte à injecter dans le prompt système."""
contexte = "

# PATTERNS GAGNANTS (appris des templates précédents)

"

if regles["composants_obligatoires"]:
contexte += "## Composants obligatoires
"
for c in regles["composants_obligatoires"]:
contexte += f"- {c}
"
contexte += "
"

if regles["composants_recommandes"]:
contexte += "## Composants recommandés
"
for c in regles["composants_recommandes"]:
contexte += f"- {c}
"
contexte += "
"

if regles["palettes_gagnantes"]:
contexte += "## Couleurs fréquentes dans les bons sites
"
contexte += ", ".join(regles["palettes_gagnantes"]) + "

"

if regles["typos_gagnantes"]:
contexte += "## Typographies fréquentes
"
for t in regles["typos_gagnantes"]:
contexte += f"- {t['type']} : {t['nom']} ({t['count']} sites)
"
contexte += "
"

if regles["archetypes_dominants"]:
contexte += "## Archétypes dominants
"
for a in regles["archetypes_dominants"]:
contexte += f"- Type {a['archetype']} ({a['count']} sites)
"
contexte += "
"

if regles["structure_type"]:
contexte += "## Structure type des meilleurs sites
"
for s in regles["structure_type"]:
contexte += f"- {s['section']} (présent dans {s['frequence']} sites)
"
contexte += "
"

return contexte


def sauvegarder_regles(regles, fichier="patterns_gagnants.json"):
"""Sauvegarde les règles extraites."""
with open(fichier, "w", encoding="utf-8") as f:
json.dump(regles, f, ensure_ascii=False, indent=2)
print(f"✅ Règles sauvegardées dans {fichier}")


def charger_regles(fichier="patterns_gagnants.json"):
"""Charge les règles depuis le fichier."""
if not Path(fichier).exists():
return None
return json.loads(Path(fichier).read_text(encoding="utf-8"))


# ═══════════════════════════════════════════════════
# 4. RAPPORT
# ═══════════════════════════════════════════════════

def afficher_rapport(patterns, regles):
"""Affiche un rapport lisible."""
print("
" + "=" * 60)
print(" RAPPORT D'APPRENTISSAGE")
print("=" * 60)

print(f"
📊 Templates analysés : {patterns['total_analyses']}")
print(f"📈 Note moyenne : {patterns['note_moyenne']}/{40}
")

if regles["composants_obligatoires"]:
print("🧩 Composants obligatoires (>80%) :")
for c in regles["composants_obligatoires"]:
print(f" • {c}")

if regles["composants_recommandes"]:
print("
💡 Composants recommandés (>50%) :")
for c in regles["composants_recommandes"]:
print(f" • {c}")

if regles["palettes_gagnantes"]:
print(f"
🎨 Palettes gagnantes :")
print(f" {' '.join(regles['palettes_gagnantes'])}")

if regles["typos_gagnantes"]:
print(f"
✍️ Typographies gagnantes :")
for t in regles["typos_gagnantes"]:
print(f" • {t['type']} : {t['nom']}")

if regles["structure_type"]:
print(f"
📐 Structure type :")
for s in regles["structure_type"][:8]:
print(f" • {s['section']} ({s['frequence']}x)")

print("
" + "=" * 60)


# ═══════════════════════════════════════════════════
# 5. POINT D'ENTRÉE
# ═══════════════════════════════════════════════════

if __name__ == "__main__":
import sys

note_min = int(sys.argv[1]) if len(sys.argv) > 1 else 30

print(f"
🧠 Analyse des templates avec note >= {note_min}...
")

patterns = analyser_templates(note_min=note_min)

if patterns["total_analyses"] == 0:
print("⚠️ Aucun template à analyser. Sauvegarde d'abord des sites bien notés.")
sys.exit(0)

regles = extraire_regles(patterns)
afficher_rapport(patterns, regles)
sauvegarder_regles(regles)

# Générer le contexte pour le prompt
contexte = generer_contexte_patterns(regles)
Path("patterns_context.txt").write_text(contexte, encoding="utf-8")
print(f"📝 Contexte généré : patterns_context.txt")
print(f" À ajouter à masterpiece_system.txt pour améliorer les générations")
```

Utilisation

```bash
# Analyser les templates avec note >= 30
python apprentissage.py 30

# Puis, intégrer les patterns dans le prompt système
cat patterns_context.txt >> masterpiece_system.txt
```

Intégration dans le pipeline

Modifie masterpiece.py pour charger les patterns au démarrage :

```python
def charger_prompt_systeme():
"""Charge le prompt système + les patterns appris."""
fichier = Path("masterpiece_system.txt")
if not fichier.exists():
raise FileNotFoundError("Prompt système introuvable")

prompt = fichier.read_text(encoding="utf-8")

# Ajouter les patterns appris s'ils existent
patterns_file = Path("patterns_gagnants.json")
if patterns_file.exists():
from apprentissage import charger_regles, generer_contexte_patterns
regles = charger_regles()
if regles:
prompt += generer_contexte_patterns(regles)

return prompt
```

---

🔗 Intégration des 3 systèmes dans le dashboard

Ajoute 3 onglets au dashboard Streamlit :

```python
tab1, tab2, tab3, tab4, tab5 = st.tabs([
"🎨 Générer",
"🗂️ Templates",
"🖼️ Galerie",
"📊 Notes",
"🧠 Apprentissage",
])

with tab5:
st.header("🧠 Apprentissage")

col1, col2 = st.columns(2)

with col1:
st.subheader("📊 Statistiques d'auto-save")
from auto_save import statistiques
stats = statistiques()

if stats:
st.metric("Sites générés", stats.get("total", 0))
st.metric("Templates créés", stats.get("templates", 0))
st.metric("Taux de templates", f"{stats.get('taux_template', 0)}%")
st.metric("Note moyenne", f"{stats.get('moyenne', 0)}/40")
else:
st.info("Aucune donnée. Génère d'abord des sites.")

with col2:
st.subheader("⚖️ Analyse A/B")
if st.button("Analyser les A/B tests"):
from ab_testing import analyser_ab_tests
analyser_ab_tests()

st.divider()

st.subheader("🎯 Patterns gagnants")
note_min = st.slider("Note minimum des templates à analyser", 20, 40, 30)

if st.button("Extraire les patterns"):
from apprentissage import analyser_templates, extraire_regles, afficher_rapport, sauvegarder_regles

with st.spinner("Analyse en cours..."):
patterns = analyser_templates(note_min=note_min)

if patterns["total_analyses"] == 0:
st.warning("Aucun template à analyser.")
else:
regles = extraire_regles(patterns)

st.metric("Templates analysés", patterns["total_analyses"])
st.metric("Note moyenne", f"{patterns['note_moyenne']}/40")

st.subheader("Composants obligatoires")
for c in regles["composants_obligatoires"]:
st.markdown(f"- {c}")

st.subheader("Palettes gagnantes")
st.markdown(" ".join(regles["palettes_gagnantes"]))

st.subheader("Structure type")
for s in regles["structure_type"][:8]:
st.markdown(f"- {s['section']} ({s['frequence']}x)")

sauvegarder_regles(regles)
st.success("Patterns sauvegardés dans patterns_gagnants.json")
```

---

🎯 Récapitulatif

Système Fichier Rôle
Auto-save auto_save.py Note + sauvegarde automatique
A/B Testing ab_testing.py Génère 3 variantes, garde la meilleure
Apprentissage apprentissage.py Extrait les patterns gagnants

---

🚀 Pipeline complet

```
┌─────────────────────────────────────────────────────┐
│ 1. BRIEF │
└────────────────────┬────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ 2. A/B TESTING (3 variantes) │
│ → Sobre, Équilibré, Audacieux │
└────────────────────┬────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ 3. NOTATION (sur 40) │
│ → Garde la meilleure variante │
└────────────────────┬────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ 4. AUTO-SAVE │
│ → >= 32 : template + archive │
│ → >= 24 : archive │
│ → < 24 : rejet │
└────────────────────┬────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ 5. APPRENTISSAGE │
│ → Extrait les patterns des templates gagnants │
│ → Les réinjecte dans le prompt système │
└────────────────────┬────────────────────────────────┘
│
▼
BOUCLE VERTUEUSE
(chaque génération améliore la suivante)
```

---

🎨 Bibliothèques généralistes (HTML/CSS/Bootstrap)

Ces collections offrent une grande variété de structures de pages que tu peux décortiquer pour en extraire des patterns.

· Website-Templates (dawidolko) : 170 templates HTML5 et Bootstrap libres et éditables (portfolios, boutiques, agences...), tous prévisualisables en ligne.
· OpenTemplates (hacksultan) : collection open source avec un catalogue interactif pour filtrer et prévisualiser les templates, conçue pour être donnée comme base à un agent IA.

👗 Templates spécialisés Mode & E-commerce

Pour t'inspirer directement de l'univers visuel de la mode.

· ada ÉLAN : thème Shopify Hydrogen (React, Tailwind) "production-ready" pour marques de mode premium, avec un design system éditorial complet, i18n (RTL) et CLI de seeding.
· Swanky : template Bootstrap 5 spécifiquement conçu pour les sites e-commerce de mode et de vêtements.
· LUXE : template e-commerce HTML premium pour marques de luxe, construit avec Tailwind CSS et Alpine.js.
· Fashify : template front-end e-commerce moderne en HTML, CSS et JavaScript purs, idéal pour les marques de mode.

⚡ Templates Astro + Tailwind (technologie de ton agent)

Puisque ton agent génère des sites en Astro et Tailwind, ces starters sont les plus directement intégrables.

· AstroWind : le template Astro + Tailwind le plus populaire (3 588 étoiles), production-ready et très personnalisable.
· Astroplate (zeon-studio) : starter Astro + TailwindCSS + TypeScript fournissant tout pour démarrer rapidement un projet.
· Astroship : starter pour startups, sites marketing et blogs, également très populaire.

🤖 Templates pensés pour la génération par IA

Ces bibliothèques sont spécifiquement conçues pour être utilisées par des agents IA.

· Jiro Components : bibliothèque de sections et de pages complètes, chacune accompagnée d'un prompt prêt à être collé dans un constructeur de sites IA.
· vibeasite : bibliothèque de 23 templates pour agents IA, disponibles en deux stacks, avec des builds conversationnels.

💡 Comment les intégrer dans ton pipeline "Master Pièce"

L'objectif n'est pas de copier, mais d'enrichir ta base de connaissances.

1. Extraction de Patterns : clone ces dépôts et lance ton script apprentissage.py dessus pour extraire les structures gagnantes (sections, composants, palettes, typographies).
2. Analyse de Composants : utilise ton template_manager.py pour analyser les composants Astro de ces templates et enrichir ta propre bibliothèque (Hero.astro, ProductGrid.astro, etc.).
3. Base de Connaissances : intègre ces dépôts dans le contexte que tu fournis à ton LLM pour qu'il s'en inspire lors de la génération.

En résumé, ces bibliothèques sont une mine d'or pour ton agent. Elles te permettent d'extraire des patterns concrets et de les réinjecter dans ton système d'apprentissage.