Comment j’ai construit vibe.nfrancois.fr avec Claude Code

Le point de départ

Je voulais un endroit pour montrer les outils que je construis avec l’IA, à une adresse à moi : vibe.nfrancois.fr. Le site a été construit avec Claude Code, en sessions dans le cloud, de la première ligne au logo animé. Il a surtout changé de direction plusieurs fois avant de trouver sa forme. Cet article raconte les deux : la technique, et les fausses pistes.

La stack

• Next.js 14 (App Router), pages entièrement statiques, hébergées sur Vercel.
• CSS sans framework. Tailwind a été retiré en cours de route.
• Geist et Geist Mono, auto-hébergées, et des pictos Phosphor copiés tels quels.
• Claude Code dans une session cloud, avec Chromium et Playwright pour vérifier chaque changement.
• Markdown, Shiki et unified pour le carnet, depuis le 12 octobre.

Les étapes

29 septembre : le hub qui faisait fausse route

La première version était ambitieuse : un catalogue de projets sur Supabase, avec connexion, projets privés, invités, fiches privées et règles de publication. En trois quarts d’heure, Claude Code avait posé le projet Next.js, les migrations Supabase et les fonctions Vercel à Paris, près de la base.

Douze jours plus tard, en le relisant, j’ai écrit : « Je pense que ce projet fait fausse route. Je voudrais juste une page qui liste mes projets de vibe coding. » Le hub a été réduit à une seule page statique. Seule la base Supabase a survécu, pour l’atelier interactif d’un événement.

11 et 12 octobre : trois directions graphiques

Une fois la page réduite à l’essentiel, j’ai cherché son style. Trois directions se sont succédé en deux jours :

1. La charte de nfrancois.fr, claire puis sombre « premium ». Je voulais finalement un rendu plus « site tech ».
2. Un registre « outil de dev », façon Vercel, Supabase ou Neon : fond quasi noir, filets d’un pixel, grille qui s’estompe, une seule couleur vive. C’est là qu’est né le socle commun.
3. Le lime et le clair par défaut, après avoir écrit une charte (voir plus bas).

Le socle commun

Le choix technique le plus utile du projet : un seul fichier CSS, /kit/vibe.css, partagé par l’accueil et par chaque projet. Il porte les couleurs, les polices et les composants préfixés v- (boutons, pastilles, barre de navigation, pied de page). Un petit script, /kit/theme.js, applique le thème clair ou sombre avant l’affichage et mémorise le choix pour tout le site.

Un projet comme Impact IA reste un fichier HTML autonome. Il charge simplement le socle et garde ses propres couleurs à l’intérieur.

Un design system qui lit son propre CSS

Le design system, sur /design-system (une page de vibe, non reprise sur nfrancois.fr), montre chaque couleur dans les deux thèmes avec son contraste. Plutôt que de recopier les valeurs, la page les lit dans vibe.css au moment du build :

export function kitTokens() {
  const css = fs.readFileSync(path.join(process.cwd(), 'public/kit/vibe.css'), 'utf8');
  const light = vars(block(css, ':root {'));
  const dark = { ...light, ...vars(block(css, ':root[data-theme="dark"] {')) };
  return (names: string[]) => names.map((n) => ({ name: n, dark: dark[n] ?? '', light: light[n] ?? '' }));
}

Changer une couleur dans le socle suffit à mettre la page à jour. Ce contrôle a d’ailleurs révélé un défaut : le gris des métadonnées ne faisait que 3,9:1 de contraste en sombre. Il a été relevé pour passer 4,5:1 partout.

Écrire une charte avant de redessiner

Après la deuxième direction, j’ai écrit un nouveau brief, avec des maquettes en lime. Plutôt que de lancer une troisième refonte, j’ai demandé à Claude de me poser les questions une par une : pour qui est le site, ce qui le distingue de mon site pro et de ma newsletter, quels contenus, quel rythme, quelle identité.

Douze questions plus tard, la charte tenait en une page dans CLAUDE.md, le fichier que Claude Code relit à chaque session. Elle fixe les choix et ajoute une règle de gel : plus de refonte avant cinq contenus publiés.

Le logo : vectoriser sans redessiner

Le logo est un dessin à la main. Pour le passer en vectoriel sans le trahir, Claude Code l’a tracé automatiquement avec potrace. Il a ensuite comparé le résultat à l’image d’origine par superposition. Deux retouches seulement : une bosse retirée au pied du « b », et le point du i recentré sur la barre.

Pour l’animer, il fallait que le logo « s’écrive ». Comme il est fait de formes pleines, on ne peut pas dessiner son contour. La solution : un masque par geste de plume, un trait épais invisible qui suit le squelette des lettres et révèle le dessin au fur et à mesure.

.vibe--anime .vibe__g0 { animation: vibe-trace .32s cubic-bezier(.45, 0, .55, 1) .05s backwards; }
@keyframes vibe-trace { from { stroke-dashoffset: 1; } }

Ce qui a coincé

• Les masques trop larges. Un seul geste par lettre faisait apparaître des morceaux de la lettre voisine à mi-animation. Il a fallu découper le « b » (haste puis panse) et le « e » (barre puis boucle), et limiter chaque lettre à sa zone par un tracé qui suit le blanc entre elles.
• La production qui suivait une ancienne branche. Vercel construisait la production depuis la branche de la toute première session. Pendant un temps, chaque changement était poussé sur deux branches.
• Un serveur local qui gardait l’ancien CSS. next start ne servait pas les fichiers de public/ modifiés après son démarrage. Il fallait le relancer à chaque fois.
• Un <style> dans un SVG intégré s’applique à toute la page. Les schémas du carnet n’utilisent donc que des attributs style, et le build refuse les autres.

Temps et coûts

• Trois moments de travail : la soirée du 29 septembre, celle du 11 octobre, puis le 12 octobre. Au total, 36 commits à la date de cet article.
• Abonnement Claude Max, hébergement sur Vercel. Pas d’autre service payant pour le site.

À retenir

• Écrire la charte avant de dessiner. Trois directions graphiques en deux jours, c’est le signe qu’il manquait une décision en amont, pas un meilleur dessin.
• Un socle partagé paie tout de suite. Le passage du jaune au lime s’est fait en changeant quelques variables, et Impact a suivi sans y toucher.
• Faire vérifier dans un vrai navigateur. Les captures Playwright, sur ordinateur et sur mobile, en clair et en sombre, ont trouvé des défauts qu’aucune relecture de code n’aurait vus.
• Garder un fichier de décisions. CLAUDE.md évite de rejouer les débats d’une session à l’autre.