# Prompt — Mockup portfolio à partir de captures d'écran
# Usage : remplacer les variables entre {{…}}, joindre les captures en pièces jointes.
# Sortie cible : image à la une portfolio (1600×1067) + vignette (930×698).

---

## PROMPT PRINCIPAL (copier-coller)

Tu es un directeur artistique spécialisé en mockups web premium pour portfolio d'agence.

À partir des captures d'écran fournies, compose UNE image marketing propre, sans aucun texte ajouté sur le fond (pas de titre, pas de slogan, pas de badge, pas de watermark).

### Entrées
- Projet : {{NOM_PROJET}}
- URL (optionnel, pour la barre navigateur) : {{URL}}
- Capture desktop (si fournie) : {{DESKTOP_OUI/NON}} — viewport {{DESKTOP_VIEWPORT}} px
- Capture mobile (si fournie) : {{MOBILE_OUI/NON}} — viewport {{MOBILE_VIEWPORT}} px (doit être une VRAIE vue responsive : menu hamburger, colonne unique, pas un desktop réduit)

### Couleurs de fond (obligatoire)
Extrais la palette dominante du site capturé (hero, header, CTA, arrière-plans). Construis un dégradé mesh doux avec 4 teintes :
1. {{COULEUR_1}} — charbon / fond sombre dominant
2. {{COULEUR_2}} — teinte intermédiaire (bleu-vert, anthracite…)
3. {{COULEUR_3}} — couleur d'accent principale (boutons, bandeaux)
4. {{COULEUR_4}} — accent clair (cyan, menthe, beige selon le projet)

Le fond reste sobre, sans motif, sans typographie. Légère vignette optionnelle pour la profondeur.

### Composition (selon captures disponibles)

#### Si capture desktop ET mobile
- Disposition inspirée d'un mockup « navigateur + iPhone » professionnel :
  - À gauche / au centre : fenêtre navigateur desktop (style Safari macOS clair)
  - À droite : iPhone Apple (cadre blanc Starlight ou argent, fin et moderne) chevauchant le coin inférieur droit du navigateur (~30–40 % de recouvrement)
- Centrage optique du groupe sur le canvas
- Ombres portées douces sous chaque élément (pas de reflet miroir agressif)

#### Si capture desktop seule
- Fenêtre navigateur centrée, occupant ~65–70 % de la largeur du canvas

#### Si capture mobile seule
- iPhone Apple centré ou légèrement décalé, hauteur ~55–65 % du canvas

### Navigateur desktop (si capture desktop)
- Chrome Safari minimaliste, fond barre #F5F6F8
- Pastilles traffic lights (rouge, jaune, vert) en haut à gauche
- Flèches navigation + barre d'adresse vide (icône loupe, SANS texte lisible)
- Zone contenu : intégrer la capture desktop telle quelle (haut de page / hero)
- Coins inférieurs de la capture STRICTEMENT arrondis, alignés sur le rayon de la fenêtre — la capture ne doit JAMAIS dépasser aux angles
- Ratio contenu recommandé : ~9,5:16 ou 10:16 (viewport, pas page entière scrollée)

### Téléphone mobile (si capture mobile)
- iPhone Apple moderne, portrait, cadre blanc/Starlight, bezels fins
- Capture mobile responsive à l'intérieur (viewport, pas full-page desktop)
- Masquage pixel-perfect : coins arrondis iOS (~16 % de la largeur d'écran), capture légèrement inset (2–3 px) pour éviter tout débordement aux angles
- Le cadre blanc recouvre les coins par-dessus la capture si nécessaire

### Contraintes techniques non négociables
- Aucun texte superposé sur le fond dégradé
- Captures nettes, pas de flou ni de distorsion
- Pas de déformation des proportions (pas d'étirement horizontal sur mobile)
- Pas de mockup 3D photo-réaliste type studio : style flat premium type présentation agence (comme mockup Figma/Envato « browser + phone »)
- Pas de logos tiers, pas de filigrane, pas de bouton CTA ajouté hors capture

### Formats de sortie
- Master : 1600 × 1067 px (ratio 3:2), JPEG qualité 93
- Vignette : 930 × 698 px dérivée du master

### Auto-analyse avant rendu (checklist interne)
- [ ] La capture mobile montre-t-elle un layout mobile réel (hamburger, empilement vertical) ?
- [ ] Les coins des captures sont-ils masqués dans les cadres arrondis ?
- [ ] Le fond utilise-t-il les couleurs du projet capturé, pas une palette générique ?
- [ ] Y a-t-il du texte parasite sur le fond ? Si oui, supprimer.
- [ ] La composition est-elle équilibrée et lisible en vignette 930 px de large ?

---

## PROMPT COURT (génération image IA — si pas de compositing code)

Professional web design portfolio mockup, flat premium agency style. Soft mesh gradient background using colors extracted from the attached website screenshot: {{COULEUR_1}}, {{COULEUR_2}}, {{COULEUR_3}}, {{COULEUR_4}}. {{#DESKTOP}}Light Safari macOS browser window on the left showing the EXACT attached desktop screenshot, rounded bottom corners, screenshot perfectly clipped inside frame.{{/DESKTOP}} {{#MOBILE}}White Apple iPhone on the right overlapping the browser, showing the EXACT attached mobile screenshot with proper responsive layout, iOS rounded screen corners, screenshot inset with no overflow at corners.{{/MOBILE}} Soft drop shadows, clean composition, centered group, no text overlay on background, no watermark, no extra UI elements, 1600x1067 aspect ratio 3:2, photorealistic device frames but flat presentation style.

Negative prompt: text on background, watermark, logo overlay, stretched screenshot, desktop layout on phone, sharp square screenshot corners sticking out of rounded frames, busy background pattern, 3D studio floor, hands holding phone, blurry screenshots, wrong brand colors, generic purple gradient.

---

## PROMPT AGENT CODE (Pillow / pipeline automatisé)

Génère un mockup portfolio à partir des fichiers :
- Desktop : {{CHEMIN_DESKTOP}}
- Mobile : {{CHEMIN_MOBILE}}

1. Extraire palette dominante des captures (K-means ou échantillonnage hero) → 4 couleurs RGB
2. Fond : mesh_gradient 1600×1067 avec ces 4 couleurs
3. Si desktop : safari_browser_window(capture, viewport_ratio=9.5/16) avec masque coins arrondis + inset 3 px
4. Si mobile : mockup_phone_frame(capture, screen_w calculé pour hauteur ~58 % canvas) avec masque iOS + anneau de cadre blanc par-dessus
5. Composer : navigateur centré-gauche, iPhone chevauchant coin inférieur droit, ombres silhouette
6. Exporter featured.jpg (1600×1067) + thumb.jpg (930×698)
7. Zéro texte sur le fond

---

## EXEMPLE REMPLI — Cabinet Hexagone

Projet : Cabinet Hexagone
URL : cabinet-hexagone.com
Desktop : oui — 1920×1080 (hero accueil)
Mobile : oui — 390×844 viewport ×3 (menu hamburger, layout responsive)
Palette :
  1. rgb(36, 40, 44) — charbon
  2. rgb(0, 72, 88) — teal foncé
  3. rgb(0, 128, 128) — teal accent #008080
  4. rgb(94, 184, 196) — cyan clair #5EB8C4

Composition : navigateur Safari 64 % largeur canvas + iPhone blanc chevauchement 34 %, fond dégradé mesh 4 teintes, sans texte.