01 · Projets
Projet personnel
Un CRM fictif, du design system au prototype
Un projet vitrine qui montre ma façon de travailler aujourd'hui : le design system généré depuis Claude Cowork connecté à Figma, puis l'expérience utilisateur et le prototypage finalisés à la main dans Figma.
Partir d'un design system qui a fait ses preuves
Un CRM est un outil dense : des listes, des fiches, un pipeline, des tâches. Le Salesforce Lightning Design System 2 a déjà répondu à une bonne partie de ces questions, et ses global styling hooks (--slds-g-color-*, --slds-g-spacing-*) donnent un vocabulaire commun au design et au code. Reprendre ces noms tels quels, c'est faire en sorte qu'un écran conçu dans Figma se code directement avec SLDS.
Une nouvelle identité par-dessus
Sur cette base, une charte graphique propre au projet : un bleu marine pour tout ce qui est interactif, boutons, navigation, focus ; un rouge réservé au logo et aux états d'alerte ; une palette secondaire limitée aux icônes d'objets et à la data-visualisation. Côté typographie, Ubuntu, posée sur l'échelle SLDS : base 13 px, ratio 1,15.
Le design system, généré depuis Claude Cowork
Claude Cowork, connecté à Figma par le serveur MCP, a créé les trois collections de variables. Les primitives portent les valeurs brutes, du navy-50 au navy-900. Les fondations rassemblent espacements (de 4 à 56 px), rayons, élévations et styles de texte. Les alias reprennent les hooks sémantiques SLDS et pointent sur les primitives. Claude a ensuite monté une première version des composants : boutons, champs, cellules de tableau, badges, onglets, cartes. Mon travail à cette étape : cadrer la demande, relire chaque collection, ajuster.
L'IA prend en charge la mise en place. Le temps gagné va à la hiérarchie, aux parcours et aux détails d'interaction.
L'accessibilité vérifiée dès les variables
Avant de dessiner le moindre écran, Claude a contrôlé les contrastes des couples texte et surface au niveau AA. On le retrouve dans la charte : les liens passent en bleu (blue-600), les messages d'alerte en rouge foncé (red-600), et le rouge de marque reste réservé au logo. Chaque composant interactif a aussi son état de focus, jusqu'aux cases à cocher des tableaux.
Finaliser l'expérience dans Figma
La génération donne une base solide, pas un produit fini. La suite s'est faite dans Figma, écran par écran : la liste des comptes, la fiche compte et l'accueil commercial. Densité des tableaux, ordre des informations dans la fiche, place des actions : c'est là que se joue l'expérience.
Un prototype à manipuler
Le prototype part de la liste des comptes. Survol d'une ligne, sélection par case à cocher, ouverture de la fiche depuis le nom du compte, menu d'actions au bout de chaque ligne : les interactions sont portées par les variantes des composants, ce qui les rend réutilisables d'un écran à l'autre.