Asma.ds, un design system AI driven
asma.dsprojet personnel
Le contexte
Concevoir un système agentique
Les outils d'IA capables de générer du code et des interfaces changent progressivement la manière dont je peux concevoir un produit. Mais plus la génération devient rapide, plus une question paraît importante :
Comment transmettre à une IA les règles de conception d'un produit, et pas seulement lui demander de générer une interface ?
C'est de cette question qu'est né Asma.ds. Je voulais expérimenter la construction d'un Design System qui ne soit pas uniquement une bibliothèque de composants dans Figma, mais une source de vérité structurée, capable d'être comprise et exploitée par différents acteurs : designer, développeur et IA.
L'objectif était donc de formaliser ce qui est habituellement dispersé entre Figma, documentation, code et décisions prises au fil du projet.
Asma.ds est ainsi devenu un laboratoire pour explorer la relation entre Design System, DesignOps, code et IA.
L’équipe
Aurélien BiardProduct Designer / Design Technologist
Je porte la direction du projet et les décisions de conception (product thinking - structure du Design System - choix UX/UI - tokens et principes de conception - composants et comportements - guidelines - documentation & validation des résultats)
Claude CodeAgent de développement
Génération guidelines & tokens - construction du design system (figma - code - github) - workflow de synchronisation : l’agent capable de construire et de faire évoluer le système à partir des règles que j'ai définies.
Chat GPTAgent de conception et de réflexion
Partenaire de conception et de structuration pour explorer les problématiques produit, travailler sur la documentation et réfléchir à la manière dont le système doit être compris par une IA.
Workflow
Product thinking / UX / UI
- conception / règles
- documentation
- exploration
- agent de build
- implémentation
- GitHub / Figma
Tâches & réalisations
Structuration du Design System
- Architecture globale du système
- Organisation des foundations, tokens, composants et patterns
- Structuration des catégories de variables
- Définition des relations entre tokens primitifs, sémantiques et aliases
- Gestion des modes Desktop / Mobile
- Mise en place d'une nomenclature cohérente
Design tokens
- Définition des primitives de couleur
- Construction de tokens sémantiques
- Gestion des aliases
- Typographies, espacements, dimensions, états, etc.
Conception des composants
Ensemble de composants destinés à couvrir les besoins d'une application métier.
Documentation & guidelines
- Documentation des composants
- Règles d'utilisation
- États et comportements
- Guidelines UX
- Accessibilité
- Cas d'usage
- Relations entre composants
- Règles destinées à être comprises par un humain mais également interprétables par une IA
Figma → Code → IA
Mise en place d'une structure permettant de faire circuler les informations entre :
Design System → Figma → documentation → code → IA
L'enjeu est de limiter les interprétations et les divergences entre les différents environnements.
Ce portfolio a lui-même été conçu avec Asma.ds, une mise en pratique concrète du Design System à travers un produit réel, de ses fondations à son interface.
L’étape d’après
Asma.ds constitue la première étape : construire le langage et les règles du système. La prochaine étape consiste à utiliser ce système pour construire un produit réel : Asma.os
Asma.os est un environnement logiciel personnel destiné à structurer mon activité quotidienne : entreprises, contacts, projets, notes, références et tâches. L'objectif n'est pas simplement de créer une application de productivité supplémentaire. Il s'agit surtout de mettre Asma.ds à l'épreuve dans un produit réel et de poursuivre l'expérimentation autour d'un nouveau workflow de conception et de développement assisté par des agents IA.
Voir le repo Github(nouvel onglet)