Résoudre la dette de design des outils de codage IA avec un seul fichier Design.md
makedream8 मई 2026
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
Avec les outils de codage IA, quelques prompts suffisent pour obtenir une page plutôt correcte. Le problème survient juste après. La courbure d'un bouton nouvellement généré diffère de celle de la page d'à côté, et la saturation de la couleur de marque est légèrement faussée. La vitesse de développement est rapide, mais le résultat est bâclé. En effet, sans contexte, l'IA propose les valeurs moyennes les plus courantes. Pour résoudre ce problème, vous devez insérer un fichier Design.md à la racine du projet et imposer des contraintes strictes à l'IA.
Demander à l'IA d'utiliser un “bleu élégant” est une perte de temps. L'IA ne se nourrit pas d'adjectifs, mais de données normalisées. Spécifiez votre système de design en le divisant en trois couches : Primitif (Primitive), Sémantique (Semantic) et Composant (Component).
blue-500: #3B82F6.bg-primary: var(--blue-500).[category]-[property]-[modifier] pour forcer l'utilisation de noms tels que $color-background-hover.Selon une étude de cas sur la collaboration UI en 2025, les équipes utilisant des tokens ainsi structurés ont réduit le taux de bugs UI de 14 à 4 incidents par sprint. Lorsque l'IA commence à choisir des classes en fonction de la fonction et non du code couleur, 70 % du temps de modification du design disparaît. Si vous utilisez Tailwind CSS, ordonnez à l'IA de mapper ces tokens un à un avec le fichier tailwind.config.js.
Plus l'IA a de liberté, plus elle fait des choix stupides. Pour obtenir des marges cohérentes sur chaque page, vous devez intégrer les mesures sous forme de tableau dans les spécifications.
| Propriété | Valeur | Règle d'application |
|---|---|---|
| Courbure du bouton | 8px | Fixé à rounded-lg, modification arbitraire interdite |
| Espacement de section | 64px | Espacement vertical entre toutes les sections principales |
| Largeur maximale | 1280px | Limite d'alignement central du contenu principal |
Limitez les unités d'espacement à des multiples de 8px et fixez le padding des cartes à 24px. Il est particulièrement efficace de créer une section d'anti-patterns. En ajoutant des clauses d'interdiction telles que “Ne pas mettre plus de 3 boutons CTA sur un seul écran” ou “Utiliser une bordure de 1px au lieu d'une ombre”, l'IA commence par éliminer les mauvaises réponses potentielles avant de travailler. Ce simple tableau réduit de plus de moitié le nombre de corrections manuelles.
Si le ton change selon la fonctionnalité ou si les styles d'icônes sont mélangés, l'application aura l'air bas de gamme. Spécifiez la persona de la marque dans Design.md. Vous devez décider à l'avance si un message de succès doit être “Mise à jour terminée” ou “Prêt !”.
Les icônes doivent suivre le protocole suivant :
stroke-width de toutes les icônes à 1.5px.Il en va de même pour le mode sombre. Inverser simplement les couleurs détruit la lisibilité. Comme le recommandent les directives du Google Material Design, spécifiez l'utilisation d'un gris foncé (#121212) au lieu du noir pur pour l'arrière-plan, et insérez la formule pour maintenir un rapport de contraste afin d'éviter automatiquement les bugs d'accessibilité.
Même si les spécifications sont bien rédigées, elles ne servent à rien si l'IA ne les lit pas. Créez des règles spécifiques à l'UI dans le répertoire .cursor/rules/ et forcez la consultation systématique de Design.md avant toute tâche. Selon les données de développement de 2025, les équipes ayant adopté cette routine ont réduit le temps de développement des fonctionnalités de 12,5 heures à 8,1 heures en moyenne.
Désormais, le développeur ne corrige plus le code, mais ajuste simplement les valeurs du document pour modifier l'impression générale du service. Le design ne doit pas être un domaine de sensation, mais d'ingénierie précise pour gagner en rapidité. Trente minutes de documentation initiale évitent des dizaines d'heures de tâtonnement par la suite.