Comment réparer les approximations CSS de Claude Code avec un système de design

Un développeur créant un tableau de bord d'analyse boursière avec Claude Code a rencontré une frustration courante : l'IA générait à plusieurs reprises du CSS cassé pour la même div mal alignée. Sur six itérations, les tentatives de correction du padding, le passage du flex au grid et l'ajout de overflow: hidden ont soit échoué, soit aggravé le problème.

Le problème : l'IA conçoit à l'aveugle

Le développeur a réalisé que Claude Code n'a aucun retour visuel — il ne peut pas voir le rendu du navigateur. Il fait correspondre des motifs à partir de descriptions et devine le style, produisant souvent « du CSS techniquement valide qui semble avoir été conçu par quelqu'un qui n'a jamais utilisé d'ordinateur ».

La solution : contraindre avec un système de design

Au lieu de donner des jetons, fournissez une spécification complète du système de design. Le développeur a utilisé :

/* espacement */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;

/* couleurs */
--bg-primary: #0f1117;
--bg-card: #1a1d27;
--accent: #3b82f6;
--text-primary: #e2e8f0;
--text-muted: #64748b;
/* échelle typographique */
--text-sm: 12px;
--text-base: 14px;
--text-lg: 18px;
--text-xl: 24px;

Puis donnez l'instruction : « Utilisez uniquement ces valeurs. Aucun nombre codé en dur nulle part. » Cela donne à Claude un cadre pour raisonner plutôt qu'une toile vierge pour des décisions arbitraires.

Séparer les instructions de structure et de style

Ne demandez jamais à Claude d'écrire du HTML et du CSS simultanément. Le développeur a divisé le processus :

• Première instruction : « Générez uniquement la structure HTML pour ce tableau de bord. Pas d'attributs de style, pas de CSS, pas encore de classes. Juste une structure sémantique. »
• Deuxième instruction : « Maintenant, écrivez le CSS pour cette structure en utilisant uniquement le système de design ci-dessus. »

Cela force Claude à traiter le HTML comme un contrat fixe avant d'appliquer les styles, l'empêchant de perdre la trace des hypothèses sur sa propre sortie.

Le résultat : le composant suivant est passé de six itérations à une seule. Le développeur a également soulevé la question de savoir si ce système de design pourrait être imposé via un fichier CLAUDE.md pour éviter de le coller à chaque session.