Tu veux publier des carrousels LinkedIn qui claquent, mais tu passes 2 heures sur Canva pour un résultat moyen. Tu empiles les templates, tu ajustes les alignements pixel par pixel, tu dupliques des frames, tu te bats avec les plugins. Et au final, ton carrousel ressemble à tous les autres.

Le pire ? Pour débloquer les bonnes fonctionnalités, il faut sortir la carte bleue. Canva Pro, Tailwind, AuthoredUp... Les abonnements s'empilent. Et la personnalisation reste limitée. Tu restes enfermé dans les templates de quelqu'un d'autre.

Et si tu pouvais créer un carrousel LinkedIn complet, personnalisé à ton image, avec des captions optimisées par plateforme, le tout gratuitement en 15 minutes ? C'est exactement ce que permet Claude Design Carousel Maker : un outil carrousel gratuit propulsé par Claude IA que tu installes en copiant un seul prompt.

Claude Design Carousel Maker : ta machine à carrousels IA

Claude Design Carousel Maker, c'est une interface web complète qui tourne directement dans ton navigateur. Pas de SaaS, pas d'inscription, pas d'abonnement. C'est un méga-prompt que tu copies-colles dans Claude (l'IA d'Anthropic), et Claude génère pour toi une application de création de carrousels sur mesure.

Concrètement, tu obtiens :

• Un canvas avec tes slides en vue globale
• Une sidebar pour éditer chaque slide
• Des layouts pré-conçus (cover, bullets, steps, comparaison, CTA...)
• Un profil créateur qui s'affiche automatiquement sur chaque slide
• Du drag-and-drop d'images
• Un générateur de captions IA pour 6 plateformes
• Un export PNG/PDF prêt à publier

Le tout, sans rien installer. Tu colles le prompt, Claude construit l'interface, et tu crées tes carrousels. C'est aussi simple que ça.

Tuto : créer un carrousel LinkedIn de A à Z

Passons à la pratique. Voici comment utiliser chaque fonctionnalité du générateur carrousel IA.

Configurer ton profil créateur

Première chose à faire : renseigner ton profil. Dans la section "Profile & Brand" de la sidebar, tu remplis :

• Nom : ton nom complet
• Handle : ton @ (ex: @nathancrj)
• Photo de profil : une URL vers ta photo
• Nom de marque : le nom de ton business
• URL : ton site perso ou pro

Ces infos s'affichent automatiquement en footer de chaque slide (sauf la cover). Tu n'as plus jamais à copier-coller ton branding. Un carrousel, dix carrousels, cent carrousels : ton identité visuelle est toujours là.

Astuce : utilise une URL d'image hébergée (Imgur, Cloudinary, ton site) pour ta photo de profil. L'outil la charge directement dans chaque slide.

Comprendre les layouts de slides

L'outil propose plusieurs layouts, chacun pensé pour un usage précis. Tu choisis le layout depuis la sidebar, slide par slide.

• Cover : ta slide d'ouverture. C'est ici que tu places ton hook accrocheur, celui qui donne envie de swiper.
• Title + texte : parfait pour les slides explicatives, développer une idée ou poser un contexte.
• Bullets : listes à puces stylisées. Idéal pour lister des bénéfices, des erreurs à éviter, des outils.
• Steps : étapes numérotées. Le format parfait pour un tuto pas-à-pas dans ton carrousel.
• Quote : citation client, réflexion personnelle ou punchline. Le texte est mis en avant avec un style dédié.
• Comparaison "them vs you" : avant/après, idée reçue vs réalité. Format très viral sur LinkedIn.
• Tableau / rows : comparaison structurée en lignes. Pratique pour comparer des outils, des prix, des fonctionnalités.
• Tip : encadré conseil. Une astuce rapide à retenir, mise en valeur visuellement.
• CTA : slide de fin. Appel à l'action pour diriger vers ton profil, ton site ou ta newsletter.

Pour changer le layout d'une slide, tu cliques dessus dans la sidebar et tu sélectionnes le type voulu. La slide se met à jour en temps réel sur le canvas.

Éditer le contenu d'une slide

Chaque layout expose ses champs dans la sidebar : titre, sous-titre, texte principal, kicker, etc. Tu édites directement, et le canvas reflète tes changements en direct.

Pour les layouts "Bullets" et "Steps", tu ajoutes, supprimes et réordonnes les items directement depuis la sidebar. Pareil pour les "Rows" du layout tableau.

Astuce : entoure un mot avec || pour le mettre en surbrillance dorée. Par exemple, ||Claude Design|| s'affichera avec un accent visuel sur la slide. C'est l'équivalent d'un surlignage pour attirer l'oeil sur un mot-clé.

Personnaliser visuellement

C'est ici que ton carrousel se démarque de tous les autres.

Le fond de tes slides :

• Blobs animés (par défaut) : un fond dynamique avec des formes colorées douces. Tu peux régler l'intensité.
• Couleur unie : sobre et pro, tu choisis la teinte exacte.
• Image de fond : upload une image ou colle une URL, elle s'applique en arrière-plan.

Ajouter des images libres :

Dans l'onglet "Images" de la sidebar, tu peux ajouter des visuels sur n'importe quelle slide. Upload depuis ton ordi ou colle une URL. Une fois l'image placée, tu peux :

• La déplacer en drag-and-drop
• La redimensionner avec les poignées dorées
• La faire pivoter
• Basculer entre mode cover (remplissage) et contain (image entière)

Tu peux aussi déplacer le bloc de texte entier d'une slide en le tirant directement sur le canvas. Chaque slide devient un mini-design unique.

Naviguer dans le canvas

Le canvas est ta vue d'ensemble. Toutes tes slides sont affichées côte à côte. Pour naviguer :

• Pan : clic + glisser sur le fond pour te déplacer
• Zoom : molette de la souris
• Boutons HUD : Fit (tout voir), 1:1 (taille réelle), +/- (zoom pas-à-pas)
• Annuler : Ctrl+Z (ou Cmd+Z sur Mac) ou le bouton ↶

Pour réordonner tes slides, utilise le drag-and-drop dans la liste de la sidebar. Tu peux aussi dupliquer ou supprimer une slide en un clic.

Activer les Tweaks

Les Tweaks te donnent un contrôle fin sur le rendu :

• Échelle de preview : ajuste la taille d'affichage sans modifier l'export
• Footer on/off : affiche ou masque le footer avec ton profil
• Compteur de slides : le petit "03 / 07" en haut à droite, activable ou non
• Profil affiché/masqué : utile si tu veux un rendu plus épuré

Astuce : pour un carrousel Instagram, désactive le compteur de slides (pas la norme sur Insta). Pour LinkedIn, garde-le activé, ça encourage le swipe.

Générer une caption optimisée par IA

C'est la fonctionnalité qui fait la différence. Dans le panneau "Caption" à droite, tu choisis ta plateforme et Claude génère une caption complète adaptée au réseau.

Chaque plateforme a son propre style :

• LinkedIn : hook accrocheur en première ligne, structure pédagogique, 5-8 hashtags pro. Ton sérieux mais accessible.
• TikTok : hook oral et punchy, caption ultra-courte, 8-15 hashtags viraux. Format "arrête de scroller".
• Instagram : storytelling en légende, 15-25 hashtags mix volume/niche. Ton personnel.
• X / Twitter : tweet punchy avec un mini-thread numéroté. Chaque post tient en 280 caractères.
• YouTube : titre SEO, description structurée avec chapitrage. Pensé pour le référencement.
• Threads : ton casual et conversationnel, peu de hashtags.

Claude adapte automatiquement le ton, la longueur et la stratégie hashtags en fonction du réseau. Tu cliques sur "Copier le post complet" et tu le colles directement dans ta plateforme.

Plus besoin d'ouvrir ChatGPT à côté pour écrire ta légende. Tout est intégré.

Exporter ton carrousel

Une fois tes slides prêtes et ta caption générée :

• Export PNG : chaque slide est exportée en image individuelle au format 1080x1080 (carré, optimal pour LinkedIn et Instagram)
• Export PDF : toutes les slides dans un seul fichier

Tu télécharges, tu uploades sur LinkedIn, tu colles ta caption. Publié.

Ce que ça change concrètement

Récap des bénéfices, cash :

• De 2 heures à 15 minutes par carrousel. Plus de frames dupliquées à la main, plus d'alignements pixel par pixel. Tu écris ton contenu, tu choisis tes layouts, c'est prêt.
• 100% gratuit. Zéro abonnement, zéro plugin payant. Tu as juste besoin d'un compte Claude (la version gratuite suffit pour commencer).
• Personnalisable à l'infini. Le prompt est ouvert. Tu peux le modifier, ajouter des layouts, changer les couleurs par défaut, adapter l'interface à tes besoins exacts.
• Caption optimisée incluse. Plus besoin d'un outil séparé pour rédiger tes légendes. Chaque plateforme a son propre générateur intégré.
• Cohérence de marque. Ton profil, tes couleurs, ton style sont figés une fois pour toutes. Chaque carrousel sort avec ta patte.
• Aucune installation. Ça tourne dans ton navigateur. Peu importe ton OS, ton ordi, ta connexion.

Récupère ta machine à carrousels

Voici le prompt complet. Copie-le, colle-le dans Claude, et tu as ton outil prêt à l'emploi en 30 secondes.

Une fois collé, Claude va générer l'interface directement dans le navigateur. Tu n'as plus qu'à commencer à créer tes slides.

Construis-moi un **studio de création de carrousels** complet, en HTML + React (via Babel inline), qui tourne en local dans un navigateur sans build. L'utilisateur doit pouvoir créer des carrousels pour LinkedIn, TikTok, Instagram, X, YouTube, Threads, exporter, et générer ses captions par IA.

# STACK

- 1 fichier `index.html` (host)
- 1 fichier `app.jsx` (logique principale)
- 1 fichier `slides.jsx` (rendu des slides + layouts)
- 1 fichier `data.js` (slides par défaut + profil par défaut)
- 1 fichier `styles.css`

Charge React, ReactDOM et Babel via unpkg avec des `<script type="text/babel" src="...">` pour les .jsx. Pas de bundler, pas de Node.

# INTERFACE GÉNÉRALE

Layout en 3 colonnes (flex row, hauteur viewport) :

1. **Sidebar gauche** (320px) : onglets Slides / Profil / Images / Tweaks
2. **Canvas central** (flex 1) : zone pan & zoom qui empile verticalement toutes les slides
3. **Panneau droit "Caption"** (360px) : sélecteur de plateforme + génération IA

Thème sombre par défaut : fond `#131313`, accent doré `#D4A017`, texte `#ECE6D9`. Sans serif moderne (system font stack ou Inter).

# CANVAS

- Format slide : 1080×1080px (carré, ratio LinkedIn/Instagram)
- Pan : drag souris sur fond du canvas
- Zoom : molette (Ctrl/Cmd + molette) ou boutons HUD
- HUD en bas-gauche : `↶` (undo), `−` zoom out, % zoom, `+` zoom in, `Fit`, `1:1`
- Toutes les slides empilées verticalement avec un gap, scrollables
- Click sur une slide → la rend active (cadre doré subtil)
- Pan & zoom persistés en `localStorage`

# SIDEBAR — ONGLET "SLIDES"

- Liste des slides avec miniature, titre, layout
- Drag-and-drop pour réordonner
- Boutons par slide : dupliquer, supprimer
- Bouton `+ Ajouter une slide` en bas
- Pour la slide active, afficher un éditeur :
  - Sélecteur de **layout** (radio + preview iconique)
  - Champs adaptés au layout (titre, sous-titre, kicker, texte, bullets, steps, etc.)
  - Section **Fond** : 3 modes (blobs animés / couleur unie / image URL) + slider d'intensité pour les blobs + slider d'opacité du voile sur image

# LAYOUTS DE SLIDES (à coder)

Implémente au minimum ces layouts :

1. **cover** — slide d'ouverture, gros titre, kicker optionnel, sous-titre
2. **title-text** — titre + paragraphe
3. **bullets** — titre + liste à puces stylisées (avec icônes ronds dorés)
4. **steps** — liste numérotée d'étapes (numéro + titre + description)
5. **quote** — grande citation centrée + auteur
6. **comparison** — deux colonnes "them vs you" (avant/après, idée reçue vs réalité)
7. **table** — lignes de tableau (rows avec kind, label, text)
8. **tip** — encadré conseil avec icône ampoule
9. **cta** — slide de fin avec hook + sous-texte + indication de swipe

Règle de mise en forme : `||texte||` dans n'importe quel champ texte → met le texte en surbrillance dorée (color: #D4A017).

# RÈGLES VISUELLES SLIDES

- Padding interne 80px
- Sur les slides autres que `cover`, afficher en haut-gauche un **bloc profil** : photo ronde 56px, nom, handle
- En bas-droit (sauf dernière) : **footer "swipe →"** + nom de marque
- En haut-droit : compteur `02/08`
- Tous ces éléments toggleables via Tweaks

# FONDS ANIMÉS (BLOBS)

Pour le mode `leadrum/blobs` (à renommer juste **`blobs`** dans cette version généraliste) :
- 3-5 cercles SVG flous (filter: blur), couleurs douces, qui se déplacent lentement (CSS animation ~20s)
- Chaque slide a sa variation (positions seed sur l'index)
- Slider d'intensité 0-100% qui ajuste l'opacité globale

# SIDEBAR — ONGLET "PROFIL"

Champs : nom, handle (@), URL photo, nom de marque, URL personnelle. Tout est affiché live sur les slides.

# SIDEBAR — ONGLET "IMAGES"

Permet d'ajouter des **objets image libres** sur la slide active :
- Bouton "Upload" (input file local → `URL.createObjectURL`)
- Champ "Image par URL"
- Liste des objets de la slide active avec : preview, X/Y/W/H/rotation, mode de fit (cover/contain), bouton supprimer
- Sur le canvas :
  - Click sur une image → sélectionnée (cadre doré + 4 poignées dorées aux coins)
  - Drag du corps → déplace
  - Drag d'une poignée → redimensionne (en gardant l'aspect ratio si Shift maintenu)
  - Échap → désélectionne

# ÉDITION DIRECTE SUR CANVAS

- Le bloc body de la slide active est **déplaçable** : drag pour offset X/Y. Cadre pointillé doré au survol pour indiquer la zone draggable.
- Échap remet l'offset à zéro (raccourci optionnel).

# SIDEBAR — ONGLET "TWEAKS"

Toggles et sliders pour :
- Échelle de preview du canvas (slider 0.1 → 1)
- Intensité des blobs (0-100%)
- Afficher footer (on/off)
- Afficher compteur (on/off)
- Afficher profil sur les slides (on/off)
- Bouton "Réinitialiser tout" (revient aux slides par défaut)

# UNDO / REDO

- Stack d'historique de 60 entrées max
- Wrap `setSlides` et `setProfile` pour pousser dans l'historique
- Coalesce les changements rapides (drag, frappe) sur 250ms
- `Cmd/Ctrl + Z` → undo, bouton `↶` dans le HUD
- Désactivé quand l'utilisateur tape dans un input/textarea

# PERSISTANCE

- À chaque mutation de slides ou profile, sauvegarde dans `localStorage` (clé unique au studio)
- Au chargement, restaure depuis `localStorage` ou utilise les défauts
- Aussi : pan, zoom, et plateforme sélectionnée du panneau caption

# PANNEAU DROIT — "CAPTION"

Panneau scrollable avec :

### Sélecteur de plateforme (haut)
Grille 3×2 de boutons-tabs, chacun avec icône + label :
- **LinkedIn** (couleur `#0A66C2`)
- **TikTok** (couleur `#FF0050`)
- **Instagram** (couleur `#E1306C`)
- **X / Twitter** (couleur `#000000`)
- **YouTube** (couleur `#FF0000`)
- **Threads** (couleur `#000000`)

Tab actif : fond de la couleur de la plateforme, texte blanc.

### Bouton "Générer avec Claude"
Au clic, construit un contexte texte de toutes les slides (titre, sous-titre, bullets, steps, etc.) puis appelle :

```js
const raw = await window.claude.complete(prompt);

Le prompt envoyé est spécifique à la plateforme sélectionnée. Règles par plateforme :

• LinkedIn : hook 1 ligne max 90 char + corps 6-10 lignes pédago + 5-8 hashtags
• TikTok : hook ultra court oral max 60 char + caption 1-3 lignes casual + 8-15 hashtags viraux (incluant #fyp #pourtoi)
• Instagram : 1ère ligne accrocheuse + storytelling 5-8 lignes + 15-25 hashtags mix volume/niche
• X : tweet principal max 270 char + mini-thread 3-5 tweets numérotés + 1-3 hashtags
• YouTube : titre vidéo SEO max 70 char + description structurée 8-15 lignes (avec "Au programme") + 3-5 tags
• Threads : hook conversationnel + post 3-6 lignes casual + 2-4 hashtags

Format de réponse imposé : JSON strict {"title":"…","description":"…","hashtags":"#… #…"}. Parse robuste (regex sur \{[\s\S]*\}).

3 textareas éditables

• Titre / Hook / Tweet principal (label change selon plateforme)
• Description / Caption / Thread / Légende
• Hashtags / Tags
• Bouton "copier" sur chacun
• Bouton "Copier le post complet" qui concatène les 3

Pied du panneau

Petite mention discrète : "Généré par Claude, optimisé pour [plateforme]. Relis et ajuste."

EXPORT

Bouton "Exporter" en haut-droit du canvas, ouvre une modale avec options :

• PNG par slide (zip si plusieurs)
• PDF complet (toutes les slides)
• Utilise html-to-image ou rendu canvas natif. Si trop complexe, fallback : capture une slide à la fois en dom-to-image.

DÉTAILS UX

• Toutes les transitions en 0.15s ease
• Hover doré subtil sur tous les éléments interactifs
• Tooltips natifs title="" sur les boutons icônes
• Aucun emoji dans l'interface principale (icônes texte/symboles : +, ↶, ▸, ✨, ⎘)
• Responsive bonus : si fenêtre < 900px, panneau droit collapsable

DONNÉES DE DÉPART

Crée un set de 8 slides par défaut sur le thème "Comment créer un carrousel qui performe", avec un mix des layouts (cover, bullets, steps, quote, comparison, tip, cta…). Profil par défaut : nom générique "Ton Nom", handle "@toi", marque "Ta Marque", photo placeholder ronde.

CONTRAINTES TECHNIQUES STRICTES

• Aucune dépendance npm, tout via CDN
• React 18.3.1, ReactDOM 18.3.1, Babel Standalone 7.29.0 (versions pinned)
• Babel : <script type="text/babel" src="..."> pour chaque .jsx
• Important : chaque fichier .jsx exporte ses composants vers window (Object.assign(window, {App, Stage, Sidebar, ...})) car les scripts Babel ne partagent pas de scope
• Style objects React : nomme-les uniquement (appStyles, panelStyles, jamais styles tout court) ou utilise inline
• Code propre, commenté, fichiers < 1000 lignes chacun

LIVRABLE

5 fichiers complets, prêts à ouvrir directement avec un double-clic sur index.html. Aucune étape de build. L'outil doit fonctionner offline (sauf appel à window.claude.complete qui nécessite l'environnement Claude).

Commence par lister les fichiers que tu vas créer, puis génère-les un par un en intégralité.

> **Note** : le prompt fonctionne avec Claude (claude.ai). Colle-le dans une nouvelle conversation, attends que l'interface se charge, et commence à créer. Tu peux sauvegarder la conversation pour retrouver ton outil à chaque session.

## Tu fais de la com pour tes clients ?

Si tu es freelance, agence web ou web designer, tu crées probablement du contenu pour tes clients aussi. Des carrousels, des visuels, des posts. Mais avant de créer du contenu, il faut **trouver ces clients**.

C'est exactement ce que fait Leadrum. Un outil de **génération de leads qualifiés** pensé pour les agences web et freelances. Tu identifies des entreprises qui ont besoin d'un site web (ou d'une refonte), tu obtiens un audit automatique de leur site, et tu reçois un pitch personnalisé prêt à envoyer.

Pendant que ta machine à carrousels tourne, Leadrum trouve tes prochains clients.

<InternalLink href="/#pricing">Tester Leadrum gratuitement</InternalLink>

## À toi de jouer

Tu as ta machine à carrousels. Tu as ton générateur de captions multi-plateformes. Tu as un outil gratuit, modulaire, que tu peux personnaliser à l'infini en modifiant le prompt.

Maintenant, crée ton premier carrousel, publie-le, et vois ce que ça donne. Et si tu trouves un moyen d'améliorer le prompt, fais-le. C'est tout l'intérêt : l'outil t'appartient.