Du blueprint cloclo au site déployé en 10 minutes

L'objectif de cet article : démontrer concrètement le workflow le plus rapide possible avec cloclo, du clic initial au site live et publiquement accessible. 10 minutes chrono, sans ouvrir Figma, sans écrire une ligne de CSS.

Pré-requis : un compte Pro cloclo + un compte Vercel (gratuit) + Node 20 et pnpm installés en local.

⏱️ 0:00 — Lancer l'analyse

Connectez-vous à cloclo.app et cliquez sur "Nouvelle analyse" depuis votre dashboard.

URL à coller : https://linear.app (ou n'importe quel autre site dont le design vous parle).

Cliquez "Analyser". cloclo lance le scrape + l'analyse IA en parallèle. Compte 30-90 secondes selon la complexité du site.

⏱️ 1:00 — Le blueprint est prêt

Vous arrivez sur la page détail. Vous voyez :

• Un screenshot du site analysé
• Un panel "Site Next.js prêt à déployer" (visible uniquement en Pro)
• Le blueprint Markdown rendu en bas

Cliquez le bouton "Télécharger le site Next.js". cloclo envoie le blueprint à Claude Sonnet, qui génère ~15-25 fichiers du projet (page.tsx, layout, components, package.json, etc.).

Compte 60-120 secondes pour la génération.

⏱️ 3:00 — Vous récupérez un zip

Un fichier cloclo-site-linear.app.zip (~25 KB) se télécharge. Décompressez-le quelque part :

unzip cloclo-site-linear.app.zip -d mon-site
cd mon-site

Vous y trouvez la structure Next.js 16 + Tailwind v4 standard :

• app/layout.tsx + app/page.tsx + app/globals.css
• components/Header.tsx, Hero.tsx, Footer.tsx, etc. (un par section du blueprint)
• package.json, tsconfig.json, next.config.ts, README.md

⏱️ 4:00 — Installer + lancer en local

pnpm install
pnpm dev

Ouvrez http://localhost:3000. Vous voyez un site avec :

• La même palette que Linear (#5E6AD2 indigo, #F5C518 jaune, fond #0D0D0D)
• La même typo (Inter dans toutes les weights utilisées)
• Les mêmes sections dans le même ordre (Header → Hero → Feature sections → Footer)
• Du contenu inspiré, pas copié (les textes sont des placeholders cohérents avec le domaine du site source)

C'est votre point de départ. À ce stade vous pouvez customiser : changer la copy, remplacer les placeholders par votre logo, ajuster les sections.

⏱️ 6:00 — Personnaliser la copy

Éditez app/page.tsx. Remplacez le titre du hero (qui est inspiré de Linear) par votre vraie value prop :

<h1>L'outil qui aide les équipes design à livrer 3x plus vite</h1>

Ajustez app/globals.css si vous voulez changer la palette : les tokens sont dans @theme inline { --color-primary: #VOTRE_HEX; ... }.

Ne touchez pas la structure — c'est tout l'intérêt du blueprint, elle est déjà pensée pour convertir.

⏱️ 8:00 — Déployer sur Vercel

# Si vous n'avez pas la CLI
npm i -g vercel

# Depuis le dossier mon-site
vercel

La CLI vous demande :

• Set up and deploy ? → Yes
• Which scope ? → votre compte
• Link to existing project ? → No
• Project name ? → mon-super-site (ou autre)
• In which directory is your code located ? → ./ (défaut)
• Want to override settings ? → No

Vercel build + déploie en ~30 secondes. Vous récupérez une URL https://mon-super-site.vercel.app.

⏱️ 10:00 — Le site est live

Vous avez maintenant un site Next.js + Tailwind v4 publiquement accessible, déployé sur l'edge mondial de Vercel, avec :

• HTTPS automatique
• Image optimization (si vous ajoutez des images)
• ISR / SSG
• Logs runtime + analytics dispo dans le dashboard Vercel

Le tout pour 10 minutes de travail et 29 € / mois (votre abonnement cloclo Pro).

---

Ce qu'on a pas fait

• Pas ouvert Figma
• Pas écrit une ligne de CSS
• Pas configuré Tailwind
• Pas écrit de package.json à la main
• Pas googlé "Next.js layout component"
• Pas demandé conseil à ChatGPT

Le blueprint cloclo + Site Generation Pro fait le scaffold technique, vous restez 100% sur le contenu et le positionnement.

Et après ?

Une fois le site live, votre travail commence vraiment : itérer sur la copy, ajouter des sections au fur et à mesure, brancher l'analytics, mesurer ce qui convertit. cloclo vous a juste fait économiser les 8h de scaffold initial — utilisez-les pour ce qui compte vraiment.