Fountible : canvas de design en React et Tailwind, panneau Calques à gauche, inspecteur à droite
|

FOUNTIBLE : le canvas de design qui est déjà votre React

Parcmondary

⏱️ Temps de lecture estimé : 4 minutes

https://fountible.com/

📌 Fountible est un outil de design visuel dont le canvas n’est pas une image de composants : il affiche du vrai React stylé en Tailwind. Vous dessinez, Bro (l’agent IA) écrit des couches éditables sur vos variables, et l’export sort le JSX que le canvas affichait déjà.

Figma reste excellent pour dessiner, mais son plan de travail reste à côté du code : le design repart en dev mode, en inspect, puis en reconstruction. Fountible prend le pari inverse — et ses docs le montrent au lieu de le promettre. Sélectionnez un bloc, ⌘⇧C sort le JSX Tailwind avec les classes affichées dans l’inspecteur, et vos variables de document deviennent des utilitaires Tailwind plutôt que des valeurs figées. Une timeline part en anime.js brut.

Bro répond à des demandes concrètes : « ajoute une section tarifaire », « construis ce deck ». Il produit de vraies couches que vous continuez d’éditer. Chaque requête démarre avec un instantané de la page — calques de premier niveau, sélection, variables — plutôt qu’avec le fichier entier, et joindre un calque ajoute son JSX exporté plus une capture. Depuis la 0.0.349 du 4 octobre, jusqu’à six conversations Bro travaillent en parallèle sur le même fichier, chacune avec son modèle et sa cible de canvas ; une tâche qui vise les mêmes calques attend son tour. La doc reste plus mesurée : un Bro construit dans deux frames à la fois.

L’agent ne vient pas avec un abonnement. On se connecte avec son plan ChatGPT (navigateur et Mac via la CLI Codex), son plan Claude Pro ou Max — réservé à l’app Mac, Anthropic le réservant à Claude Code —, son plan Cursor sur Mac, ou une clé Anthropic (web) ou Kimi K3 (web et Mac, en raisonnement Max), chiffrée au repos. Fountible ne facture rien pour Bro : c’est votre plan qui encaisse, dans la limite de 300 exécutions par semaine. Nuance : dans le navigateur, la connexion ChatGPT passe par leurs serveurs ; dans l’app Mac, vos sessions restent sur votre machine.

Pour qui sort de Figma, le geste le plus utile : copiez une sélection, collez avec ⌘V. Frames, sections, auto layout, texte à styles mélangés, vecteurs, remplissages et effets arrivent en calques natifs, décodés sur votre poste, en une étape d’annulation. La doc est honnête sur ce qui ne suit pas : les instances copiées ne deviennent pas des composants liés, les booléens deviennent des frames, les nœuds masqués sont ignorés, et une image privée exige l’accès par lien.

Le reste du métier suit la même logique : presets d’entrée, d’emphase et de boucle, keyframes sur la position, l’échelle, la rotation, l’opacité et le flou, rotation X/Y/Z cléframable, audio sur la piste. Les 100 shaders de la galerie tournent dans un seul contexte GPU grâce à 22 moteurs. Export JSX, HTML, SVG, anime.js, PNG ou JPEG en plusieurs tailles, PDF et PPTX depuis le Mac, MP4 avec alpha. En équipe : 12 curseurs vivants sur un fichier et une sauvegarde automatique toutes les 30 minutes.

  • 🧩 Le canvas est le DOM : l’inspecteur et le JSX d’export montrent les mêmes classes
  • 🤖 Bro écrit des couches Tailwind éditables, six conversations en parallèle sur un fichier
  • 📋 Coller depuis Figma donne des calques natifs, décodés en local, annulables d’un geste
  • 🎬 Les keyframes partent en anime.js brut, rotation 3D comprise, avec le compilateur de la lecture
  • 🔌 Un connecteur MCP local ouvre les calques à Claude Code, Claude Desktop et Cursor

Ce connecteur MCP mérite un détour : éteint par défaut, il sert un serveur local sur 127.0.0.1:7800/mcp, lance claude mcp add pour Claude Code, livre un bundle .mcpb à Claude Desktop et n’ajoute qu’une entrée dans ~/.cursor/mcp.json pour Cursor. L’agent lit le canvas, insère du HTML ou des vecteurs, crée une variable, importe une page en 1:1 — et se cantonne à la lecture seule sur un fichier sans droits d’édition.

Mon avis : la promesse « le design est le code » est vérifiable ici, ce qui est rare pour un jeune produit, et la page de comparaison admet que Figma reste pertinent pour l’illustration. Les réserves sont ailleurs : la version 0.0.356 et un projet « built with AI in 4 weekends » signé par un seul designer, Onur Oztaskiran, disent que l’outil bougera beaucoup. L’app Mac est réservée à l’Apple silicon ; le reste passe par le navigateur, gratuitement et sans carte bancaire.

Sources

Publications similaires

Laisser un commentaire