J'ai passé 13 ans à construire des sites et des applications. Puis l'IA est arrivée. Tout le monde s'est mis à demander à ChatGPT de « faire un site ». Résultat ? Des pages blanches, des composants mous, des designs qui ne ressemblent à rien. Pas parce que l'IA est nulle — parce qu'il manquait la structure.
Aujourd'hui, je publie Copy This Website (Vol. 1) et Copy This App (Vol. 2) : deux livres qui condensent cette expertise en 200 prompts prêts à l'emploi. Pas de théorie floue. De l'anatomie visuelle, des règles de design précises, et des prompts que vous copiez-colles pour obtenir du code pro du premier coup.
Voici pourquoi j'ai fait ça, et comment vous pouvez en profiter.
Le problème de la page blanche face à l'IA
Tout le monde a ChatGPT, Claude ou un autre outil. Tout le monde a essayé de lui demander : « Fais-moi une Hero Section moderne ». Et tout le monde a reçu… quelque chose. Un bloc de code. Parfois correct, souvent générique, toujours sans vraie direction.
Pourquoi ? Parce que l'IA ne sait pas ce que vous entendez par « moderne ». Elle ne connaît pas vos espacements, votre hiérarchie typographique, vos conventions de composants. Elle devine. Et la devinette, ça donne du boilerplate.
Le vrai blocage n'est pas l'outil. C'est l'absence de structure partagée. Dès qu'on donne à l'IA une structure claire — « section 100vh, H1 en 48px, 24px sous le titre, bouton avec 32px en dessous » — elle produit du code exploitable. C'est exactement ce que font les livres Copy This : ils fournissent cette structure, sous forme de prompts copywriting (le contenu) et prompts design (la mise en forme et le code).
La Méthode « Copy This » : Reverse Engineering visuel
Mon approche vient du terrain. Au lieu de partir de zéro à chaque fois, j'ai disséqué des centaines de composants qui marchent : Hero Sections, Grilles Bento, Footers, Galeries, Cartes, Formulaires. Pour chaque composant, j'ai extrait trois choses.
1. Anatomie visuelle
On commence par décortiquer le composant. Par exemple une Hero Classique : section pleine page (100vh), contenu centré, largeur max du texte 800px. Un H1. Un paragraphe. Un bouton. Les espacements entre chaque élément (24px sous le titre, 32px sous le paragraphe). Rien n'est laissé au hasard.
Cette anatomie, c'est ce que vous auriez appris en années de pratique. Dans le livre, c'est déjà décrit, avec des captures et des schémas pour que vous (et l'IA) compreniez la structure avant de coder.
2. Règles de design
Ensuite viennent les règles : typo (sans-serif très grasse pour le H1), couleurs (fond uni clair, bouton en couleur d'accent), comportement (animation fade-up avec décalage 0,1 s entre les éléments). Ces règles sont injectables telles quelles dans un prompt. L'IA n'a plus à inventer — elle applique.
3. Le prompt : du contexte au code
Une fois l'anatomie et les règles définies, on les injecte dans l'IA. Le prompt contient le contexte (votre métier, votre cible, votre ton), la structure (ce qu'on vient de décortiquer) et les consignes de sortie (code React + Tailwind, HTML/CSS, Webflow, etc.). Résultat : du code propre, cohérent, prêt à intégrer.
Exemple gratuit — Hero Classique (extrait du livre)
Prompt Design : « Agis comme un Expert en Web Design et en UI/UX. Je veux créer la section Hero de mon site en utilisant [React + Tailwind]. Structure : section pleine page (100vh), contenu centré. H1 : [INSERER LE TITRE]. Paragraphe : [INSERER LE SOUS-TITRE], espacé de 24px sous le titre. Bouton : [INSERER LE CTA], espacé de 32px. Style : fond uni clair, design minimaliste façon Apple. Optionnel : animation fade-up avec décalage 0,1 s entre titre, sous-titre et bouton. »
Copiez ce cadre, remplacez les crochets par votre contenu, et envoyez à ChatGPT ou Claude — vous obtiendrez une Hero pro du premier coup.
Ce qu'il y a dans le livre : 100 composants, 0 ligne à inventer
Copy This Website (Vol. 1) et Copy This App (Vol. 2), ce n'est pas un cours. C'est un manuel de référence : le genre de truc que j'aurais aimé avoir à mes débuts.
- Hero Sections : Classique, Split Screen, Vidéo fond, Parallax, Typo animée, 3D, Gradient Mesh, Minimal, Magazine, Dark Luxury…
- Grilles Bento, Footers, Galeries, Cartes produit, Formulaires, Pricing, Testimonials, Navbars…
- Pour chaque composant : prompt Copywriting (pour générer le texte) + prompt Design (pour générer le code ou la maquette) + variations (badge nouveauté, image en fond, double CTA, etc.).
100 composants dans le Vol. 1, 100 dans le Vol. 2. Zéro ligne de code à écrire sans filet : vous avez la structure, vous avez le prompt, vous avez le rendu.
Pour qui est ce livre ?
- Entrepreneurs qui veulent un MVP ou une landing pro vite, sans attendre un dev ou un designer.
- Designers qui veulent coder sans douleur : les prompts donnent la spec précise ; vous (ou l'IA) exécutez.
- Développeurs qui en ont marre du boilerplate : copiez le prompt du composant, adaptez, et gagnez des heures sur la structure.
Si vous utilisez déjà ChatGPT ou Claude pour le web mais que le résultat vous déçoit, le livre comble le trou : la structure. Une fois que vous l'avez, l'IA devient réellement utile.
Conclusion : L'IA ne remplace pas l'expert, elle l'augmente
L'IA ne remplace pas l'expert. Elle l'augmente. À condition de lui donner un cadre. Copy This Website et Copy This App sont ce cadre : 13 ans d'expertise web transformés en anatomie visuelle et en prompts reproductibles.
Ce livre est votre exosquelette. Vous gardez la vision, le goût, la stratégie. L'IA exécute avec rigueur dès que vous lui donnez la bonne structure.
La collection Copy This sur Amazon :
- Série Copy This (Amazon) — page de la collection
- Copy This Website — Volume 1 — Les fondamentaux du web design
- Copy This App — Volume 2 — Interfaces mobiles & web apps
Les lecteurs ont accès à des bases Notion avec tous les prompts (filtrables par catégorie, mises à jour gratuites) via le code à l’intérieur du livre. Détails sur websual.fr/bonus.