Forma : créer un canvas de design éditable
Un prototype local d’outil de design qui explore l’après-génération par IA : révéler la structure d’un composant, l’inspecter en 3D et continuer à le modifier.
J’ai créé Forma pour explorer une question : que devrait-il se passer après qu’une IA propose un design ? Je voulais pouvoir décomposer un composant, le comprendre et le modifier dans le même espace de travail.
Forma est un prototype local fonctionnel. Le canvas, l’inspection des calques, les réglages d’apparence et l’édition de dégradés à partir de pixels fonctionnent réellement. La génération IA en direct n’était pas connectée pour cette démo.
Voir le concept
La séquence commence avec un composant « Deep focus » préparé et son animation de chargement et d’apparition. J’ouvre ses calques en 3D, fais pivoter l’empilement, change le remplissage et le rayon des angles, puis prélève des pixels dans une image, ajuste couleur et luminance, déplace un point de dégradé et change de type de dégradé.
Construire par la conversation
J’ai dirigé le travail dans Codex desktop, en affinant le produit par de courts cycles d’implémentation, d’interaction dans le navigateur et de retours visuels. Mes demandes se précisaient à mesure que j’utilisais le canvas : interface anthracite plus discrète, panneaux latéraux repliables, navigation plus claire, typographie plus compacte et meilleurs alignements.
Figma et Paper ont servi de références pour l’expérience d’édition. Je cherchais la relation familière entre arbre de calques, canvas et inspecteur, tout en explorant la manière dont un composant révèle sa structure.
L’apparition progressive est devenue un moyen de passer de la géométrie sous-jacente au contenu fini. La vue 3D prolongeait cette idée : un empilement compact pour se repérer et une vue « sandwich » déployée pour inspecter chaque calque. Un ajustement a consisté à inverser l’ordre de profondeur pour placer le fond opaque racine derrière le contenu plutôt que devant.
Le composant préparé devient un contenu éditable dans le canvas. La génération présentée ici est simulée.
La séparation des calques révèle l’anatomie du composant ; un glissement fait pivoter la vue.
Le prélèvement de pixels est devenu un autre workflow d’édition. Je voulais aller au-delà d’une palette extraite : ajuster les couleurs et la luminance prélevées, repositionner les points et essayer différents types de dégradés.
L’échantillonnage de l’image alimente un dégradé éditable, avec réglages de couleur, de luminance et de position des points.
Outils et validation
L’app utilise React 19 et TypeScript avec Vite, Tailwind CSS, des composants shadcn/Radix et les icônes Lucide. Motion gère l’animation ; les transformations CSS 3D permettent l’inspection des calques. L’échantillonnage local d’images alimente l’éditeur de dégradés, et Zod valide les données structurées.
J’ai utilisé Codex desktop pour le développement, l’automatisation du navigateur pour les clics, glissements, captures et vérifications visuelles, et Bun pour les scripts et tests. Le modèle de développement consigné était gpt-6-astra. Un adaptateur de fournisseur OpenAI distinct existe dans l’app, mais il n’était pas connecté pour l’enregistrement.
Pour la vidéo, des captures du navigateur ont été prises à environ 9–10 images par seconde, puis assemblées avec Bun et FFmpeg dans un fichier H.264 en 1080p à 60 images par seconde en sortie. Il ne s’agit pas d’une capture d’écran native à 60 images par seconde ; les pauses entre les scènes ont été coupées.
Lors de la vérification de l’article le 8 septembre, les 76 tests du projet source passaient, notamment ceux sur la géométrie des calques, l’édition des dégradés, les transactions documentaires et les erreurs fournisseur. La vidéo du concept montre certaines interactions, sans établir une aptitude à la production. Le comportement du fournisseur en direct, la synchronisation du code en direct et un pont MCP n’y sont pas démontrés.
Tokens et coût
L’instantané enregistré de la tâche source à 07:32 UTC le 8 septembre 2026 totalise 80 448 253 tokens. Il s’agit d’un cumul à cet instant pour cette tâche, et non d’un total final ou vérifié du développement tous agents confondus. Le travail s’est poursuivi ensuite ; cet article de portfolio sort de ce périmètre.
| Utilisation enregistrée | Tokens |
|---|---|
| Entrée, y compris l’entrée en cache | 80 197 013 |
| Dont entrée en cache | 78 707 968 |
| Entrée hors cache | 1 489 045 |
| Sortie, raisonnement compris | 251 240 |
| Total entrée + sortie | 80 448 253 |
Environ 98,1 % de l’entrée provenait du cache. Ces compteurs incluent des traitements répétés du contexte et des lectures de cache ; ils ne représentent donc pas autant de texte unique. L’entrée en cache est déjà incluse dans l’entrée ; le raisonnement est déjà inclus dans la sortie. Je n’ai ajouté aucun de ces sous-ensembles une seconde fois. L’inclusion des agents enfants n’est pas vérifiée : le total complet de tokens du projet reste indisponible.
Ce que coûteraient ces tokens
106,16 $ US aux tarifs API standard de GPT-6 Astra. C’est une estimation en équivalent API limitée aux tokens de cet instantané, pas ma facture Codex réelle. Tarifs officiels de GPT-6 Astra, vérifiés le 8 septembre 2026, indiquent 10 $ US par million de tokens d’entrée hors cache, 1 $ US par million en cache et 50 $ US par million en sortie.
| Catégorie | USD par million | Estimation en USD |
|---|---|---|
| Entrée en cache | 1 $ US | 78,71 $ US |
| Entrée hors cache | 10 $ US | 14,89 $ US |
| Sortie | 50 $ US | 12,56 $ US |
| Total | — | 106,16 $ US |
Le cache change l’économie du projet : il représente 97,84 % des tokens, mais environ 74,14 % du coût estimé. Je soustrais l’entrée en cache de l’entrée totale avant d’appliquer le tarif hors cache. L’instantané enregistre zéro token d’écriture en cache.
Ce calcul suppose un traitement standard et aucune requête dépassant 272 000 tokens d’entrée. Selon les règles API publiées, les requêtes plus longues doublent les tarifs d’entrée et de cache et multiplient le tarif de sortie par 1,5 ; le mode Fast double les tarifs applicables. Avec le seul mode Fast, le même instantané représenterait 212,32 $ US. Le cumul ne permet pas de déterminer les paramètres de chaque requête : aucun de ces montants ne reconstitue donc la facturation réelle. Ces estimations excluent les frais d’outils et l’utilisation hors de l’instantané.
Coût réel du développement : indisponible / non mesuré séparément. Aucun montant facturé par projet n’est vérifié. Le concept n’a utilisé aucun appel API de génération en direct, mais cela ne rend pas le développement gratuit. L’utilisation d’un abonnement Codex ne peut pas être assimilée à une facture API.
Ce que j’ai appris
Les itérations les plus utiles sont venues de l’édition du résultat. Une apparition progressive peut expliquer la structure, et un empilement 3D la rendre tangible, mais les deux doivent mener à des commandes fonctionnelles. Forma m’a donné un espace local pour explorer cette transition. Connecter et valider le fournisseur en direct reste une prochaine étape distincte.