Transformez une interface en application grâce à l'IA.
FrameForge est un outil de maquettage qui produit un "JSON structuré et sémantique", conçu pour être lu et exploité directement par un agent IA.
Vous dessinez l'interface. L'IA construit l'application.
« Je ne suis pas développeur professionnel. J'ai conçu un système qui permet à n'importe qui de créer une interface, d'exporter un JSON structuré, et de générer une application fonctionnelle avec l'IA. »
Vous dessinez JSON sémantique L'IA construit
──────────────── → ─────────────────── → ──────────────────────
frames sur canvas typé, annoté, nommé code, tests, variantes
glisser • styliser lisible humain + machine React, Flutter, HTML…
Chaque frame que vous posez contient :
- un type sémantique (bouton, formulaire, navigation, modal…), 29 composants supportés
- un nom humain et un commentaire décrivant son rôle fonctionnel
- des données complètes de layout, style, contenu et comportement
Le JSON exporté n'est pas une liste de coordonnées, c'est une description de ce que fait l'interface, pas seulement de son apparence visuelle.
À partir de maintenant, l'export inclut aussi un contrat IA de rendu : si style.border_radius contient au moins une valeur supérieure à 0, l'élément doit être rendu avec des coins arrondis. L'IA n'a donc plus besoin d'un flag supplémentaire du type apply_border_radius.
Ce contrat impose également un rendu plein écran : l'interface doit s'étirer correctement à la taille de l'écran client et éviter les bordures blanches latérales.
Le contrat impose aussi une règle de template explicite : une page marquée persistante n'est jamais appliquée implicitement partout. Elle n'est incluse que si la page cible la référence dans injections.
L'export ajoute aussi une phrase d'instruction par défaut directement dans le JSON, afin que le fichier soit autonome même lorsqu'il est transmis seul à une IA externe.
📹 Démo GIF à venir — lancez l'application en 2 minutes avec le Quick start ci-dessous.
Prérequis : Python 3.9+ · Aucune dépendance externe obligatoire
git clone https://github.com/VOTRE_USERNAME/FrameForge.git
cd FrameForge
python main.pyPillow est optionnel — uniquement nécessaire pour le rendu d'images dans les frames.
Pour l'activer :pip install Pillow
Voici ce que FrameForge exporte pour un écran de connexion simple :
{
"schema_version": 2,
"project": {
"title": "Mon Application",
"description": "Écran de connexion mobile",
"ai_contract": {
"interpreter_instruction": "Interprète strictement project.ai_contract.rendering_rules et applique tous les styles prescriptifs sans exception. L'interface doit s'étirer proprement sur tout l'écran, sans bord blanc, quelle que soit la taille de l'écran.",
"rendering_rules": {
"style_is_prescriptive": true,
"viewport": {
"must_fill_screen": true,
"avoid_white_borders": true,
"independent_of_screen_size": true,
"preferred_strategy": "responsive_fill"
},
"border_radius": {
"must_apply": true,
"source_field": "pages[*].frames[*].style.border_radius"
}
}
}
},
"pages": [
{
"name": "Connexion",
"frames": [
{
"id": "frame_a1b2",
"name": "Logo de l'application",
"type": "image",
"comment": "Logo centré en haut de l'écran",
"layout": { "x": 340, "y": 60, "width": 280, "height": 80 },
"style": { "background": "#FFFFFF" },
"content": { "text": "MonApp" }
},
{
"id": "frame_c3d4",
"name": "Champ e-mail",
"type": "input",
"comment": "Saisie de l'adresse e-mail, champ obligatoire",
"layout": { "x": 280, "y": 180, "width": 400, "height": 48 },
"style": { "background": "#F4F6F8" },
"content": { "text": "Adresse e-mail" }
},
{
"id": "frame_e5f6",
"name": "Bouton Connexion",
"type": "button",
"comment": "CTA principal — soumet le formulaire de connexion",
"layout": { "x": 280, "y": 300, "width": 400, "height": 52 },
"style": { "background": "#2D6AFF" },
"content": { "text": "Se connecter" },
"behavior": { "is_button": true }
}
]
}
]
}Soumettez ce JSON à n'importe quelle IA (ChatGPT, Claude, Gemini…) en lui demandant de générer le code React, Flutter ou HTML correspondant. Le JSON indique à l'IA à quoi sert chaque élément — sans ambiguïté.
→ D'autres exemples prêts à importer dans le dossier examples/.
| Catégorie | Ce que vous obtenez |
|---|---|
| Canvas | Glisser-déposer, redimensionnement, magnétisme à la grille (8 px) |
| Frames | 29 types sémantiques · nom · commentaire · z-order · verrouillage |
| Texte | Police, taille, gras/italique, couleur, alignement, retour à la ligne |
| Style | Fond, bordure, coins arrondis indépendants, état hover |
| Images | Image seule ou image + texte dans une même frame, échelle %, mode d'ajustement, dimensions max |
| Pages | Projet multi-pages · pages persistantes (templates réutilisables) |
| Onglets | Panneau dédié pour voir/créer/modifier pages persistantes et non persistantes |
| Historique | Annuler/Rétablir · copier/coller · dupliquer |
| Paramètres runtime | Mise à l'échelle automatique · mode plein écran par défaut |
| Palette project | 5 couleurs réutilisables (primaire, secondaire, tertiaire, etc.) |
| Export | Projet complet · page courante · sauvegarde/chargement |
FrameForge/
├── main.py # Point d'entrée
├── requirements.txt
├── frameforge/
│ ├── app.py # Interface Tkinter (~3 500 lignes)
│ ├── model.py # Modèle de données — FrameItem, SceneState
│ └── io_json.py # Sauvegarde/chargement — page et projet complet
├── examples/
│ ├── login_page.json # Écran de connexion
│ ├── dashboard.json # Tableau de bord administrateur
│ └── mobile_onboarding.json # Parcours d'onboarding mobile (multi-pages)
└── tests/
└── smoke_test.py # Tests de non-régression (modèle + IO)
Chaque frame suit cette structure :
frame
├── id identifiant unique
├── name nom lisible par un humain ← l'IA lit ceci
├── type type de composant sémantique ← et ceci
├── comment description fonctionnelle ← et ceci
├── layout x, y, largeur, hauteur, z_index
├── style fond, bordure, coins arrondis, état hover
├── content texte, police, image, composition image+texte, paramètres de retour à la ligne
└── behavior is_button, hover_enabled, invisible_by_default
La séparation raw_text / text garantit que l'IA reçoit toujours le texte original, indépendamment du rendu à l'écran.
Le bloc project.ai_contract.rendering_rules donne aux IA consommatrices une règle explicite d'interprétation. En particulier :
style.border_radiusest la source de vérité pour les coins arrondis ;- si un coin a une valeur
> 0, le rendu attendu est un rectangle arrondi ; - il ne faut pas inventer un flag additionnel comme
apply_border_radiuspour comprendre l'intention. - le bloc
rendering_rules.viewportimpose un rendu qui remplit l'écran, sans bord blanc, indépendamment de la résolution. - le bloc
rendering_rules.template_injectionimpose une inclusion explicite des templates viapages[*].injections(pas d'injection implicite globale).
Le champ project.ai_contract.interpreter_instruction porte la consigne en langage naturel, pour les IA qui suivent mieux une phrase explicite qu'un contrat uniquement structuré.
Le bloc project.runtime configures le comportement de l'application générée :
scale_to_client_screen: active la mise à l'échelle automatique pour adapter l'interface à la taille de l'écran clientfullscreen_by_default: lance l'application en plein écran par défaut (sans barre de fenêtre)
Ces paramètres sont éditables via Fichier > Paramètres du projet dans l'interface FrameForge.
Le bloc project.theme.colors contient 5 couleurs réutilisables sur les composants :
primary: couleur principale (ex. boutons CTA, liens actifs)secondary: couleur secondaire (ex. accents, surlignage)tertiary: couleur tertiaire (ex. éléments d'information)quaternary: couleur quaternaire (ex. alertes, réseaux sociaux)quinary: couleur quinary (ex. erreurs, destructions)
Les valeurs hex sont éditables dans Fichier > Paramètres du projet et s'appliquent immédiatement à tous les composants utilisant la palette.
python -m unittest tests.smoke_test -vLa plupart des outils de maquettage (Figma, Penpot, Balsamiq) produisent des fichiers propriétaires ou des SVG/PNG — des formats qu'un agent IA ne peut pas exploiter directement.
FrameForge produit un JSON typé, nommé et annoté qu'une IA peut lire comme un document de spécification. Il fait le pont entre l'intention visuelle du designer et les instructions lisibles par la machine.
- Sélection multiple et outils d'alignement
- Zoom / défilement du canvas
- Sauvegarde automatique
- Mode prévisualisation HTML
- Mode serveur / API pour agents IA
MIT — libre d'utilisation, de modification et de réutilisation.
Construit sans parcours de développeur professionnel — pour prouver que la barrière entre une idée et un logiciel fonctionnel est plus basse qu'on ne le croit.