Pensé pour une marque premium (100-500 produits) qui veut assumer un niveau "flagship" : merchandising éditorial, recherche prédictive, filtres facettés, PDP cinématique (zoom, 3D/AR), mini-panier tiroir et upsell intelligent. Direction artistique galerie (marbre, laiton, verre fumé), palette sobre avec accents champagne, micro-interactions haute précision, SEO e-commerce avancé et accessibilité AA.
Astuce: Plus vous donnerez de contexte et de détails précis, meilleurs seront les résultats de l'IA.
# PROMPT MASTER - Site ultra-premium (Framer/Webflow) - VARIATION V5 "Maison de Luxe (100-500 produits)"
Rôle : Tu es un-e directeur-trice de création + lead UX/UI + intégrateur avancé (2025) pour sites e-commerce ultra-premium (niveau studio 100k€).
Objectif : concevoir une expérience boutique 100-500 produits, irrésistible et conversion-first (Framer/Webflow ready), avec SEO e-commerce poussé, accessibilité AA, performances exemplaires.
Ne pose AUCUNE question : tout est dans {DATA_CLIENT} et {CUSTOM_INSTRUCTION}.
========================
INPUTS (à parser)
========================
{DATA_CLIENT} :
[DATA_CLIENT]
{CUSTOM_INSTRUCTION} :
[CUSTOM_INSTRUCTION]
Si une info manque, choisis la meilleure option par défaut pour une "maison de luxe contemporaine".
========================
STYLE & DIRECTION ARTISTIQUE
========================
- Mood : "galerie" haute-facture, minimal sculptural, lumière cinématique.
- Matières : marbre, laiton brossé, cuir grainé, verre fumé; reflets contrôlés.
- Grille : 12 colonnes; baseline 12/18/24 px; rythmes éditoriaux (respi généreuse).
- Typo : utiliser celles de {DATA_CLIENT}, sinon fallback premium : Titres = "Canela" ou "Suisse Int'l"; Texte = "Söhne" ou system-ui. 1 H1/page.
- Couleurs : palette {DATA_CLIENT}. À défaut : obsidian #0A0A0A, porcelain #F7F7F5, champagne #D5C3A5, slate #232528. Contrastes AA/AAA.
- Icono & photo : pictos fins; packshots studio + macros matière; lookbooks éditoriaux; cohérence cadrages.
- Microcopy : sobre, assuré, orienté bénéfices/preuve (labels, origine, garantie). CTA courts, fermes.
========================
ANIMATIONS & INTERACTIONS (haut de gamme & performantes)
========================
- Reveal précis (clip-path/split-text), 160-360 ms, easing out quintique, 60 FPS; respects prefers-reduced-motion.
- Hero parallax subtil; "wipe" directionnel; focus states élégants; inertie légère sur boutons.
- Mini-panier drawer (slide-in), quick add, quick view (galerie produit).
- Carrousels drag clavier-souris-tactile; skeleton loaders; transitions de page sobres.
- Framer : Variants/Scroll/Smart Components. Webflow : IX2 (Page load / While scrolling / Mouse move).
========================
ARCHITECTURE DE PAGES (modulaire, 100-500 produits)
========================
1) Home : héros éditorial, collections capsules, best-sellers, nouveautés, édito/looks, avis, garanties, CTA.
2) Boutique (PLP) : grille 3/4 colonnes, filtres facettés (catégorie, matière, couleur, taille, prix, dispo), tri (pertinence/nouveaux/prix/popularité).
3) Catégorie / Collection : header éditorial, bannières saison, storytelling court, grille + "load more".
4) Produit (PDP) : galerie XL (zoom précis, vidéo, 3D/AR option), variantes (swatches), prix/stock, livraison/retours, guides tailles/entretien, origin/provenance, avis, UGC, cross/upsell.
5) Édito / Journal (CMS) : articles, looks, campagnes; liens commerce contextuels.
6) Lookbook : scénarisation produits (shop the look).
7) Services : personnalisation (monogramme), packaging cadeau, retouches, rendez-vous.
8) Gifting & Corporate : coffrets, cartes-cadeaux, B2B.
9) Store Locator / Flagship(s) : cartes, stocks en boutique (option).
10) Mon compte : commandes, retours, wishlist, adresses, préférences.
Templates CMS : Produit, Catégorie, Collection, Article, Look, Témoignage, FAQ.
========================
MERCHANDISING & RECHERCHE
========================
- Recherche prédictive : suggestions produits, catégories, contenus; historique récent.
- Filtres facettés avec "chips" actives + reset; sticky bar sur mobile.
- Badges dynamiques : Nouveau, Édition limitée, En réassort, Exclusif en ligne.
- Bundles, frequently-bought-together, achats récurrents; prix barré/promo maîtrisé.
========================
MODULES PREMIUM (insérer si pertinents)
========================
- Concierge (chat/rdv stylist/experts), personal shopper.
- Personnalisation (gravure/monogramme) avec preview.
- Programme fidélité/VIP tiers, parrainage, early access.
- Disponibilité par boutique; back-in-stock; précommande.
- Cadeau : emballage, message, facture sans prix; delayed delivery.
========================
FORMULAIRES & FLOWS
========================
- Mini-panier : modif quantités, codes promo placeholder, estimation frais.
- Checkout : si non intégré, livrer prototype + plan d'intégration (Shopify/Webflow Ecommerce/Snipcart/Stripe).
- Retours/échanges simplifiés; wishlist; alerte réassort.
- États : validation inline, succès/échec; tracking GA4 (view_item_list, select_item, view_item, add_to_cart, remove_from_cart, begin_checkout, add_payment_info, purchase).
========================
SEO, DATA & LÉGAL
========================
- Balises : Title/Meta/OG/Twitter; H1 unique; H2/H3 clairs; FAQPage si utile.
- JSON-LD : Organization, WebSite+SearchAction, ItemList (PLP), Product+Offer+AggregateRating (PDP), Breadcrumb, CollectionPage, Article/VideoObject si présent.
- International : hreflang si multi-langue; prix TTC/HT selon marché; devise.
- Performance : images WebP/AVIF, srcset/sizes, lazy, font-display: swap, preconnect CDN/paiement, GPU-friendly anims; budgets de poids.
- RGPD : bannière consentement, Mentions, Politique, CGV/Retours.
========================
ACCESSIBILITÉ (WCAG 2.2 AA)
========================
- Focus visibles; ARIA pour filtres, carrousels, modals, drawer; ordre tab logique.
- Alt produits (modèle/variante/couleur); clavier pour quick view, carrousel, close drawer.
- Respect prefers-reduced-motion; contrastes AA/AAA.
========================
SYSTÈME DE DESIGN (TOKENS & COMPONENTS)
========================
- Tokens : couleurs (base/semantic), échelles typo, spacings, radii, ombres, z-index.
- Components : Header sticky (search + mini-cart), Footer, Button (tiers), Badge, Card Produit, Variant Swatch, Size Guide Modal, Filter Drawer, Sort Menu, Chip Filter, Breadcrumb, Quick View, Gallery, Rating, Pagination, Toast, Sticky Add-to-Cart, Monogram Modal.
========================
LIVRABLES (attendus)
========================
1) Sitemap + collections CMS.
2) Sections par page (ordre + objectif).
3) UI Kit (tokens + composants).
4) Spécs d'animations (quand/comment/easing/durée).
5) Pack SEO (titles/meta/OG, JSON-LD e-commerce).
6) Pack Accessibilité (labels, ARIA, focus).
7) Copys (H1/H2/paragraphes/CTA) alignés à la voix de {DATA_CLIENT} (+ variantes A/B).
8) Prompts visuels (packshots, macros, looks, scènes 3D/AR).
9) Schéma CMS (produit/catégorie/collection/article/look/avis).
10) Plan de tracking (dataLayer : view_item_list → purchase).
11) Check-list performance & QA (budgets, LCP/CLS/INP, tailles médias).
========================
CONTRAINTES D'IMPLÉMENTATION
========================
- Framer : Sections/Stacks/Components + Variants; Props (textes/médias/prix); responsive mobile-first.
- Webflow : Style Guide, classes utilitaires (wrap/container/grid), naming BEM, IX2 documentées; mini-cart/drawer/search.
- Langue : reprendre celles de {DATA_CLIENT}; i18n si demandé.
- Si l'outil ne peut pas créer le site, fournir un EXPORT PRÊT À COPIER : HTML sémantique + CSS (ou Tailwind) + JS minimal (un seul fichier) pour Home + PLP + PDP de référence.
ONLY USE HTML, CSS AND JAVASCRIPT
try to elaborate as much as you can, to create something unique
ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE
========================
RÈGLES
========================
- Ne pas demander d'infos supplémentaires.
- Être ultra concret : textes exacts, structures, noms de classes/collections, paramètres d'animation.
- Ton premium, net, sans jargon inutile.
========================
Landing page variante #{landing_number}. Crée une variation unique et différente des autres.
DÉMARRER MAINTENANT AVEC LA PAGE COMPLETE EN HTML CSS JS PRÊTE À COPIER-COLLER :
Un prompt maître conçu pour générer des sites ultra-premium...
Voir ce promptUne version pensée pour une petite boutique (épicerie fine,...
Voir ce prompt