Claude Design : créez landing pages et pitch decks sans designer
Le tuto pas à pas pour produire vos visuels pro avec l'IA d'Anthropic, de la première idée à l'export Canva
Un pitch deck pour lundi, une landing page pour tester une offre, trois visuels pour un email de lancement. Jusqu'ici, trois options : ouvrir Figma (si vous savez l'utiliser), payer un freelance (comptez 48 h et 500 € minimum), ou bricoler sur Canva en espérant que le résultat ne ressemble pas à un devoir de collège.
Depuis le 17 avril 2026, Anthropic propose une quatrième voie : Claude Design. Vous décrivez ce que vous voulez en français, et l'IA génère un prototype interactif sur un canvas en temps réel. Nous avions présenté l'outil dans notre article d'annonce ; voici maintenant le mode d'emploi concret, prompt par prompt.
Ce dont vous avez besoin avant de commencer
Claude Design est accessible sur claude.ai/design. Il faut un abonnement Claude Pro (20 €/mois), Max (100-200 €/mois), Team (25-30 €/siège/mois) ou Enterprise. Pas de surcoût : l'outil est inclus dans l'abonnement existant, avec ses propres limites d'usage hebdomadaires séparées du chat classique.
Chaque nouvel utilisateur reçoit un crédit d'onboarding couvrant environ 20 prompts, valable jusqu'au 17 juillet 2026. Largement suffisant pour suivre ce tutoriel et produire vos premiers livrables.
Côté matériel : un navigateur web récent, c'est tout. Préparez aussi un logo en PNG/SVG, votre charte graphique (couleurs hexa, polices) si vous en avez une, et un texte de brief — on voit ça juste après.
Étape 1 — Rédiger un brief qui produit des résultats exploitables
C'est le point que 90 % des utilisateurs ratent. Un prompt vague donne un résultat générique. Un brief structuré donne un prototype que vous pouvez envoyer à un client ou à un investisseur tel quel.
Le brief efficace nomme trois éléments :
- Audience — à qui s'adresse la page, et qu'est-ce que ces gens savent déjà ?
- Offre — qu'est-ce que vous vendez, à quel prix, à quelles conditions ?
- CTA — quelle est l'action unique que le visiteur doit accomplir ?
Exemple de prompt pour une landing page
Voici le prompt exact que nous avons utilisé pour ce tutoriel :
[[terminal:Crée une landing page pour FormaPro, un organisme de formation professionnelle qui vend des formations IA pour PME. Audience : dirigeants PME 30-55 ans, peu techniques, qui veulent former leurs équipes avant les obligations AI Act d'août 2026. Offre : formation "IA Pratique pour managers" — 2 jours, présentiel ou distanciel, 1 490 € HT par personne, finançable OPCO. CTA unique : réserver un appel découverte de 15 min. Style : professionnel mais accessible, pas corporate froid. Couleur principale #2563EB, police Inter. Sections souhaitées : hero avec stat choc, problème/solution, programme résumé, témoignage client, pricing, FAQ courte, CTA final.]]Le résultat apparaît en quelques secondes sur le canvas de droite : une page complète avec hero, sections, et un bouton CTA fonctionnel. Le rendu est du HTML/CSS/JS interactif, pas une image statique.
Étape 2 — Affiner sans tout recommencer
Le premier jet n'est jamais parfait. Claude Design propose trois modes d'itération qu'il faut connaître pour ne pas perdre de temps :
- Chat — pour les changements globaux (« passe tout le texte en français formel », « ajoute une section témoignages »)
- Commentaires inline — cliquez directement sur un élément du canvas et tapez votre retour (« augmente le padding de ce bouton », « change cette couleur en #1E40AF »). Plus rapide que de décrire l'emplacement dans le chat.
- Sliders — ajustez l'échelle typographique, l'espacement et la palette de couleurs avec des curseurs. Pratique pour tester des variations sans réécrire de prompt.
Conseil de terrain : commencez par les commentaires inline pour les corrections précises, puis utilisez le chat pour les ajouts de sections. Le slider typographique est redoutable pour passer d'un look "startup tech" à un look "cabinet conseil" en deux clics.
Étape 3 — Créer un pitch deck en 5 minutes
Claude Design ne fait pas que des pages web. Pour un pitch deck, le processus est identique mais le prompt change :
[[terminal:Crée un pitch deck de 10 slides pour FormaPro. Audience : investisseurs early-stage, familiers du marché formation pro. Structure : 1) Couverture 2) Problème (stat AI Act) 3) Solution 4) Marché (TAM/SAM/SOM) 5) Produit — capture d'écran de la plateforme 6) Traction (120 entreprises formées, 94% satisfaction, 40% croissance MoM) 7) Business model 8) Concurrence 9) Équipe 10) Ask (750K€ seed) Style : minimaliste, fond blanc, accent #2563EB, une idée par slide, peu de texte.]]Claude génère les 10 slides en une passe. Chaque slide est navigable dans le canvas. Les chiffres sont repris tels quels — l'IA ne les invente pas si vous les fournissez, mais elle inventera des données si vous restez vague. Fournissez toujours vos propres métriques.
Ajouter une capture d'écran ou un logo
Glissez-déposez votre fichier dans le chat ou cliquez sur l'icône pièce jointe. Claude Design accepte les PNG, SVG, DOCX, PPTX et XLSX comme contexte. Vous pouvez aussi coller l'URL d'un site existant : l'outil capture automatiquement couleurs, polices et composants pour s'en inspirer.
Étape 4 — Exporter et distribuer
Votre prototype est prêt. Cinq options d'export, chacune adaptée à un usage précis :
- PDF — pour envoyer par email à un investisseur ou imprimer un one-pager. Fidèle au canvas.
- PPTX — pour les équipes qui vivent dans PowerPoint ou Keynote. Attention : certaines polices peuvent être substituées et les mises en page complexes perdent parfois en précision.
- Envoi vers Canva — ouvre le design comme fichier Canva entièrement éditable via l'intégration officielle. La meilleure option si un collègue non technique doit reprendre la main pour ajuster les visuels. [[link:claude-ai|Essayer Claude Design →]]
- HTML standalone — un fichier autonome que vous pouvez héberger vous-même ou envoyer en pièce jointe.
- Transfert vers Claude Code — Claude Design emballe le prototype et le transmet à Claude Code, qui le convertit en projet Next.js déployable. Pour les landing pages qui doivent aller en production.
Étape 5 — De prototype à site en ligne (optionnel)
Si votre landing page doit réellement être mise en ligne (pas juste servir de maquette), le workflow le plus fluide passe par le transfert Claude Design → Claude Code :
- Dans Claude Design, cliquez sur Export → Send to Claude Code
- Claude Code reçoit le bundle (HTML + assets) et le convertit en projet Next.js avec GSAP pour les animations
- Il génère les fichiers, propose un
package.json, et peut pousser directement vers un repo GitHub - Depuis le repo, un déploiement Vercel ou Netlify prend 2 minutes
Nous avons testé ce workflow de bout en bout : du brief initial au site en ligne, comptez 25 minutes pour une landing page simple. Un designer/développeur freelance facture entre 800 et 2 000 € pour le même livrable, en 3 à 5 jours.
Nuance importante : le code généré est propre pour un prototype ou une page marketing autonome. Pour un site complexe avec CMS, authentification ou base de données, vous aurez besoin d'un développeur qui reprend la main après l'export.
Les pièges à éviter
Après une semaine d'utilisation intensive, voici ce qui fait perdre du temps :
- Brief trop court — « fais-moi une landing page pour mon SaaS » produit un template interchangeable. Investissez 5 minutes dans un brief structuré (audience/offre/CTA), vous économiserez 10 itérations.
- Vouloir tout faire en un prompt — Claude Design fonctionne mieux en conversation. Générez la structure d'abord, puis affinez section par section.
- Ignorer les commentaires inline — beaucoup d'utilisateurs ne savent pas qu'on peut cliquer directement sur un élément du canvas. C'est pourtant le mode d'édition le plus précis.
- Oublier les limites hebdomadaires — le crédit d'onboarding (≈ 20 prompts) est consommé en premier. Au-delà, l'usage compte dans votre quota hebdomadaire. Sur un plan Pro, le plafond est atteint assez vite si vous enchaînez les projets. Vérifiez votre consommation dans Settings → Usage.
- Fournir des métriques vagues — si vous écrivez « notre entreprise a de bons résultats », Claude va inventer des chiffres. Fournissez toujours vos données réelles : CA, nombre de clients, taux de conversion.
Quand utiliser Claude Design vs Canva vs Figma
Claude Design ne remplace ni Canva ni Figma. Il comble un trou entre les deux :
- Claude Design — idéal pour le premier jet rapide : tester une idée de landing page, produire un pitch deck en urgence, créer un prototype à montrer avant d'investir dans du design. Vous partez de zéro et obtenez un livrable présentable en 20 minutes.
- Canva — idéal pour le polish final : retoucher des visuels, ajuster pixel par pixel, produire des déclinaisons (formats réseaux sociaux, bannières). Le connecteur Claude → Canva rend les deux outils complémentaires.
- Figma — indispensable pour le design system d'un produit digital complexe : composants réutilisables, handoff développeur, collaboration designer/dev sur la durée.
Le workflow réaliste pour une PME : Claude Design pour le concept → export Canva pour le polish → mise en ligne via Claude Code ou un développeur si besoin. Coût total : 20 €/mois + le temps que vous y passez.
[[cta:claude-ai]]