·6 min de lecture

Comment exploiter votre blueprint cloclo avec Claude, Cursor ou v0

Vous avez votre blueprint Markdown — voici exactement comment le donner à votre IA préférée pour générer un site Next.js qui ressemble à l'original. Avec les bons prompts.

Vous avez collé une URL dans cloclo, attendu 60 secondes, et reçu un blueprint Markdown de 5 à 10 000 caractères. Et maintenant ?

C'est la question que reçoivent tous nos premiers utilisateurs. Le format est intentionnellement texte ouvert — vous pouvez le réinjecter dans n'importe quelle IA générative qui sait lire du Markdown. Mais le résultat dépend énormément du prompt d'instruction que vous lui donnez.

Cet article vous donne 3 patterns de prompts éprouvés pour les 3 outils IA les plus utilisés : Claude, Cursor et v0.dev.

1. Claude (Anthropic) — pour itérer dans un chat

C'est l'usage le plus libre. Vous ouvrez claude.ai, vous collez le blueprint, et vous discutez avec l'IA comme avec un développeur senior.

Le prompt qui marche bien :

Voici un blueprint Markdown qui décrit un site source.
Reproduis sa structure et son design dans un projet Next.js 16
+ Tailwind v4 inspiré (pas copié), pour mon SaaS de
[VOTRE DOMAINE — ex. coaching parental].

Adapte :
- la copy au domaine (textes inspirés du sujet, pas Linear)
- les exemples concrets (témoignages, features) au cas d'usage
- la palette si tu vois un meilleur fit pour mon secteur

Garde :
- la structure de sections (ordre, hiérarchie)
- les patterns UX identifiés
- les choix techniques (frameworks détectés)

Commence par me proposer juste le `app/page.tsx` et le
`app/globals.css` — je te demanderai les composants ensuite.

[COLLEZ LE BLUEPRINT ICI]

Pourquoi ça marche : vous laissez Claude faire la transposition créative (textes, exemples, ajustements palette) pendant qu'il garde la rigueur structurelle du blueprint. Et vous demandez la sortie en petits morceaux pour pouvoir corriger au fur et à mesure.

2. Cursor — pour scaffolder un projet local

Si vous avez Cursor installé, le plus puissant est de commencer un nouveau projet vide et de demander à Composer (Cmd+I) de tout générer d'un coup.

Le prompt :

Crée un nouveau projet Next.js 16 + Tailwind v4 + TypeScript
basé sur le blueprint ci-dessous.

Structure attendue :
- package.json avec Next 16, React 19, Tailwind v4, TypeScript
- app/layout.tsx avec les fonts du blueprint (next/font/google)
- app/page.tsx composant chaque section du blueprint
- app/globals.css avec @import "tailwindcss" et @theme inline
  contenant les tokens de palette extraits
- components/ pour les sections complexes
- README.md avec instructions pnpm install / dev

Adapte les textes pour mon SaaS de [VOTRE DOMAINE].
Garde l'ordre et la hiérarchie des sections du blueprint.

[COLLEZ LE BLUEPRINT ICI]

Cursor va créer la structure complète. Itérez ensuite section par section avec des prompts ciblés (@app/page.tsx ajoute une animation fade-in sur le hero).

Astuce : si Cursor coince à mi-chemin, demandez-lui de continuer fichier par fichier — il a du mal avec les très gros outputs en une seule passe.

3. v0.dev — pour générer visuellement, section par section

v0 fonctionne mieux quand vous lui donnez une section à la fois, pas le blueprint complet. Le format texte de notre blueprint vous facilite la tâche : il a déjà segmenté pour vous.

Workflow type :

  1. Ouvrez v0.dev
  2. Pour chaque section du blueprint, créez un nouveau chat avec ce prompt :
Crée le composant React pour cette section d'un site web :

Section : Hero
Rôle : Main value proposition
Contenu : Large headline "[VOTRE HEADLINE]" with description and CTA
Composants présents : Hero title with text animations, Description text,
  Primary CTA button, Feature badge
Organisation visuelle : Full-width centered text with animated blur
  transitions and vertical spacing

Style global :
- Palette : primary #5E6AD2, accent #F5C518, fond #0D0D0D
- Typo : Inter, weights 400-800
- Boutons : rounded pill-shaped, outlined ou filled dark

Adapte la copy au domaine : [VOTRE DOMAINE].
  1. v0 vous propose 3 variations visuelles → vous choisissez la meilleure
  2. Vous l'exportez vers votre projet local

C'est plus lent que Cursor, mais le rendu visuel est souvent plus polish.

Bonus : le shortcut Pro

Si vous êtes sur le plan Pro de cloclo, vous pouvez sauter tout ça : le bouton "Télécharger le site Next.js" sur la page de votre analyse génère directement un projet zip prêt à pnpm install && pnpm dev. C'est notre version la plus aboutie de ce workflow, en interne.

L'avantage de faire vous-même via Claude/Cursor/v0 : vous gardez le contrôle créatif sur chaque détail et apprenez en route. L'avantage du Pro : zéro friction, vous obtenez le code en 60 secondes.

En résumé — quel outil pour quel besoin

| Outil | Pour quel usage | Temps total | Coût mensuel | Trade-off | |---|---|---|---|---| | Claude (chat) | Itérer librement, comprendre le pourquoi de chaque choix, garder le contrôle créatif total | 30 min à 2 h | Gratuit (Free) ou ~20 €/mois (Plus) | Pas de scaffold automatique — vous copiez-collez fichier par fichier dans votre éditeur | | Cursor Composer | Générer le projet local complet d'un coup, puis itérer dans votre IDE | 15 min de génération + 1-2 h d'ajustements | ~20 $/mois | Code parfois approximatif, surtout si beaucoup de composants — prévoir un pass de relecture | | v0.dev | Obtenir des rendus visuels très léchés, section par section, quand l'esthétique prime | 1 à 3 h pour un site complet (section par section) | ~20 $/mois | Fragmenté — vous générez une section à la fois, puis devez recomposer dans un projet Next.js | | cloclo Pro | Zéro intervention créative, vous voulez juste le .zip prêt à pnpm install && pnpm dev | ~1 minute | 29 €/mois (inclus dans le plan Pro, 10 générations/mois) | Output générique — si vous voulez personnaliser fortement, mieux vaut combiner cloclo Pro pour le scaffold + Claude pour les ajustements |

Règle d'or, peu importe l'outil : gardez le blueprint comme source de vérité. Si l'IA dévie (mauvaise palette, structure différente), repointez-la sur le paragraphe correspondant du blueprint — c'est pour ça qu'il est structuré section par section.

Notre combo recommandé pour un usage régulier : cloclo Pro pour générer le scaffold en 1 minute, puis Claude (chat) pour ajuster les sections qui ne vous conviennent pas. Vous avez la vitesse de l'automatisation + le contrôle de l'IA conversationnelle.

Bonne génération, et écrivez-nous à contact@cloclo.app si vous avez un prompt qui marche encore mieux 👇