Présentation du produit

Graphical UI se positionne comme un outil SaaS dédié à la création de thèmes visuels pour applications web. Le service propose un abonnement unique de 1 200,35 $, avec un premier paiement de 30,32 $ prévu le 9 août et un solde de 500 $ à régler ensuite. Le tableau de bord inclut des sections telles que Projects, Inbox, Team, Settings et permet de choisir parmi des styles prédéfinis (Felt, Airy, Quiet, Bold, Compact, Motion, Snappy) ainsi que des palettes de couleurs (Neutrals, Mono, Primary, Action, Neutral).

Architecture et intégration d’IA

Le service s’appuie sur des modèles de génération de texte comme ChatGPT, Claude, Cursor ou Grok pour proposer des suggestions de design en temps réel. L’interface indique « Build beautiful interfaces with the agent you already use », ce qui implique que les requêtes sont transmises à l’API du modèle choisi, puis les réponses sont traduites en propriétés CSS ou en composants prêts à l’emploi. Cette approche réduit le besoin de rédaction manuelle de tokens, mais introduit une dépendance aux quotas et aux latences des services d’IA externes.

Système de tokens CSS et personnalisation

Graphical UI expose plus d’une centaine de variables CSS personnalisées, par exemple :

:root {
  --space-xs:8px;
  --radius-m:16px;
  --color-1:#98ff20;
  --font-ui:"Timeless Grotesk", sans-serif;
  --shadow-m:0px 2px 6px 0px #2525220d, 0px 8px 24px 0px #25252213;
}

Ces tokens couvrent l’espacement, les rayons, les couleurs, les typographies et les ombres, offrant un contrôle granulaire du rendu. Le fait que les valeurs soient déclarées sous forme de --variable permet de les modifier à la volée via JavaScript ou de les remplacer par des thèmes alternatifs sans recompilation du code source. L’installation du package se fait via la commande suivante :

shadcn my-app — zsh my-app % ⠋ Checking registry. ⠋ Updating files.

Le script utilise le gestionnaire de composants shadcn pour injecter les tokens dans le projet, ce qui simplifie l’intégration dans des stacks React ou Next.js.

Limitations et perspectives

Le modèle économique repose sur un paiement unique, sans indication claire d’un modèle de mise à jour ou de support continu. Le produit ne fournit pas de numéro de version ou de changelog, ce qui complique l’audit de sécurité. De plus, la dépendance aux API d’IA expose les utilisateurs à des risques de fuite de données de conception. Enfin, la surcharge potentielle de plus de 100 variables CSS peut impacter les performances de rendu sur des appareils mobiles, surtout si les valeurs sont recalculées dynamiquement. Une évolution vers un système de tokens plus modulaire et une documentation ouverte améliorerait la transparence et la maintenabilité.