Open Design : Comment Ce Studio UI/UX Auto-Hébergé sous Coolify Sert d’Écran de Contrôle Visuel à Google Antigravity
Découvrez notre méthodologie de design web hors des cadres : pourquoi Google Antigravity réalise 100 % de la réflexion et du code tandis qu’Open Design (hébergé sur notre VPS Coolify) agit comme cockpit de prévisualisation temps réel via MCP.
📑 Sommaire rapide du dossier (6 sections) ▾
- Tableau des 5 Vérités Clés sur Notre Flux Open Design + Antigravity
- Pourquoi ne jamais déléguer la réflexion à l’agent interne d’un outil de design ?
- Notre Flux de Travail Exact en 4 Étapes via le Protocole MCP
- Comparatif : Flux Antigravity + Open Design (MCP) vs Figma Classique vs Générateurs SaaS
- 3 Idées Reçues sur le Design d’Interface avec l’IA
- Questions Fréquentes (FAQ) sur Open Design et Notre Méthodologie UI/UX
Dans le monde du design d’interfaces (UI/UX) assisté par intelligence artificielle, 95 % des utilisateurs tombent dans l’un de ces deux extrêmes : soit ils utilisent des générateurs « boîtes noires » (comme v0, Lovable ou Bolt) qui produisent un joli premier jet mais deviennent incontrôlables dès qu’on veut modifier l’architecture métier ; soit ils codent à l’aveugle dans un terminal sans retour visuel structuré. Chez HubToWork, nous avons conçu un troisième chemin radicalement plus puissant : le couplage par protocole MCP entre Google Antigravity (le cerveau) et Open Design auto-hébergé sur notre VPS Coolify (l’écran de contrôle visuel).
Notre règle d’or architecturale est stricte : c’est Google Antigravity qui assure 100 % du travail de réflexion, de conception et d’écriture du code, tandis qu’Open Design est utilisé exclusivement comme cockpit de prévisualisation en direct, de suivi visuel et de bibliothèque de Skills de design.
Tableau des 5 Vérités Clés sur Notre Flux Open Design + Antigravity
| Vérité Architecturale | Impact Concret chez HubToWork | Piège des Générateurs UI Classiques (v0, Lovable, Figma manuel) |
|---|---|---|
| 1. Séparation stricte entre le « Cerveau » et l’« Écran » | Antigravity garde toute la mémoire de la session, la logique métier et l’architecture, et pousse le code fini vers Open Design. | Déléguer la génération à un sous-agent fermé fait perdre le contexte global du projet au bout de trois modifications. |
| 2. Auto-hébergement souverain sur VPS Coolify | Notre instance Open Design tourne en conteneur Docker sur nos serveurs OVHcloud / Coolify : zéro abonnement par maquette. | Facturation mensuelle par crédit de génération et exposition des prototypes clients sur des clouds tiers. |
| 3. Exploitation systématique des Skills de Design (`SKILL.md`) | Avant d’écrire une ligne de CSS, l’agent consulte les compétences de design d’Open Design via list_skills (typographie, grilles Bento, contraste). | Les LLM non guidés produisent tous le même design générique violet/bleu reconnaissable au premier coup d’œil. |
| 4. Poussée instantanée via MCP (`create_artifact` / `write_file`) | Dès que le code HTML/CSS/JS est généré ou corrigé, il s’affiche immédiatement sur l’écran de contrôle en ligne. | Allers-retours manuels incessants entre Figma, l’intégration HTML et le serveur de préproduction. |
| 5. Itération continue de A à Z jusqu’à la mise en production | Modification chirurgicale du même fichier via write_file à la voix (avec Wispr Flow) jusqu’à validation finale. | Régénération complète qui écrase accidentellement les corrections des étapes précédentes. |
Pourquoi ne jamais déléguer la réflexion à l’agent interne d’un outil de design ?
Lorsque nous avons déployé Open Design sur notre serveur distant VPS sous Coolify, nous avons immédiatement établi une règle de gouvernance fondamentale (encodée en dur dans nos règles globales d’agent) : ne jamais utiliser l’outil start_run pour déléguer la création à un agent interne secondaire.
Pourquoi ce choix est-il décisif ? Parce qu’un projet web réel — qu’il s’agisse d’un site WordPress sur-mesure, d’un tableau de bord SaaS en Vibe Coding ou d’une interface médicale comme HubToWrite — ne se résume jamais à un dessin isolé. Il doit respecter :
- La structure sémantique exigée par notre stratégie SEO & GEO (hiérarchie `H1-H3`, tableaux de vérités, schémas JSON-LD).
- Les contraintes d’accessibilité (contraste WCAG AA/AAA, cibles tactiles mobiles de 44px, navigation clavier).
- La continuité de la conversation et des règles métiers que seul l’agent principal dans Google Antigravity maîtrise de bout en bout.
Notre Flux de Travail Exact en 4 Étapes via le Protocole MCP
Étape 1 : Création ou sélection du contexte (`create_project` / `get_active_context`)
Au démarrage d’une mission de conception visuelle (refonte de page, création d’un système de cartes Bento, maquettage d’un deck de présentation ou d’un widget interactif), Google Antigravity interroge le serveur MCP d’Open Design via get_active_context ou initialise un espace dédié avec create_project.
Étape 2 : Activation systématique des Skills de Design (`list_skills`)
Plutôt que d’improviser des couleurs ou des espacements au hasard, Antigravity sollicite systématiquement les compétences de design exposées par Open Design et notre bibliothèque locale (direction artistique sombre, calibration typographique, micro-interactions, responsive multi-écrans). Ces fichiers SKILL.md imposent des règles mathématiques strictes sur les ratios de contraste, les rayons de bordure et les grilles CSS.
Étape 3 : Conception par Antigravity et poussée directe (`create_artifact` & `write_file`)
Antigravity rédige l’intégralité du code (HTML5 sémantique, CSS moderne / Tailwind, JavaScript, animations) et le pousse directement dans le projet Open Design en ligne via create_artifact ou write_file. Instantanément, j’observe le rendu visuel réel sur mon écran de contrôle.
Étape 4 : Itération vocale continue jusqu’à la perfection
En regardant l’écran de contrôle Open Design, je dicte mes retours d’ajustement à la voix avec Wispr Flow (« augmente la respiration verticale de la grille Bento sur tablette, renforce l’éclat cyan de la carte principale, passe le tableau en scroll horizontal sur mobile »). Antigravity met à jour le fichier existant via write_file en quelques secondes, puis déploie la version validée directement en production (par exemple sur WordPress via NovaMira MCP).
Comparatif : Flux Antigravity + Open Design (MCP) vs Figma Classique vs Générateurs SaaS
| Critère | Antigravity + Open Design sous Coolify (HubToWork) | Figma Traditionnel + Intégration Manuelle | Générateurs SaaS (Lovable, v0, Bolt) |
|---|---|---|---|
| Nature du livrable dès la 1re minute | Code HTML/CSS/JS réel, responsive et prêt pour la production | Dessin vectoriel statique qu’il faut ensuite recoder entièrement | Code souvent lourd et difficile à maintenir sur la durée |
| Continuité de l’intelligence métier | 100 % centralisée dans Google Antigravity | Déconnexion entre le graphiste et le développeur | Perte de contrôle dès que le projet devient complexe |
| Coût d’infrastructure mensuel | 0 € de licence SaaS (auto-hébergé sur notre VPS Coolify) | 15 € à 75 € / mois par siège éditeur | 20 $ à 100 $+ / mois en crédits de messages |
| Respect des standards SEO & Accessibilité | Garanti dès la conception par nos Skills dédiés | Souvent oublié au stade de la maquette graphique | Balisage générique rarement optimisé pour le GEO/SEO |
3 Idées Reçues sur le Design d’Interface avec l’IA
❌ Idée reçue n°1 : « L’IA ne sait faire que des sites qui se ressemblent tous »
✅ La réalité du terrain : C’est vrai uniquement si vous utilisez un modèle nu sans direction artistique codifiée. Dès lors que l’agent s’appuie sur les Skills d’Open Design et sur un système de jetons visuels (Design Tokens) précis comme notre thème Obsidian Dark, le rendu atteint le niveau d’un studio de création haut de gamme.
❌ Idée reçue n°2 : « Il faut obligatoirement passer 3 semaines sur Figma avant de coder un site »
✅ La réalité du terrain : Dessiner des rectangles statiques dans Figma puis payer une seconde fois pour les traduire en CSS est une perte de temps considérable. Avec Open Design comme écran de contrôle en direct, nous concevons directement dans le vrai moteur de rendu du navigateur, ce qui permet de tester immédiatement le comportement réel sur ordinateur, tablette et smartphone.
❌ Idée reçue n°3 : « Multiplier les agents IA dans plusieurs logiciels améliore le résultat »
✅ La réalité du terrain : Quand deux agents IA différents modifient le même projet sans mémoire partagée, ils se contredisent. C’est pourquoi nous gardons un seul chef d’orchestre (Google Antigravity) qui pilote Open Design par MCP comme son moniteur visuel.
Questions Fréquentes (FAQ) sur Open Design et Notre Méthodologie UI/UX
1. Pourquoi héberger Open Design sur votre propre serveur VPS Coolify ?
Pour trois raisons : la confidentialité totale des prototypes de nos clients, la rapidité d’exécution sans file d’attente partagée, et l’absence totale d’abonnement SaaS supplémentaire puisque le conteneur tourne sur notre infrastructure OVHcloud existante.
2. Que peut-on concevoir et prévisualiser dans Open Design ?
Nous y concevons aussi bien des pages d’atterrissage (Landing Pages) à haute conversion, des composants d’applications SaaS, des systèmes de cartes Bento pour WordPress/Elementor que des présentations interactives (Decks HTML) et des tableaux de bord métiers.
3. Comment le code validé dans Open Design arrive-t-il sur le site final du client ?
Puisque c’est Google Antigravity qui a écrit le code poussé dans Open Design, une fois que nous validons visuellement le rendu sur l’écran de contrôle, le même agent injecte directement ce code propre et testé sur le site de production (via GitHub/Coolify pour une WebApp, ou via NovaMira MCP pour WordPress).
4. Cette méthode garantit-elle un affichage parfait sur mobile ?
Oui, car contrairement à une image fixe, le prototype affiché dans Open Design exécute les vraies règles CSS @media et clamp(). Nous vérifions simultanément les points de rupture Desktop (`> 1024px`), Tablette (`768px–1024px`) et Mobile (`< 768px`) avant toute mise en ligne.
5. Enseignez-vous ce flux de travail UI/UX par MCP lors de vos formations IA ?
Absolument ! Apprendre à piloter le design et le Vibe Coding avec Google Antigravity et Open Design fait partie des ateliers les plus appréciés de nos formations IA hors des cadres — éligibles à la déduction OETH jusqu’à 30 % grâce à mon statut TIH (RQTH).
Systèmes Anti-Emballement de l’IA : Loop Guards, Harness Engineering, Gouvernance MCP et les Meilleurs Dépôts GitHub
Comment empêcher un agent IA autonome de boucler à l’infini, de vider votre budget API ou de casser la production ? Découvrez…
Perplexity AI : Pourquoi Ce Moteur d’Investigation Sourcé en Temps Réel a Remplacé 90 % de Nos Recherches Google
Fini les hallucinations des chatbots classiques et le tri de 15 onglets publicitaires : comment nous utilisons Perplexity pour la veille technique,…
NovaMira MCP pour WordPress : Comment Nous Pilotons Nos Sites WordPress & Elementor Directement par Agent IA
Découvrez les coulisses de notre propre site HubToWork : comment le serveur MCP de NovaMira connecte Google Antigravity au cœur de WordPress…
