Concevoir sans designer : créer des interfaces directement dans le terminal

Une histoire familière : vous écrivez du code, la logique fonctionne parfaitement, mais tout ressemble à un vestige des années quatre-vingt-dix. Pour que ça soit beau, soit vous devez ouvrir Figma et vous rappeler comment dessiner des rectangles, soit vous appelez un designer et attendez une semaine. Mais si vous avez simplement besoin de dessiner rapidement un prototype ou de préparer une présentation pour un meetup ?

Récemment, je suis tombé sur le dépôt huashu-Design. Ce n'est pas un autre éditeur graphique ou une bibliothèque de composants UI au sens traditionnel. C'est une « compétence » pour les agents IA (comme Claude Code ou Cursor) qui transforme des invites de texte en artefacts de design prêts à l'emploi et fonctionnels. Vous tapez littéralement dans le terminal : « Fais-moi un prototype d'application iOS de suivi d'habitudes », et quelques minutes plus tard, vous obtenez un fichier HTML interactif.

Qu'est-ce que c'est exactement

L'auteur du projet, le développeur connu sous le nom de 花叔 (Huasheng), a décidé de porter la philosophie du Claude Design sur la ligne de commande. L'idée centrale est qu'un bon design ne naît pas dans le vide. Il se développe à partir d'un contexte : directives de marque existantes, logos et palettes de couleurs.

Huashu Design est un ensemble d'instructions et d'outils qui apprennent à un réseau neuronal à travailler comme un designer junior professionnel. L'outil peut extraire les couleurs de votre site, sélectionner des polices et générer non seulement des images, mais du code fonctionnel.

Ce que cet outil peut faire

Le projet répond à plusieurs points douloureux des développeurs en matière de visuels. Voici ce qu'il produit :

1. Prototypes interactifs. Il génère des fichiers HTML avec une maquette de cadre iPhone 15 Pro. Les boutons sont cliquables, les écrans changent, les données proviennent d'API réelles ou de mocks.
2. Présentations PPTX. Vous demandez de dessiner des diapositives pour un exposé, et l'outil crée un deck HTML qui peut être converti en PowerPoint standard. Et ce ne seront pas des images—ce seront des blocs de texte modifiables.
3. Motion design. Il dispose d'un moteur Stage + Sprite intégré. Vous pouvez lui demander de créer une animation du flux de travail de votre algorithme et obtenir une sortie MP4 ou GIF.
4. Infographies. Si vous avez besoin de visualiser des données pour un article ou un rapport, l'outil met en page une grille de magazine en utilisant CSS Grid.

Un détail intéressant : le projet comprend 40 styles prêts à l'emploi (20 pour le web et 20 pour les présentations). Cela permet d'éviter le style typique « généré par IA » avec des dégradés violets et des icônes standardisées dont tout le monde est déjà fatigué.

Comment ça fonctionne en coulisses

La chose la plus précieuse ici est le protocole de travail de marque. Lorsque vous demandez de créer un design pour une entreprise spécifique, l'agent ne devine pas les couleurs. Il suit un algorithme strict :

• Recherche la page officielle brand.company.com.
• Télécharge les logos au format SVG.
• Analyse les fichiers CSS du site pour extraire les codes couleur HEX exacts.
• Sauvegarde tout dans le fichier brand-spec.md.

Ce n'est qu'après cela que le rendu réel commence. Cette approche garantit que le résultat n'aura pas l'air d'un travail improvisé aléatoire.

Pour les animations, un modèle de timeline est utilisé. Vous décrivez la logique via des API comme useTime ou interpolate, et des scripts intégrés basés sur Playwright le rendent en flux vidéo.

Comment l'essayer

L'outil est optimisé pour Claude Code, mais il peut être adapté pour d'autres outils IA. L'installation est simple :

npx skills add alchaincyf/huashu-design

Après cela, vous pouvez donner des commandes directes dans le chat de l'agent. Par exemple : « Fais une présentation sur la psychologie de l'IA en 3 variantes de style. » L'agent ne se contentera pas de balancer du texte—il suggérera trois directions visuelles basées sur sa bibliothèque de styles.

Qui trouvera cela utile

Je vois deux scénarios principaux. Le premier est le test rapide d'hypothèses. Quand vous avez besoin de montrer à un client ou à une équipe comment une fonctionnalité va fonctionner sans passer des heures sur des maquettes. Le second est la création de contenu. Si vous tenez un blog ou donnez des conférences, la capacité de préparer une présentation élégante ou une animation directement en écrivant du code est un gain de temps considérable.

Le projet est récemment passé sous licence MIT, il peut donc être librement utilisé à des fins commerciales.

Bien sûr, huashu-Design ne remplacera pas un directeur artistique. Les interfaces complexes avec un raffinement UX profond nécessitent toujours des mains humaines. Mais pour des tâches du type « fais que ça ait l'air bien et vite », c'est sans doute l'une des solutions les plus intéressantes que j'ai rencontrées récemment.

Si vous en avez assez de vous battre avec CSS ou voulez simplement que vos projets secondaires aient l'air respectables—jetez un œil au dépôt. Le README contient de nombreux exemples en direct qui expliquent les capacités mieux que n'importe quel texte.