UI UX Maker

L’outil propose un flux de travail guidé et multi-entrée pour générer un ensemble de tokens de design et des spécifications de composants pour des projets UI. Il accepte des entrées telles que le type d’écran, la catégorie d’appareil, la palette de couleurs, l’échelle typographique, le système d’espacement et les préférences de mise en page, puis produit des artefacts interopérables adaptés aux design systems et au code frontend. Les sorties incluent des tokens de couleur, des tokens typographiques, des échelles d’espacement, des points de rupture et des primitives de composants, avec des variables CSS/SCSS et des modèles JSON prêts à l’emploi. Il est conçu pour les designers, les architectes de design system, les équipes produit et les développeurs frontend recherchant cohérence et rapidité.
La logique centrale dérive des tokens et primitives de mise en page à partir d’entrées structurées, en appliquant des valeurs par défaut raisonnables et des considérations d’accessibilité. Il applique une grille à 12 colonnes par appareil, un système d’espacement évolutif et une carte typographique reliant tailles et hauteurs de ligne. Tous les outputs sont prêts pour la production: variables CSS, tokens de design JSON et options YAML pour les pipelines de tokens. Des variantes optionnelles prennent en charge les différences de marque et les ensembles de tokens réactifs pour plusieurs appareils.
Les cas d’utilisation incluent le démarrage d’un nouveau design system, la création de variantes de thème pour les sites marketing, la préparation de tokens pour le handoff à l’ingénierie et le prototypage d’interfaces avec des espacements et une typographie cohérents. L’outil met l’accent sur les workflows axés sur les tokens et l’interopérabilité des design systems, sans création d’actifs raster, tout en restant indépendant des outils de conception spécifiques, en fournissant des artefacts prêts à l’intégration.
La différenciation provient des tokens adaptés aux développeurs, des primitives de mise en page, de la validation automatique selon les normes d’accessibilité et de multiples formats d’export qui s’intègrent dans les pipelines CI/CD et les outils de design.