J'ai créé ce site premium en 24h grâce à l'IA (Gemini & Claude).
Aucun designer à 80€/h. Aucun développeur. Oubliez Figma. Voici le guide exact pour passer d'une idée à un site qui convertit, sans toucher une ligne de code.
Celui qui demande juste : "ChatGPT, crée-moi un site web".
Celui qui utilise l'IA pour exécuter une vision stratégique.
Les agences qui te vendent du WordPress ou Webflow manuel.
La puissance du code pur généré par les LLMs les plus avancés.
Le Prompt de Structure (Architecture)
Ne demande pas le design tout de suite. L'erreur est de vouloir du "beau" avant d'avoir du "solide".
Utilise Claude 3.5 Sonnet ou Gemini 1.5 Pro pour générer l'architecture HTML pure (les conteneurs).
GOAL: Create the HTML structure for a high-converting Landing Page.
CONTEXT: I am using Elementor/WordPress. I need clean HTML code to paste into containers.
INSTRUCTIONS:
1. Do NOT add CSS styling yet. Only Structure.
2. Use semantic HTML tags (section, header, footer).
3. Create a layout using Flexbox/Grid for these sections:
- Navbar (Logo left, Links right)
- Hero Section (H1, Subtitle, 2 CTA buttons, Image right)
- Social Proof (Logos grid)
- Features (Grid of 3 cards)
OUTPUT: Clean HTML code only.
💡 Astuce Pro : Une fois le code généré, dans Elementor, créez une nouvelle page, ajoutez un "Conteneur", glissez un widget "HTML" et collez le code dedans. C'est votre squelette.
La Méthode : "Container-First"
Avant de copier le prompt, comprenez la mécanique. On ne code pas dans WordPress, on injecte du code pur dans des conteneurs.
-
1. Préparez Elementor Créez une nouvelle page. Ajoutez un Container Flexbox vide. Glissez-y le widget "HTML".
-
2. Générez avec l'IA Utilisez Gemini 3 Pro ou Claude Opus 4.5 avec mon prompt de structure (ci-dessous) pour obtenir le code HTML.
-
3. Injectez le Code Copiez le code de l'IA. Collez-le dans le widget HTML. Le design apparaît instantanément. Répétez bloc par bloc.
Le "God Prompt" de Structure
C'est ici que la magie opère. Copiez ce prompt et envoyez-le à Claude Opus 4.5 ou Gemini 3.0 (les seuls modèles capables de gérer cette complexité).
CONTEXT: We are building a modern Landing Page for a SaaS using Elementor HTML Widgets.
MODEL REQUIREMENT: Use your highest reasoning capabilities (Gemini 3.0/Opus 4.5 level).
TASK: Create the HTML Structure ONLY for the Hero Section.
SPECIFICATIONS:
1. Use semantic HTML5 tags (section, header, h1, p, a).
2. Use inline CSS for layout (Flexbox) to ensure it works immediately.
3. NO EXTERNAL CSS FILES. All styles must be inside the HTML.
4. Layout: Left align text, Right align visual/image placeholder.
5. Add a "Gradient Text" effect on the main keyword in the H1.
OUTPUT: Clean HTML code ready to copy-paste.
ℹ️ Une fois le code généré par l'IA, collez-le directement dans votre widget HTML Elementor.
Intégrer vos Visuels (Le Workflow)
L'IA génère du code avec des images "placeholders". Vous devez les remplacer par les vôtres. Voici comment gérer ça proprement.
A. Créer l'image avec Gemini 3.0
CONTEXT: The website is for [Votre Niche/Produit]. The branding is premium, clean, tech, with a purple/pink gradient vibe.
SUBJECT: A modern desk setup with a laptop showing a dashboard, abstract data flowing around it.
STYLE: High-end photography, cinematic lighting, shallow depth of field, 8k resolution. Aspect Ratio: 16:9.
- Téléchargez votre image générée par Gemini.
- Dans WordPress, allez dans Médias > Ajouter et glissez l'image.
- Cliquez sur l'image uploadée. Dans le panneau de droite, trouvez le champ "URL du fichier" (ou "Lien direct").
- Copiez cette URL entière (ex: https://monsite.com/.../image.jpg).
- Retournez dans le code HTML généré à l'étape 3 et remplacez la source :
<img src="COLLEZ_URL_ICI">.
L'Art de l'Itération (Le "Polish")
Le premier résultat est rarement parfait. C'est normal. Votre rôle est de devenir Directeur Artistique. Demandez à l'IA d'ajouter des animations et de corriger le mobile.
CRITIQUE: The current design looks a bit flat and static.
TASKS:
1. Add Hover Effects: When hovering buttons or cards, add a slight translateY(-5px) and increase shadow opacity.
2. Mobile Optimization: Ensure the flex-direction changes to 'column' on screens smaller than 768px. Reduce padding to 1.5rem on mobile.
3. Micro-Interactions: Add a subtle transition: all 0.3s ease-in-out; on all interactive elements.
OUTPUT: Provide the UPDATED CSS only (wrapped in style tags).
Si le design "casse" (ex: image trop grande sur mobile), ne touchez pas au code. Faites une capture d'écran du bug, envoyez-la à Claude/Gemini et dites simplement : "Fix this visual bug based on the screenshot. Keep the rest of the style intact."
Passez de l'idée aux résultats.
Ne laissez pas la technique vous ralentir. Choisissez votre besoin :
Audit gratuit de 30 min • Sans engagement