Come Ho Costruito un Esploratore di Concetti Basato su AI in 4 Ore con Enter

Un designer senza esperienza di backend ha usato Enter.pro per creareEssence— un'app canvas nativa AI che scompone qualsiasi concetto nei suoi elementi fondamentali. Dall'idea a un prodotto completamente funzionante con integrazione AI, supporto bilingue e un'esperienza gamificata — tutto in sole 4 ore.

La Scintilla

Come designer, sono sempre stato affascinato da una domanda: da dove viene la creatività?

Più studiavo i metodi di design, più vedevo lo stesso schema: la creatività spesso inizia con ladecostruzionee laricombinazione. Scomporre qualcosa nelle sue parti essenziali, poi ricostruirlo in un modo nuovo.

Quell'idea ha portato aEssence— un canvas di esplorazione concettuale alimentato dall'AI. Inserisci qualsiasi concetto e l'AI lo scompone nei suoi elementi fondamentali. Poi, ricombinando questi elementi, iniziano a emergere nuove idee.

Perché Enter

Sono un product designer, non uno sviluppatore full-stack. L'idea per Essence richiedeva diverse cose che sembravano scoraggianti:

• Un canvas interattivocon drag-and-drop, zoom e pan — il tipo di UI complessa che vedresti in strumenti come Figma o Miro

• Integrazione AIper alimentare la logica di decomposizione e ricombinazione dei concetti

• Un backend serverlessper gestire le chiamate API AI in modo sicuro

• Deploymentcosì che le persone potessero effettivamente usarlo

Connettersi a un'API LLM fermava la maggior parte dei non-sviluppatori — chiavi API, configurazione env, logica di autenticazione.

Con AI All di Enter, ho semplicemente detto: "Usa Claude Sonnet 4.5," e ha collegato tutto — Edge Functions backend, formattazione delle richieste, gestione degli errori.

ConEnter.pro, non tocco affatto l'infrastruttura. Descrivo ciò che voglio e gestisce React, Supabase, Edge Functions e integrazione dei modelli. Mi concentro solo sul cosa e sul perché.

Lo Sviluppo: 5 Fasi in 4 Ore

Fase 1: Fondamenta

Ho organizzato l'idea nella mia testa in un prompt completo e l'ho inviato a Enter. Ecco il succo:

Crea un'app di esplorazione canvas nativa AI chiamata "Essence." È un gioco di pensiero leggero. Meccanica principale: gli utenti inseriscono qualsiasi parola e l'AI la decompone in esattamente 2 concetti più atomici, visualizzati come nodi emoji + parola breve su un canvas. Regole di decomposizione: restituire sempre esattamente 2 nodi, ciascuno con 1 emoji + 1 parola breve, i concetti dovrebbero diventare più essenziali con ogni livello — spezzandosi verso dimensioni come emozione, motivazione, energia, struttura, relazione, potere, valore, desiderio, conflitto. Gli utenti possono anche selezionare 2 nodi qualsiasi per ricombinarli in 1 nuovo concetto. Il canvas supporta trascinamento infinito, zoom, doppio clic per decomporre, multi-selezione per ricombinare. Ogni decomposizione costa 1 punto, ogni ricombinazione costa 2.

Dopo aver letto questo prompt, la prima cosa che Enter ha fatto è stata caricare le sue capacità AI, poi mi ha chiesto direttamente: "Quale modello AI vorresti usare per la decomposizione e ricomposizione dei concetti?" Ha elencato le opzioni disponibili — GPT-5.2 Pro, Gemini 3 Pro e Claude Sonnet 4.5 — ciascuna annotata con costo, velocità e punti di forza. Ho scelto Claude Sonnet 4.5 (eccellente per seguire istruzioni e compiti creativi), e Enter ha collegato automaticamente l'intera connessione API.

Pochi minuti dopo, l'intera struttura del progetto era pronta — React 18 con TypeScript, Vite come strumento di build, Tailwind CSS per lo styling,@xyflow/reactper il canvas e una Supabase Edge Function connessa all'API di Claude. La logica principale di decomposizione e ricombinazione funzionava al primo tentativo.

Fase 2: Messa a Punto della Logica AI

Questa è stata la parte più critica e affascinante dell'intero progetto. Se Essence risulta piacevole o noioso dipende interamente dalla qualità dell'output AI. Il codice finale divide la logica AI in tre funzioni indipendenti, ciascuna con strategie di prompt accuratamente elaborate.

Il Problema: L'AI Era Troppo "Accademica"

Dopo che la prima versione era funzionante, i risultati dell'AI erano involontariamente esilaranti — inserendo "scissors" restituiva "pincer appendages" e "symmetrical evolution"; inserendo "love" dava "neurotransmitters" e "quantum states." Tecnicamente non sbagliato, ma per niente divertente, e per niente intuitivo. Questa non era l'esperienza che volevo.

#1 Fix : Dare all'AI una Persona

La svolta chiave è stata impostare un ruolo di sistema chiaro per l'AI — non "sei un assistente di decomposizione," ma**"Sei un gioco di decomposizione divertente. Trasforma cose complesse in semplici elementi costitutivi! Usa parole di tutti i giorni."**Quella singola frase ha completamente trasformato lo stile di output da articolo accademico a conversazione giocosa.

#2 Fix : Esempi Positivi + Anti-Pattern

Ho scoperto che i soli esempi positivi non erano sufficienti — l'AI occasionalmente scivolava ancora in modalità accademica. Quindi ho incluso contemporaneamente sia esempi buoni che cattivi:

**Esempi buoni:**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)Esempi cattivi (troppo accademici):❌ Pincer appendages, Symmetrical evolution, Neurotransmitters, Quantum states

Questo "contrasto positivo-negativo" ha dato all'AI una comprensione molto precisa del tono che volevo:semplice, intuitivo, il tipo che fa sorridere le persone o avere un momento "aha!".

#3 Fix : Tre Funzioni, Tre Strategie

La logica finale dell'AI è stata suddivisa in tre funzioni indipendenti, ognuna con il proprio design del prompt e regolazione dei parametri:

① Generazione Emoji (generateEmojiForConcept): Quando un utente inserisce un concetto, una chiamata AI separata genera prima un emoji semanticamente corrispondente. Il ruolo di sistema è impostato su "You are an emoji generator. You output only JSON," con temperature a 0.7 (precisione oltre creatività), guidato da esempi few-shot: stone → 🪨, fire → 🔥, love → ❤️. Se il parsing fallisce, ricorre elegantemente a un default ✨.

② Decomposizione Concetto (decomposeConcept): La funzione principale. Il prompt guida l'AI a "smontare le cose come mattoncini," restituendo esattamente 2 nodi (emoji + parola breve) più una spiegazione di una frase. Temperature è impostata a 0.8 — più alta della generazione emoji per permettere più spazio creativo. La decisione di design cruciale: ogni richiesta inietta un seed casuale (randomSeed), assicurando che lo stesso concetto produca risultati diversi ogni volta — questo dà all'esplorazione una vera "rigiocabilità."

③ Ricombinazione Concetti (recombineConcepts): La parte più creativa. Il prompt lo inquadra come "pensa come a un gioco," con esempi fantasiosi: Water + Fire = Steam ♨️, Flour + Fire = Bread 🍞, Human + Wings = Angel 👼, Sadness + Joy = Life 🎭. I risultati dovrebbero essere "sorprendenti, perspicaci, leggermente umoristici, non ovvi." Stessa tecnica del seed casuale per varietà.

#4 Fix : Le Spiegazioni al Passaggio Rendono Visibile la Logica

Ogni decomposizione o ricombinazione dell'AI restituisce anche una breveexplanation. Questo testo non appare direttamente sul nodo (mantenendo l'interfaccia minimale), ma è memorizzato nei dati del nodo. Quando un utente passa sopra un nodo, appare un elegante HoverCard che mostra l'intera catena di ragionamento:

• Nodi decomposti(etichette verde smeraldo): 🎭 Drama = 😢 Conflict + 👥 Characters, con "Drama is fundamentally conflict between characters" sotto

• Nodi combinati(etichette viola): 😴 Sleep + 💭 Imagination = 💫 Dream, con "Imagination during sleep is a dream" sotto

Questo design rende la stratificazione delle informazioni magnificamente elegante — in superficie, card emoji minimali; a un'ispezione più profonda, il processo di pensiero dell'AI.

Il Risultato

Dopo tutte queste ottimizzazioni, la qualità dell'output AI si è trasformata radicalmente:

❤️ 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

Ogni decomposizione genera un momento "eureka!"; ogni ricombinazione strappa un sorriso. Questo è il potere del prompt engineering — non si tratta di scrivere più codice, ma di trovare il modo giusto di parlare all'AI.

Fase 3: Rifinitura dell'Interazione

È qui che l'app ha iniziato a sembrare viva:

• Seleziona 1 nodo → appare il pulsante "Decompose"— scomponilo ulteriormente

• Shift + clic su 2 nodi → appare il pulsante "Recombine"— combinali insieme

• Doppio clic su qualsiasi nodo → Decomposizione istantanea— esplorazione rapida

• Passa il mouse su qualsiasi nodo elaborato → Vedi il ragionamento dell'AIin una HoverCard

Ho anche aggiunto un leggero livello di gamification: inizi con 20 punti(decompose costa 1, recombine costa 2), creando un vincolo leggero che ti fa pensare a quali percorsi esplorare. I punti persistono localmente e puoi sempre resettarli.

Fase 4: Rifinitura del Design UI

Con la funzionalità operativa, il focus successivo era far apparireEssence bello quanto lo era nell'utilizzo.

La prima decisione di design importante è stata la tipografia. Ho scelto Bricolage Grotesquecome font globale — un sans-serif geometrico e moderno che ha immediatamente sollevato l'app dal territorio dei font di sistema predefiniti e le ha dato un'identità di brand distintiva.

Le card dei nodi hanno attraversato diverse iterazioni. Il design finale è approdato su card rettangolari con angoli molto arrotondati (rounded-2xl) con sfondi pastello morbidi — amber-50, emerald-50 e violet-50 assegnati casualmente — con un grande emoji come ancoraggio visivo e una breve etichetta testuale in basso. La tela è finita per sembrare una dispersione di colorati sticky notes: leggera, giocosa e ordinata.

La casella di input è la "prima impressione" dell'app, quindi ho avuto gli standard più elevati per essa. È qui che la funzionalità Enter Componentsdi Enter ha davvero brillato — una libreria di componenti AI integrata dove puoi cercare, visualizzare in anteprima e aggiungere componenti con un clic. Ho digitato "ai" nella barra di ricerca e ho scoperto un componente chiamato claude-style-chat-input— un input conversazionale elegantemente stilizzato. Ho cliccato "+ Add to Chat" e Enter lo ha automaticamente integrato nel mio progetto, adattando lo stile per corrispondere al linguaggio di design esistente. L'input HTML semplice si è istantaneamente trasformato in un'esperienza di input conversazionale raffinata — bordi arrotondati, ombre morbide, layout dei pulsanti inline — perfettamente coeso con l'identità visiva dell'app.

Non c'è bisogno di scrivere componenti da zero o armeggiare con CSS. Enter Components ti permette di assemblare UI di alta qualità come mattoncini da costruzione, e Enter regola automaticamente lo stile per mantenere la coerenza visiva.

Infine, ho aggiunto un set di card concettuali di avvio rapido— ❤️ Love, 💰 Money, ⏰ Time, 🌳 Tree, 🎵 Music, 💭 Dream — visualizzate come mini-card colorate e inclinate nella schermata di benvenuto, abbassando la barriera di partenza a freddo così che gli utenti capiscano immediatamente cosa possono digitare.

Fase 5: Internazionalizzazione

Essence è costruita per un pubblico globale, quindi il supporto bilingue cinese-inglese non era un optional — era essenziale.

Ma l'internazionalizzazione non riguarda solo la traduzione del testo dell'UI. In Essence, anche l'output AI deve corrispondere alla lingua selezionata dall'utente — in modalità cinese, decomponendo "爱" dovrebbe restituire risultati in cinese come "人 + 信任"; passando alla modalità inglese e decomponendo "Love" dovrebbe restituire "Person + Trust." Questo significa che il toggle della lingua del frontend deve propagarsi fino al livello del prompt AI.

Per l'implementazione, ho usato Zustand per una gestione leggera dello stato della lingua. L'intero sistema i18n funziona così: l'utente clicca sul toggle della lingua nell'angolo in alto a destra → lo stato globale si aggiorna → tutto il testo dell'UI cambia istantaneamente → le chiamate AI ricevono il parametro della lingua corrente → i template dei prompt selezionano la versione cinese o inglese → l'output AI corrisponde automaticamente alla lingua dell'utente. La preferenza della lingua è anche persistente in localStorage, ripristinandosi senza problemi alla visita successiva.

In Enter, ottenere tutto questo ha richiesto solo una descrizione: "Aggiungi toggle cinese/inglese con un pulsante lingua nell'angolo in alto a destra. Tutto il testo dell'UI, i prompt AI e l'output AI dovrebbero cambiare automaticamente in base alla lingua selezionata." Enter ha costruito l'intera pipeline — dalla gestione dello stato alla ramificazione dei template dei prompt alla persistenza locale — in un colpo solo.

Questo ha anche convalidato un'importante lezione:prima costruisci l'i18n, meglio è. Se aspetti che tutte le funzionalità siano complete prima di aggiungere l'internazionalizzazione, troverai testo hardcoded sparso ovunque nei tuoi prompt e stringhe UI incorporate in ogni componente — e fare retrofit è doloroso. Costruisci l'architettura multilingue dal primo giorno, e dopo quello stai solo aggiungendo contenuti di traduzione.

---

Cosa Rende Essence Speciale

Decomponi: Vedi la struttura invisibile di ogni cosa

Digita qualsiasi parola. L'AI la scompone in esattamente 2 concetti atomici — ciascuno con un emoji semantico e una spiegazione di una frase. Poi continua. Scomponi anche quelli. Guarda un albero di concetti crescere davanti ai tuoi occhi.

🎭 Drama → 😢 Conflict + 👥 Characters 😢 Conflict → ⚡ Tension + 🎯 Goals 👥 Characters → 👤 Person + 💬 Story

Ricombina: Crea nuove idee dagli atomi di quelle vecchie

Seleziona qualsiasi 2 nodi sulla tela — anche da rami completamente diversi — e combinali. L'AI troverà la connessione sorprendente.

🔥 Fire + 💧 Water = ♨️ Steam 😴 Sleep + 💭 Imagination = 💫 Dream 👤 Person + ✈️ Wings = 👼 Angel

Gioca, non solo pensare

Il sistema a 20 punti trasforma l'esplorazione astratta in un gioco divertente. Ogni click è una scelta. Quale ramo esplori? Quali atomi combini? È una sandbox per la curiosità.

Il Tech Stack — Assemblato da Enter

Non ho configurato nulla di tutto questo manualmente. Enter.pro ha assemblato l'intero stack basandosi sulle mie descrizioni e prompt iterativi.

Lezioni Apprese

1. Prompting a Due Livelli, Due Mentalità

Costruire app AI con Enter è due conversazioni simultanee: parlare con Enter è come collaborare con un ingegnere full-stack — requisiti chiari necessari; parlare con Claude in-app è come collaborare con un partner creativo — guida emotiva e insegnamento basato su esempi necessari. Ottenere giusti entrambi i livelli è il vero mestiere.

2. Dai all'AI una Personalità, Non Solo Regole

Cambiare il ruolo di sistema da "Sei un assistente di decomposizione di concetti" a "Sei un gioco di decomposizione divertente" ha trasformato l'intero stile di output in una frase. Le regole vincolano il formato; la personalità definisce la qualità.

3. Esempi Positivi + Anti-Pattern Battono Lunghe Descrizioni

✅ Scissors → Blade + Hinge ❌ Pincer appendages, Symmetrical evolution, Neurotransmitters

Queste tre righe trasmettono più di quanto 100 parole potrebbero mai fare. Il contrasto positivo-negativo è la tecnica di prompt engineering più sottovalutata.

4. I Semi Casuali Danno ai Prodotti di Esplorazione Rigiocabilità

Lo stesso concetto produce risultati diversi ogni volta — oggi "Love = Person + Trust," domani "Love = Vulnerability + Courage." Semi casuali + temperature 0.8 massimizzano la varietà mantenendo la qualità. La linfa vitale di un prodotto di esplorazione è "qualcosa di nuovo ogni volta."

5. I Vincoli Creano Gioco

Il sistema a 20 punti ha trasformato il clicking senza scopo in esplorazione strategica. Principio classico di game design:scelte significative richiedono risorse limitate.

6. Vibe Coding Fatto Bene: Concentrati su Una Fase alla Volta

Prima le fondamenta → poi la personalità AI → poi la rifinitura dell'interazione → poi il design visivo → poi l'i18n. Ogni fase si concentra su una dimensione, mantenendo la conversazione con Enter nitida e l'output prevedibile.

🔗Costruisci il tuo con Enter: enter.converge.ai