Comment j'ai créé un explorateur de concepts alimenté par IA en 4 heures avec Enter

Un designer sans expérience backend a utilisé Enter.pro pour construireEssence— une application canvas native AI qui décompose n'importe quel concept en ses éléments fondamentaux. De l'idée à un produit entièrement fonctionnel avec intégration AI, support bilingue et expérience gamifiée — le tout en seulement 4 heures.

L'Étincelle

En tant que designer, j'ai toujours été fasciné par une question : d'où vient la créativité ?

Plus j'étudiais les méthodes de design, plus je voyais le même schéma : la créativité commence souvent par ladéconstructionet larecombinaison. Décomposer quelque chose en ses parties essentielles, puis le reconstruire d'une nouvelle manière.

Cette idée a conduit àEssence— un canvas d'exploration de concepts propulsé par l'AI. Saisissez n'importe quel concept, et l'AI le décompose en ses éléments fondamentaux. Ensuite, en recombinant ces éléments, de nouvelles idées commencent à émerger.

Pourquoi Enter

Je suis product designer, pas développeur full-stack. L'idée pour Essence nécessitait plusieurs choses qui semblaient intimidantes :

• Un canvas interactifavec glisser-déposer, zoom et panoramique — le type d'interface complexe qu'on voit dans des outils comme Figma ou Miro

• Intégration AIpour alimenter la logique de décomposition et recombinaison des concepts

• Un backend serverlesspour gérer les appels API AI de manière sécurisée

• Déploiementpour que les gens puissent réellement l'utiliser

Se connecter à une API LLM arrêtait la plupart des non-développeurs — clés API, configuration env, logique d'authentification.

Avec AI All d'Enter, j'ai simplement dit : "Utilise Claude Sonnet 4.5," et tout a été configuré — Edge Functions backend, formatage des requêtes, gestion des erreurs.

AvecEnter.pro, je ne touche pas du tout à l'infrastructure. Je décris ce que je veux, et il gère React, Supabase, Edge Functions et l'intégration des modèles. Je me concentre juste sur le quoi et le pourquoi.

La Construction : 5 Phases en 4 Heures

Phase 1 : Fondation

J'ai organisé l'idée dans ma tête en un prompt complet et l'ai envoyé à Enter. Voici l'essentiel :

Créer une application canvas d'exploration native AI appelée "Essence." C'est un jeu de réflexion léger. Mécanique principale : les utilisateurs saisissent n'importe quel mot, et l'AI le décompose en exactement 2 concepts plus atomiques, affichés comme des nœuds emoji + mot court sur un canvas. Règles de décomposition : toujours retourner exactement 2 nœuds, chacun avec 1 emoji + 1 mot court, les concepts doivent devenir plus essentiels à chaque niveau — se décomposant vers des dimensions comme l'émotion, le motif, l'énergie, la structure, la relation, le pouvoir, la valeur, le désir, le conflit. Les utilisateurs peuvent aussi sélectionner 2 nœuds pour les recombiner en 1 nouveau concept. Le canvas supporte le glissement infini, le zoom, le double-clic pour décomposer, la sélection multiple pour recombiner. Chaque décomposition coûte 1 point, chaque recombinaison coûte 2.

Après avoir lu ce prompt, la première chose qu'Enter a faite a été de charger ses capacités AI, puis m'a demandé directement : "Quel modèle AI souhaitez-vous utiliser pour la décomposition et recomposition de concepts ?" Il a listé les options disponibles — GPT-5.2 Pro, Gemini 3 Pro et Claude Sonnet 4.5 — chacune annotée avec le coût, la vitesse et les points forts. J'ai choisi Claude Sonnet 4.5 (excellent pour suivre les instructions et les tâches créatives), et Enter a configuré automatiquement toute la connexion API.

Quelques minutes plus tard, la structure complète du projet était prête — React 18 avec TypeScript, Vite comme outil de build, Tailwind CSS pour le style,@xyflow/reactpour le canvas, et une Supabase Edge Function connectée à l'API de Claude. La logique de base de décomposition et recombinaison fonctionnait dès le premier essai.

Phase 2 : Ajustement de la Logique AI

C'était la partie la plus critique et fascinante de tout le projet. Qu'Essence soit agréable ou ennuyeux dépend entièrement de la qualité de sortie de l'AI. Le code final divise la logique AI en trois fonctions indépendantes, chacune avec des stratégies de prompt soigneusement élaborées.

Le Problème : L'AI Était Trop "Académique"

Après que la première version ait été opérationnelle, les résultats de l'IA étaient involontairement hilarants — saisir "scissors" retournait "pincer appendages" et "symmetrical evolution" ; saisir "love" donnait "neurotransmitters" et "quantum states." Techniquement pas faux, mais pas amusant du tout, et pas intuitif. Ce n'était pas l'expérience que je voulais.

Correctif #1 : Donner un Persona à l'IA

La percée clé a été de définir un rôle système clair pour l'IA — non pas "vous êtes un assistant de décomposition," mais**"Vous êtes un jeu de décomposition amusant. Transformez des choses complexes en blocs de construction simples ! Utilisez des mots du quotidien."**Cette seule phrase a complètement transformé le style de sortie, passant d'un article académique à une conversation ludique.

Correctif #2 : Exemples Positifs + Anti-Patterns

J'ai découvert que les exemples positifs seuls ne suffisaient pas — l'IA glissait occasionnellement encore en mode académique. J'ai donc inclus simultanément de bons et de mauvais exemples :

**Bons exemples :**Scissors → 🔪 Blade + 🔗 Hinge (two blades connected by a hinge)Coffee → ☕ Hot water + 🫘 Beans (hot water + coffee beans)Friend → 👤 Person + 🤝 Trust (people who trust each other)Dream → 😴 Sleep + 💭 Imagination (imagination while sleeping)Mauvais exemples (trop académiques) :❌ Pincer appendages, Symmetrical evolution, Neurotransmitters, Quantum states

Ce "contraste positif-négatif" a donné à l'IA une compréhension très précise du ton que je voulais :simple, intuitif, le genre qui fait sourire les gens ou leur donne un moment "aha !".

Correctif #3 : Trois Fonctions, Trois Stratégies

La logique finale de l'IA a été divisée en trois fonctions indépendantes, chacune avec sa propre conception de prompt et son réglage de paramètres :

① Génération d'Emoji (generateEmojiForConcept): Lorsqu'un utilisateur saisit un concept, un appel IA séparé génère d'abord un emoji correspondant sémantiquement. Le rôle système est défini comme "You are an emoji generator. You output only JSON," avec une température à 0.7 (précision plutôt que créativité), guidé par des exemples few-shot : stone → 🪨, fire → 🔥, love → ❤️. Si l'analyse échoue, le système revient gracieusement à un ✨ par défaut.

② Décomposition de Concept (decomposeConcept): La fonction centrale. Le prompt guide l'IA à "décomposer les choses comme des blocs de construction," retournant exactement 2 nœuds (emoji + mot court) plus une explication en une phrase. La température est réglée à 0.8 — plus élevée que la génération d'emoji pour permettre plus d'espace créatif. La décision de conception cruciale : chaque requête injecte une graine aléatoire (randomSeed), garantissant que le même concept donne des résultats différents à chaque fois — cela donne à l'exploration une vraie "rejouabilité."

③ Recombinaison de Concepts (recombineConcepts): La partie la plus créative. Le prompt la présente comme "penser comme un jeu," avec des exemples imaginatifs : Water + Fire = Steam ♨️, Flour + Fire = Bread 🍞, Human + Wings = Angel 👼, Sadness + Joy = Life 🎭. Les résultats doivent être "surprenants, perspicaces, légèrement humoristiques, non évidents." Même technique de graine aléatoire pour la variété.

Correctif #4 : Les Explications au Survol Rendent la Logique Visible

Chaque décomposition ou recombinaison d'IA retourne également une brèveexplanation. Ce texte n'apparaît pas directement sur le nœud (gardant l'interface minimale), mais est stocké dans les données du nœud. Lorsqu'un utilisateur survole un nœud, un élégant HoverCard apparaît montrant la chaîne de raisonnement complète :

• Nœuds décomposés(étiquettes émeraude) : 🎭 Drama = 😢 Conflict + 👥 Characters, avec "Drama is fundamentally conflict between characters" en dessous

• Nœuds combinés(étiquettes violettes) : 😴 Sleep + 💭 Imagination = 💫 Dream, avec "Imagination during sleep is a dream" en dessous

Cette conception rend la stratification de l'information magnifiquement élégante — en surface, des cartes emoji minimales ; en inspection plus approfondie, le processus de pensée de l'IA.

Le Résultat

Après tout ce réglage, la qualité de sortie de l'IA s'est transformée de manière spectaculaire :

❤️ Love → 👤 Person + 🤝 Trust (people who trust each other) ☕ Coffee → 🫘 Beans + ☕ Hot water (hot water meets coffee beans) 💭 Dream → 🔮 Imagination + 🔥 Desire (a burning vision of the future) 🔥 Fire + 💧 Water = ♨️ Steam 😴 Sleep + 💭 Imagination = 💫 Dream

Chaque décomposition provoque un moment « eurêka ! » ; chaque recombinaison fait naître un sourire. C'est la puissance de l'ingénierie de prompts — il ne s'agit pas d'écrire plus de code, mais de trouver la bonne façon de parler à l'IA.

Phase 3 : Peaufinage de l'interaction

C'est là que l'application a commencé à sembler vivante:

• Sélectionner 1 nœud → Le bouton « Décomposer » apparaît— décomposer davantage

• Shift + clic sur 2 nœuds → Le bouton « Recombiner » apparaît— les fusionner ensemble

• Double-clic sur n'importe quel nœud → Décomposition instantanée— exploration rapide

• Survoler n'importe quel nœud traité → Voir le raisonnement de l'IAdans une HoverCard

J'ai également ajouté une couche de gamification légère : vous commencez avec 20 points(décomposer coûte 1, recombiner coûte 2), créant une contrainte douce qui vous fait réfléchir aux chemins à explorer. Les points persistent localement, et vous pouvez toujours réinitialiser.

Phase 4 : Peaufinage du design UI

Avec la fonctionnalité opérationnelle, l'objectif suivant était de faire en sorte qu'Essence paraisseaussi bien qu'il ne se comporte.

La première décision majeure de design concernait la typographie. J'ai choisi Bricolage Grotesquecomme police globale — une sans-serif géométrique et moderne qui a instantanément élevé l'application au-delà du territoire des polices système par défaut et lui a donné une identité de marque distinctive.

Les visuels des cartes de nœuds ont traversé plusieurs itérations. Le design final s'est arrêté sur de grandes cartes rectangulaires arrondies (rounded-2xl) avec des arrière-plans pastel doux — amber-50, emerald-50 et violet-50 assignés aléatoirement — avec un grand emoji comme ancre visuelle et une courte étiquette de mot en bas. Le canevas a fini par ressembler à une dispersion de post-it colorés : léger, ludique et épuré.

La zone de saisie est la « première impression » de l'application, donc j'avais les standards les plus élevés pour elle. C'est là que la fonctionnalité Enter Componentsde Enter a vraiment brillé — une bibliothèque de composants IA intégrée où vous pouvez rechercher, prévisualiser et ajouter des composants en un clic. J'ai tapé « ai » dans la barre de recherche et découvert un composant appelé claude-style-chat-input— une saisie conversationnelle élégamment stylisée. J'ai cliqué sur « + Add to Chat », et Enter l'a automatiquement intégré dans mon projet, adaptant le style pour correspondre au langage de design existant. La saisie HTML simple s'est instantanément transformée en une expérience de saisie conversationnelle polie — bordures arrondies, ombres douces, disposition de bouton en ligne — parfaitement cohérente avec l'identité visuelle de l'application.

Pas besoin d'écrire des composants de zéro ou de bricoler avec le CSS. Enter Components vous permet d'assembler une UI de haute qualité comme des blocs de construction, et Enter ajuste automatiquement le style pour maintenir la cohérence visuelle.

Finalement, j'ai ajouté un ensemble de cartes de concepts de démarrage rapide— ❤️ Love, 💰 Money, ⏰ Time, 🌳 Tree, 🎵 Music, 💭 Dream — affichées comme des mini-cartes colorées et inclinées sur l'écran d'accueil, abaissant la barrière du démarrage à froid pour que les utilisateurs comprennent immédiatement ce qu'ils peuvent taper.

Phase 5 : Internationalisation

Essence est conçu pour un public mondial, donc le support bilingue chinois-anglais n'était pas un plus — c'était essentiel.

Mais l'internationalisation ne consiste pas seulement à traduire le texte de l'UI. Dans Essence, la sortie de l'IA doit également correspondre à la langue sélectionnée par l'utilisateur — en mode chinois, décomposer « 爱 » devrait retourner des résultats chinois comme « 人 + 信任 » ; passer en mode anglais et décomposer « Love » devrait retourner « Person + Trust ». Cela signifie que le basculement de langue du frontend doit se propager jusqu'à la couche de prompt de l'IA.

Pour l'implémentation, j'ai utilisé Zustand pour une gestion d'état de langue légère. L'ensemble du système i18n fonctionne ainsi : l'utilisateur clique sur le sélecteur de langue dans le coin supérieur droit → l'état global se met à jour → tout le texte de l'UI bascule instantanément → les appels IA reçoivent le paramètre de langue actuel → les modèles de prompt sélectionnent la version chinoise ou anglaise → la sortie de l'IA correspond automatiquement à la langue de l'utilisateur. La préférence de langue est également persistée dans localStorage, se restaurant de manière transparente à la prochaine visite.

Dans Enter, réaliser tout cela n'a nécessité qu'une seule description : « Ajouter un basculement chinois/anglais avec un bouton de langue dans le coin supérieur droit. Tout le texte de l'UI, les prompts IA et la sortie de l'IA doivent automatiquement basculer en fonction de la langue sélectionnée. » Enter a échafaudé l'ensemble du pipeline — de la gestion d'état au branchement des modèles de prompt à la persistence locale — d'un seul coup.

Cela a également validé une leçon importante :plus tôt vous intégrez l'i18n, mieux c'est. Si vous attendez que toutes les fonctionnalités soient terminées avant d'ajouter l'internationalisation, vous trouverez du texte codé en dur dispersé dans vos prompts et des chaînes d'interface intégrées dans chaque composant — et la mise à niveau est douloureuse. Construisez l'architecture multilingue dès le premier jour, et après cela vous n'aurez qu'à ajouter du contenu de traduction.

---

Ce qui rend Essence Spécial

Décomposer : Voir la structure invisible de tout

Tapez n'importe quel mot. L'IA le décompose en exactement 2 concepts atomiques — chacun avec un emoji sémantique et une explication en une phrase. Puis continuez. Décomposez-les aussi. Regardez un arbre de concepts grandir sous vos yeux.

🎭 Drame → 😢 Conflit + 👥 Personnages 😢 Conflit → ⚡ Tension + 🎯 Objectifs 👥 Personnages → 👤 Personne + 💬 Histoire

Recombiner : Créer de nouvelles idées à partir des atomes des anciennes

Sélectionnez n'importe quels 2 nœuds sur le canevas — même de branches complètement différentes — et combinez-les. L'IA trouvera la connexion surprenante.

🔥 Feu + 💧 Eau = ♨️ Vapeur 😴 Sommeil + 💭 Imagination = 💫 Rêve 👤 Personne + ✈️ Ailes = 👼 Ange

Jouer, pas seulement penser

Le système de 20 points transforme l'exploration abstraite en un jeu ludique. Chaque clic est un choix. Quelle branche explorez-vous ? Quels atomes combinez-vous ? C'est un bac à sable pour la curiosité.

La Stack Technique — Assemblée par Enter

Je n'ai rien configuré manuellement. Enter.pro a assemblé la stack complète en fonction de mes descriptions et prompts itératifs.

Leçons Apprises

1. Prompting à Deux Couches, Deux Mentalités

Construire des applications IA avec Enter, c'est deux conversations simultanées : parler à Enter, c'est comme collaborer avec un ingénieur full-stack — des exigences claires nécessaires ; parler au Claude intégré dans l'application, c'est comme collaborer avec un partenaire créatif — des conseils émotionnels et un enseignement basé sur des exemples nécessaires. Réussir les deux couches est le véritable art.

2. Donnez une Personnalité à l'IA, Pas Seulement des Règles

Changer le rôle système de "Vous êtes un assistant de décomposition de concepts" à "Vous êtes un jeu de décomposition amusant" a transformé tout le style de sortie en une phrase. Les règles contraignent le format ; la personnalité définit la qualité.

3. Exemples Positifs + Anti-Patterns Surpassent les Longues Descriptions

✅ Ciseaux → Lame + Charnière ❌ Appendices en pince, Évolution symétrique, Neurotransmetteurs

Ces trois lignes transmettent plus que 100 mots ne pourraient jamais le faire. Le contraste positif-négatif est la technique d'ingénierie de prompt la plus sous-estimée.

4. Les Graines Aléatoires Donnent aux Produits d'Exploration une Rejouabilité

Le même concept donne des résultats différents à chaque fois — aujourd'hui "Amour = Personne + Confiance," demain "Amour = Vulnérabilité + Courage." Graines aléatoires + température 0.8 maximisent la variété tout en maintenant la qualité. L'essence vitale d'un produit d'exploration est "quelque chose de nouveau à chaque fois."

5. Les Contraintes Créent le Jeu

Le système de 20 points a transformé les clics sans but en exploration stratégique. Principe classique de game design :les choix significatifs nécessitent des ressources limitées.

6. Vibe Coding Bien Fait : Se Concentrer sur Une Phase à la Fois

D'abord la fondation → puis la personnalité de l'IA → puis le polissage de l'interaction → puis le design visuel → puis l'i18n. Chaque phase se concentre sur une dimension, gardant la conversation avec Enter précise et la sortie prévisible.

🔗Construisez le vôtre avec Enter : enter.converge.ai