Quand on demande une UI à une IA, les composants ont l’air corrects, mais une fois assemblés, ça se voit que c’est « généré ».
La cause, ce ne sont pas des pièces laides, mais des pièces qui ne vont pas ensemble — l’absence de cohérence.
La solution est étonnamment simple : pour chaque axe (coins, couleur d’accentuation, espacement, ombre), on ne choisit qu’une seule valeur, puis on aligne tout dessus.
J’ai résumé cela avec des références à Refactoring UI, Material 3, Apple HIG et WCAG, ainsi qu’avec du CSS prêt à copier-coller.
Démo à voir directement : https://styleseed-demo.vercel.app/how-it-thinks
Open source (MIT) : https://github.com/bitjaru/styleseed
7 commentaires
Ce serait bien que l’UX writing de Toss soit aussi documenté.
Je vais m’y préparer.
Ça paraît presque évident, mais c’est un point auquel je n’avais pas pensé ; j’ai hâte de voir à quel point ça pourrait améliorer les choses une fois appliqué.
N’hésitez pas à l’essayer et à publier librement vos retours sur GitHub !
Ne peut-on pas simplement appliquer les règles de l’agent une fois que le design system est déjà en place ?
Oui, on peut utiliser uniquement les règles.
Les règles de StyleSeed n’imposent ni couleurs ni composants précis ; elles ne contiennent que des critères de décision du type « dans ce cas, faites ainsi », et peuvent donc être superposées telles quelles à un système existant.
Sans installation, une seule phrase suffit :
"https://styleseed-demo.vercel.app/llms.txt lis ceci et applique ces règles de design"
Si vous voulez systématiser un design existant, notez dans ce fichier, ligne par ligne, les choix déjà définis (espacement, arrondis, couleur d’accentuation, etc.). L’agent les réutilisera sur chaque nouvel écran, ce qui finira par former un système cohérent. Les règles de base servent de point de départ, et vous pouvez modifier celles qui ne vous conviennent pas.
Cela m’a beaucoup aidé. Merci.