Chapitre 4.4 — Les skills de design

⏱️ TL;DR — Trois skills changent la donne côté design, et tu les as probablement déjà : prototype (explorer plusieurs pistes d’UI jetables avant de s’engager), artifact-design (fondamentaux de design quand tu produis une page/artefact autonome), et dataviz (à lire avant de coder le moindre graphique). Elles ne remplacent pas ton système (tokens + primitives) : elles t’aident à décider et à explorer sans polluer le vrai code. On les détaillera en Partie 9 ; ici, on voit quand les mobiliser pour la cohérence.

🎯 Objectifs

• Savoir quand utiliser prototype, artifact-design, dataviz.
• Explorer des variantes d’UI sans dériver dans le vrai projet.
• Comprendre le lien entre ces skills et ton design system.

prototype — explorer avant de s’engager

Ta douleur « designs incohérents » vient parfois d’un manque en amont : tu fais coder la « bonne » UI du premier coup, tu la trouves moyenne, tu la retouches, et à force de retouches, elle diverge. La skill prototype propose l’inverse : construire un prototype jetable pour trancher une question de design avant de l’implémenter pour de vrai. Elle route entre deux modes :

• une app terminal jetable quand la question porte sur l’état / la logique métier ;
• plusieurs variantes d’UI basculables depuis une seule route, quand la question est visuelle.

L’intérêt anti-dérive : tu décides la direction sur des maquettes jetables, puis tu implémentes une version dans le vrai design system. Le vrai code ne sert pas de brouillon.

💡 Réflexe d’architecte — Le prototype est un brouillon assumé, hors du repo de prod. Ne le laisse pas se transformer en base du vrai code : sa valeur est de te faire décider vite, pas de produire du code à garder. Une fois la décision prise, on repart proprement dans le système.

artifact-design — les fondamentaux quand tu produis une page

Quand tu génères une page ou un artefact autonome (une landing, un rapport HTML, un dashboard one-shot), tu n’as pas forcément ton design system sous la main. La skill artifact-design apporte les fondamentaux (hiérarchie, espacement, typographie, thème clair/sombre, responsive) pour que le résultat soit soigné et cohérent en lui-même. À charger avant d’écrire la page, pas après.

Le lien avec la cohérence : même hors de ton projet, elle t’évite le « chaque artefact a son style au hasard ». Et les principes qu’elle rappelle (tokens, hiérarchie, contraste) sont exactement ceux de ton design system — elle renforce tes réflexes.

dataviz — avant tout graphique

Dès qu’il y a un graphique (courbe, barres, KPI, sparkline, heatmap), la cohérence visuelle a ses propres règles (palette catégorielle accessible, choix de la forme, axes, légende). La skill dataviz est à consulter avant d’écrire la première ligne de code de graphe, quel que soit le support (SVG, Recharts, un artefact…). Elle t’évite les pièges classiques (palette illisible, camemberts à 12 parts, double axe trompeur) et donne une méthode reproductible.

⚠️ Piège — Attendre d’avoir codé un graphique « à l’instinct » pour se demander s’il est lisible. Ces skills sont des skills d’amont : leur valeur est de cadrer avant. Après coup, tu répares ; avant, tu fais bien du premier coup.

Et les skills communautaires

L’écosystème regorge de skills orientées front (par ex. une skill frontend-design circule dans des collections de skills d’ingénierie). On verra en Partie 9 comment les évaluer et les installer. Le principe reste : une skill de design t’aide à décider et cadrer, elle ne remplace ni tes tokens ni tes primitives — qui, eux, garantissent la cohérence du vrai code dans la durée.

🧭 Sur TaskFlow — Pour l’écran « tableau de bord » de TaskFlow (avec ses petits indicateurs), on consultera dataviz avant de coder les graphes, et on pourrait passer par prototype pour choisir la disposition des colonnes de tâches (kanban ? liste ?) avant de l’implémenter dans nos primitives. Décider dehors, implémenter proprement dedans.

✏️ Exercices

Exercice 1 — Prototype une décision. Prends une question d’UI ouverte de ton projet (disposition d’un écran, deux styles de carte). Lance prototype en mode variantes, choisis-en une, puis implémente-la proprement dans ton système.

Exercice 2 — dataviz d’abord. Avant ton prochain graphique, lis/charge dataviz et applique sa méthode (forme, palette accessible, axes). Compare avec ce que tu aurais fait « à l’instinct ».

🧠 Quiz de révision

Chapitre suivant : Atelier — le design system de TaskFlow — tokens, primitives et garde-fous en pratique.