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.
📖 Read the full source: r/ClaudeAI
👀 See Also

Construire avec Codex, exécuter avec OpenClaw : une séparation pratique qui fonctionne
Un développeur raconte comment il a surmonté sa frustration avec OpenClaw en construisant la logique d'automatisation avec Codex et en utilisant OpenClaw uniquement comme couche d'exécution — et comment Apple Messages via CarPlay a rendu l'expérience plus proche d'un assistant à la Jarvis.

OpenClaw v2026.3.13 ajoute une configuration de cacheRetention par agent pour réaliser des économies sur les coûts des jetons OpenAI.
OpenClaw v2026.3.13 ajoute une configuration cacheRetention par agent qui permet la rétention du cache des prompts d'OpenAI pendant 24 heures, réduisant potentiellement les coûts des tokens d'entrée jusqu'à 90 % pour les agents dont les cycles de pulsation dépassent 10 minutes.

10 conseils pratiques pour utiliser Claude Code d'après un utilisateur de Reddit
Un utilisateur de Reddit partage des techniques spécifiques pour Claude Code, notamment l'utilisation de /effort high avec 'ultrathink' pour une réflexion prolongée, la création de branches de conversation isolées avec /fork, et la configuration de crochets personnalisés dans .claude/settings.json.

Optimisation des coûts d'OpenClaw : De 200 $ à 1 $/mois
Aucun