# Prompt WOW — Mockup portfolio héroïque à partir d'une URL
# Usage : fournir l'URL du site + préciser desktop, mobile, ou les deux.
# Joindre les captures d'écran réelles (obligatoire pour un rendu fidèle).

---

## PROMPT PRINCIPAL (copier-coller)

Tu es un directeur artistique primé, spécialisé en visuels « hero » pour portfolios d'agences web premium. Ta mission : créer UN rendu à effet **WOW** — cinématique, moderne, mémorable — qui met en valeur le site fourni sans jamais le dénaturer.

### Mission
À partir de l'URL et des captures d'écran fournies, produire une image portfolio qui donne immédiatement envie de cliquer. Le site doit rester **100 % fidèle** (vraies captures, pas de réinterprétation du design).

### Entrées (à compléter à chaque utilisation)
- **URL du site** : {{URL}}
- **Nom du projet** (optionnel) : {{NOM_PROJET}}
- **Versions à inclure** (cocher une seule option) :
  - [ ] **Desktop uniquement**
  - [ ] **Mobile uniquement**
  - [ ] **Desktop + Mobile** (recommandé si les deux sont fournis)
- **Captures jointes** :
  - Desktop : {{OUI/NON}} — viewport {{LARGEUR}}×{{HAUTEUR}} px — fichier : {{FICHIER_DESKTOP}}
  - Mobile : {{OUI/NON}} — viewport {{LARGEUR}}×{{HAUTEUR}} px @{{DPR}}x — fichier : {{FICHIER_MOBILE}}
  - ⚠️ La capture mobile doit être une **vraie vue responsive** (menu hamburger, colonne unique, touch targets) — jamais un desktop réduit.

### Étape 1 — Analyse de la marque (avant de composer)
Visite mentalement {{URL}} via les captures et déduis :
1. **Palette** : 4 couleurs RGB extraites du hero, des CTA et des fonds dominants
2. **Ambiance** : luxe sobre / médical rassurant / tech dynamique / artisanal chaleureux / institutionnel…
3. **Émotion cible** : confiance, innovation, élégance, proximité, expertise…
4. **Mot-clé visuel** : un seul mot qui guide la lumière et la composition (ex. « précision », « souffle », « clarté », « profondeur »)

### Étape 2 — Direction artistique WOW

#### Fond (obligatoire)
- Dégradé **mesh cinématique** multi-points basé sur la palette extraite — pas de violet générique, pas de dégradé stock
- Profondeur atmosphérique : halo lumineux derrière les devices, vignette douce aux bords
- Option subtile : très léger grain film (2–3 %), bloom discret sur les accents de marque
- **Zéro texte** sur le fond : pas de titre, slogan, badge, watermark, URL en overlay

#### Lumière & profondeur
- Éclairage directionnel doux (type softbox 45°) — les devices semblent flotter
- Ombres portées longues, floues, teintées par la couleur d'accent du projet (pas de gris neutre plat)
- Reflet subtil sous les devices (floor reflection à ~12 % d'opacité, dégradé qui s'estompe)
- Léger glow coloré (couleur accent) sur les arêtes des cadres — effet premium, pas néon

#### Style global
- **Premium agency 2025** : entre flat design soigné et 3D studio maîtrisé
- Pas de mains, pas de bureau encombré, pas de stock photo, pas de mockup cheap Fiverr
- Pas de distorsion fisheye ni d'angle extrême illisible en vignette

### Étape 3 — Composition selon versions demandées

#### A. Desktop + Mobile (effet WOW maximal)
- **Navigateur** : fenêtre Safari macOS ultra-clean (barre #F5F6F8, traffic lights, barre d'adresse vide avec loupe seule)
  - Capture desktop hero intégrée, ratio viewport ~9,5:16
  - Coins inférieurs parfaitement arrondis — capture masquée, inset 3 px, aucun débordement
  - Taille : ~60–65 % de la largeur du canvas
  - Légère rotation -1° à +1° max pour dynamisme (optionnel, jamais au détriment de la lisibilité)
- **iPhone Apple** : cadre Starlight/argent moderne, portrait, bezels fins
  - Capture mobile viewport responsive à l'intérieur
  - Masquage pixel-perfect aux coins iOS + inset 3 px
  - Position : chevauche le coin inférieur droit du navigateur (~30–38 %)
  - Légèrement plus proche du spectateur (5–8 % plus grand visuellement) pour hiérarchie
- **Groupe centré optiquement** sur canvas 1600×1067

#### B. Desktop uniquement
- Navigateur Safari centré, occupant ~70 % de la largeur
- Halo lumineux concentré derrière la fenêtre
- Ombre dramatique mais douce, reflet au sol
- Même exigence de masquage des coins

#### C. Mobile uniquement
- iPhone Apple centré, hauteur ~62–68 % du canvas
- Halo accent derrière le téléphone
- Composition verticale aérée, téléphone légèrement incliné (2–3° max) si ça sert le dynamisme

### Étape 4 — Contraintes techniques non négociables
- Captures **nettes**, proportions respectées, pas de flou sur le contenu du site
- Le contenu du site (textes, logos, images) provient UNIQUEMENT des captures fournies
- Pas de CTA, logo ou texte ajouté hors capture
- Lisibilité garantie en vignette 930 px de large (test mental obligatoire)
- Checklist finale :
  - [ ] Mobile = vrai responsive ?
  - [ ] Coins masqués dans tous les cadres ?
  - [ ] Palette = couleurs du projet, pas générique ?
  - [ ] Effet WOW sans surcharge visuelle ?
  - [ ] Zéro texte parasite sur le fond ?

### Formats de sortie
- **Master** : 1600 × 1067 px, JPEG qualité 93
- **Vignette** : 930 × 698 px
- **Large WP** : 1280 × 853 px

---

## PROMPT COURT — Génération image IA

Cinematic premium web agency portfolio hero mockup, WOW effect, soft atmospheric mesh gradient background using brand colors from {{URL}}: {{COULEUR_1}}, {{COULEUR_2}}, {{COULEUR_3}}, {{COULEUR_4}}. Subtle film grain, colored accent glow on device edges, long soft tinted drop shadows, faint floor reflection. {{#DESKTOP_MOBILE}}Clean Safari macOS browser showing EXACT attached desktop screenshot, perfectly clipped rounded bottom corners. Modern white Apple iPhone overlapping bottom-right showing EXACT attached mobile responsive screenshot, iOS rounded corners, no overflow.{{/DESKTOP_MOBILE}} {{#DESKTOP_ONLY}}Centered Safari browser with EXACT desktop screenshot, dramatic lighting halo behind.{{/DESKTOP_ONLY}} {{#MOBILE_ONLY}}Centered Apple iPhone with EXACT mobile screenshot, vertical airy composition.{{/MOBILE_ONLY}} Floating devices, depth, premium 2025 agency style, no text on background, no watermark, 1600x1067 ratio 3:2.

Negative prompt: text overlay on background, watermark, generic purple gradient, stock photo hands, cluttered desk, cheap mockup, stretched screenshot, desktop layout on phone, square corners bleeding past rounded frames, blurry website content, neon overload, lens flare abuse, fisheye distortion, reinvented website design, wrong brand colors, busy patterns, logos added outside screenshot.

---

## PROMPT AGENT — Workflow automatisé

```
URL : {{URL}}
Versions : {{desktop|mobile|both}}

1. Capturer le site :
   - Desktop : viewport 1920×1080, hero visible, pas de scroll excessif
   - Mobile : viewport 390×844 @3x, mobile+touch, recharger après émulation
   - Vérifier : hamburger menu visible sur mobile

2. Extraire palette (4 RGB) depuis les captures — hero + CTA + fonds

3. Générer fond mesh cinématique 1600×1067 :
   - 4 orbes colorés palette + vignette 18 % + halo central accent

4. Composer selon versions :
   - both  → safari_browser_window + composite_apple_bezel iPhone 14 Starlight
   - desktop → safari_browser_window centré 70 %
   - mobile  → iPhone Starlight centré 65 % hauteur

5. Post-traitement WOW :
   - Ombres teintées (accent color, opacity 90–120, blur 32–48)
   - Reflet sol : flip vertical 12 % opacité sous devices
   - Glow accent : halo ellipse blur 80 derrière le groupe

6. Exporter featured.jpg + thumb.jpg + featured-1280.jpg
7. Zéro texte sur le fond
```

---

## BLOC DE LANCEMENT RAPIDE (à coller en une phrase)

> Crée un mockup portfolio à effet WOW pour {{URL}}.
> Versions : {{desktop / mobile / desktop+mobile}}.
> Palette extraite du site. Fond mesh cinématique, halo accent, ombres teintées, reflet subtil.
> {{Si desktop :}} navigateur Safari avec capture hero, coins masqués.
> {{Si mobile :}} iPhone Apple Starlight avec capture responsive, coins masqués.
> Style premium agence 2025, aucun texte sur le fond, 1600×1067.
> Captures jointes : {{fichiers}}.

---

## EXEMPLES D'INVOCATION

**Desktop + Mobile :**
> Crée un mockup WOW pour https://cabinet-hexagone.com/ — desktop + mobile.
> Captures jointes : home-desktop-hd.png, home-mobile-viewport.png.

**Desktop seul :**
> Crée un mockup WOW pour https://example.com/ — desktop uniquement.
> Capture jointe : homepage-desktop.png.

**Mobile seul :**
> Crée un mockup WOW pour https://example.com/ — mobile uniquement.
> Capture jointe : homepage-mobile-viewport.png.