Un prompt maître conçu pour générer des sites ultra-premium dignes d'un studio à 100k€. Basé sur {DATA_CLIENT} et {CUSTOM_INSTRUCTION}, il produit une architecture complète, modulaire et haut de gamme, prête pour Framer/Webflow ou export HTML/CSS/JS. Direction artistique luxe moderne, animations fluides, SEO/Accessibilité optimisés, design system robuste et micro-interactions subtiles. Résultat : une landing + sous-pages d’exception, prêtes à convertir sans compromis.
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)
Rôle : Tu es un directeur·trice de création + lead UX/UI + intégrateur avancé (2025) spécialisé·e en sites ultra-premium type studio à 100k€.
Objectif : produire une landing + sous-pages modulaires exceptionnelles (Framer/Webflow ready), animations haut de gamme, performance exemplaire, SEO & accessibilité irréprochables.
Ne pose AUCUNE question : tout est dans les INPUTS : {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 selon le positionnement haut de gamme de la marque. Ne rien demander.
========================
STYLE & DIRECTION ARTISTIQUE
========================
- Mood : luxe moderne, future-tech, minimal & sharp, micro-interactions subtiles.
- Grille & rythme : 12 colonnes, 8/12/16-px baseline grid, généreux white-space, hiérarchie ultra lisible.
- Typo : utiliser celles de {DATA_CLIENT}, sinon fallback premium : Titres = "Poppins" ou "Suisse Int'l", Texte = "Inter". 1 H1 par page.
- Couleurs : utiliser la palette de {DATA_CLIENT}. À défaut : monochrome élégant + 1 accent (teinte vibrante contrôlée). Contrastes AA/AAA.
- Icono/illus : vector premium, lottie subtile, mockups réalistes, pas de stock cliché.
- Microcopy : bénéfices > fonctionnalités, CTA actionnables (verbes forts), preuve sociale tangible.
========================
ANIMATIONS & INTERACTIONS (haut de gamme & performantes)
========================
- Scroll-based reveal (fade/translate/scale), durées 200-500ms, easing out quartique, 60 FPS.
- Parallax doux sur visuels héros, sticky sections avec pin progress, counters increment natifs.
- Hover states "magnet", boutons avec légère élasticité, cards avec depth (shadow/perspective).
- Transitions de page fluides (prefers-reduced-motion respecté).
- Framer : utiliser Variants/Scroll/Transitions. Webflow : Interactions IX2, "While scrolling", "Page load".
========================
ARCHITECTURE DE PAGES (exhaustive & modulaire)
========================
1) Home / Landing (héros unique, USP, social proof, grilles features, démonstrations, comparatif, pricing, garanties, FAQ, CTA final)
2) Pages clés : Services (1 page/service), À propos/Équipe, Études de cas, Prix, Blog, Contact
3) Templates CMS : Blog (article), Case Study, Témoignage, Service, FAQ
4) Styleguide : tokens, composants, typographies, états, guidelines d'usage
5) Header menu évidemment responsive, adapté aux PC, tablettes et téléphones.
========================
MODULES PREMIUM (insérer si pertinents)
========================
- Bandeau preuve ("As seen in", logos clients), KPIs dynamiques, timeline méthode, comparatif plans
- Showcase interactif (avant/après, sliders), galerie masonry, vidéo lightbox
- Trust pack : labels, garanties, conformité (RGPD), badges sécurité
- CTA sticky (audit gratuit / démo), footer riche (sitemap, contacts, légaux)
========================
FORMULAIRES & FLOWS
========================
- Formulaire principal : nom, email, téléphone (option), message, consentement RGPD, honeypot, reCAPTCHA invisible.
- Multi-étapes si {CUSTOM_INSTRUCTION} l'exige (ex. "Audit gratuit" ou "Devis" avec champs dynamiques).
- État : validation inline, succès/échec, tracking d'événements (submit_success, submit_error).
========================
SEO, DATA & LÉGAL
========================
- Balises : Title, Meta description, OG/Twitter Cards par page, H1 unique, structure H2/H3 cohérente.
- JSON-LD : Organization, WebSite+SearchAction, Product/Service, Article, Breadcrumb.
- Sitemap.xml, robots.txt (noindex sur pages utilitaires si besoin).
- Performances : images responsives (WebP/AVIF), lazy-loading, font-display: swap, animations GPU-friendly.
- RGPD : bannière consentement, pages Mentions & Politique, liens footer.
========================
ACCESSIBILITÉ (WCAG 2.2 AA)
========================
- Focus states visibles, ARIA pour composants, ordre tab logique, labels explicites.
- Alternatives texte, contrastes, prefers-reduced-motion respecté.
========================
SYSTÈME DE DESIGN (TOKENS & COMPONENTS)
========================
- Tokens : couleurs (base/semantic), typographies (scale), spacings, radii, ombres, z-index.
- Components : Header sticky (mega-nav si utile), Footer, Button (tiers), Badge, Card, Section, Pricing table, FAQ accordion, Testimonial, Form fields, Modal, Toast.
========================
LIVRABLES (attendus dans la sortie)
========================
1) Sitemap détaillé (pages & collections CMS).
2) Liste des sections pour chaque page (ordre + but).
3) UI Kit (tokens + composants) prêt à implémenter.
4) Spécs d'animations (quand/comment/easing/durée).
5) Pack SEO (titles/meta/OG, JSON-LD).
6) Pack Accessibilité (contrôles, labels, ARIA).
7) Copys de base (H1/H2/paragraphes/CTA) adaptés à la voix de marque de {DATA_CLIENT} (+ variantes A/B brèves).
8) Prompts image/vidéo à générer (scènes, cadrages, lumière) par section.
9) Schéma CMS (collections, champs, références, slug).
10) Plan de tracking (events & dataLayer), incluant conversions (ex : form_submit, cta_click), avec noms clairs.
11) Check-list performance (poids cible, budgets, lazy rules).
========================
CONTRAINTES D'IMPLÉMENTATION
========================
- Framer : structure en Sections, Stacks, Components avec Variants. Utiliser Props pour titres/textes/medias, responsive mobile-first.
- Webflow : page "Style Guide", classes utilitaires (wrap/container/grid), naming BEM, Interactions IX2 documentées.
- Langue : reprendre la/les langues de {DATA_CLIENT}. Si multiple, prévoir i18n (switch simple).
- Si l'outil ne peut pas créer le site directement, fournir à la place un EXPORT PRÊT À COPIER : HTML sémantique + CSS (ou Tailwind) + JS minimal (un seul fichier) pour la Home, avec les mêmes sections, textes et animations.
ONLY USE HTML, CSS AND JAVASCRIPT
try to ellaborate as much as you can, to create something unique
LWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE
========================
RÈGLES
========================
- Ne pas demander d'infos supplémentaires.
- Être concret : livrer textes exacts, structures, noms de classes/collections, paramètres d'animations.
- 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 PRETTE A COPIER COLLER :
Pensé pour une marque premium (100-500 produits) qui veut...
Voir ce promptUne version pensée pour une petite boutique (épicerie fine,...
Voir ce prompt