Cómo construí un Explorador de Conceptos impulsado por IA en 4 horas con Enter

Un diseñador sin experiencia en backend usó Enter.pro para construirEssence— una aplicación de lienzo nativa de IA que descompone cualquier concepto en sus bloques fundamentales. De la idea a un producto completamente funcional con integración de IA, soporte bilingüe y una experiencia gamificada — todo en solo 4 horas.

La Chispa

Como diseñador, siempre me ha fascinado una pregunta: ¿de dónde viene la creatividad?

Cuanto más estudiaba métodos de diseño, más veía el mismo patrón: la creatividad a menudo comienza con ladeconstruccióny larecombinación. Descomponer algo en sus partes esenciales, luego reconstruirlo de una nueva manera.

Esa idea llevó aEssence— un lienzo de exploración de conceptos impulsado por IA. Ingresa cualquier concepto, y la IA lo descompone en sus elementos fundamentales. Luego, al recombinar esos elementos, nuevas ideas comienzan a emerger.

Por Qué Enter

Soy diseñador de productos, no desarrollador full-stack. La idea de Essence requería varias cosas que parecían desalentadoras:

• Un lienzo interactivocon arrastrar y soltar, zoom y desplazamiento — el tipo de UI compleja que verías en herramientas como Figma o Miro

• Integración de IApara impulsar la lógica de descomposición y recombinación de conceptos

• Un backend sin servidorpara manejar llamadas a la API de IA de forma segura

• Desplieguepara que la gente pudiera realmente usarlo

Conectarse a una API de LLM solía detener a la mayoría de los no desarrolladores — claves API, configuración de env, lógica de autenticación.

Con AI All de Enter, solo dije: "Usa Claude Sonnet 4.5," y conectó todo — Edge Functions backend, formato de solicitudes, manejo de errores.

ConEnter.pro, no toco la infraestructura en absoluto. Describo lo que quiero, y maneja React, Supabase, Edge Functions e integración de modelos. Solo me enfoco en el qué y el por qué.

La Construcción: 5 Fases en 4 Horas

Fase 1: Fundación

Organicé la idea en mi cabeza en un prompt integral y lo envié a Enter. Esta es la esencia:

Crea una aplicación de exploración de lienzo nativa de IA llamada "Essence." Es un juego de pensamiento ligero. Mecánica central: los usuarios ingresan cualquier palabra, y la IA la descompone en exactamente 2 conceptos más atómicos, mostrados como nodos de emoji + palabra corta en un lienzo. Reglas de descomposición: siempre devolver exactamente 2 nodos, cada uno con 1 emoji + 1 palabra corta, los conceptos deben volverse más esenciales con cada nivel — rompiendo hacia dimensiones como emoción, motivo, energía, estructura, relación, poder, valor, deseo, conflicto. Los usuarios también pueden seleccionar cualquier 2 nodos para recombinarlos en 1 nuevo concepto. El lienzo soporta arrastre infinito, zoom, doble clic para descomponer, selección múltiple para recombinar. Cada descomposición cuesta 1 punto, cada recombinación cuesta 2.

Después de leer este prompt, lo primero que hizo Enter fue cargar sus capacidades de IA, luego me preguntó directamente: "¿Qué modelo de IA te gustaría usar para la descomposición y recomposición de conceptos?" Listó las opciones disponibles — GPT-5.2 Pro, Gemini 3 Pro y Claude Sonnet 4.5 — cada una anotada con costo, velocidad y fortalezas. Elegí Claude Sonnet 4.5 (excelente para seguimiento de instrucciones y tareas creativas), y Enter conectó toda la conexión API automáticamente.

Minutos después, la estructura completa del proyecto estaba lista — React 18 con TypeScript, Vite como herramienta de construcción, Tailwind CSS para estilos,@xyflow/reactpara el lienzo, y una Supabase Edge Function conectada a la API de Claude. La lógica central de descomposición y recombinación funcionó al primer intento.

Fase 2: Afinación de Lógica de IA

Esta fue la parte más crítica y fascinante de todo el proyecto. Que Essence se sienta delicioso o aburrido depende enteramente de la calidad de salida de la IA. El código final divide la lógica de IA en tres funciones independientes, cada una con estrategias de prompt cuidadosamente elaboradas.

El Problema: La IA Era Demasiado "Académica"

Después de que la primera versión estaba funcionando, los resultados de la IA fueron involuntariamente hilarantes — ingresa "scissors" y devolvía "pincer appendages" y "symmetrical evolution"; ingresa "love" y daba "neurotransmitters" y "quantum states." Técnicamente no estaba mal, pero no era divertido en absoluto, y no era intuitivo. Esta no era la experiencia que quería.

#1 Solución: Dale una Personalidad a la IA

El avance clave fue establecer un rol de sistema claro para la IA — no "eres un asistente de descomposición," sino**"Eres un juego de descomposición divertido. ¡Convierte cosas complejas en bloques de construcción simples! Usa palabras cotidianas."**Esa única oración transformó completamente el estilo de salida de artículo académico a conversación lúdica.

#2 Solución: Ejemplos Positivos + Anti-Patrones

Descubrí que los ejemplos positivos solos no eran suficientes — la IA ocasionalmente todavía caería en modo académico. Así que incluí ejemplos buenos y malos simultáneamente:

**Buenos ejemplos:**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)Malos ejemplos (demasiado académicos):❌ Pincer appendages, Symmetrical evolution, Neurotransmitters, Quantum states

Este "contraste positivo-negativo" le dio a la IA una comprensión muy precisa del tono que quería:simple, intuitivo, del tipo que hace que la gente sonría o tenga un momento "¡ajá!".

#3 Solución: Tres Funciones, Tres Estrategias

La lógica final de IA se dividió en tres funciones independientes, cada una con su propio diseño de prompt y ajuste de parámetros:

① Generación de Emoji (generateEmojiForConcept): Cuando un usuario ingresa un concepto, una llamada de IA separada primero genera un emoji semánticamente correspondiente. El rol del sistema se establece en "You are an emoji generator. You output only JSON," con temperatura en 0.7 (precisión sobre creatividad), guiado por ejemplos few-shot: stone → 🪨, fire → 🔥, love → ❤️. Si el análisis falla, recurre elegantemente a un ✨ por defecto.

② Descomposición de Conceptos (decomposeConcept): La función central. El prompt guía a la IA a "descomponer cosas como bloques de construcción," devolviendo exactamente 2 nodos (emoji + palabra corta) más una explicación de una oración. La temperatura se establece en 0.8 — más alta que la generación de emoji para permitir más espacio creativo. La decisión de diseño crucial: cada solicitud inyecta una semilla aleatoria (randomSeed), asegurando que el mismo concepto produzca resultados diferentes cada vez — esto le da a la exploración verdadera "rejugabilidad."

③ Recombinación de Conceptos (recombineConcepts): La parte más creativa. El prompt lo enmarca como "piensa como un juego," con ejemplos imaginativos: Water + Fire = Steam ♨️, Flour + Fire = Bread 🍞, Human + Wings = Angel 👼, Sadness + Joy = Life 🎭. Los resultados deben ser "sorprendentes, perspicaces, ligeramente humorísticos, no obvios." Misma técnica de semilla aleatoria para variedad.

#4 Solución: Las Explicaciones al Pasar el Cursor Hacen la Lógica Visible

Cada descomposición o recombinación de IA también devuelve una breveexplanation. Este texto no aparece directamente en el nodo (manteniendo la interfaz minimalista), pero se almacena en los datos del nodo. Cuando un usuario pasa el cursor sobre un nodo, aparece un HoverCard elegante mostrando la cadena de razonamiento completa:

• Decomposed nodes(etiquetas verde esmeralda): 🎭 Drama = 😢 Conflict + 👥 Characters, con "Drama is fundamentally conflict between characters" debajo

• Combined nodes(etiquetas violeta): 😴 Sleep + 💭 Imagination = 💫 Dream, con "Imagination during sleep is a dream" debajo

Este diseño hace que la disposición en capas de información sea bellamente elegante — en la superficie, tarjetas de emoji minimalistas; en una inspección más profunda, el proceso de pensamiento de la IA.

El Resultado

Después de todo este ajuste, la calidad de salida de la IA se transformó dramáticamente:

❤️ Amor → 👤 Persona + 🤝 Confianza (personas que confían entre sí) ☕ Café → 🫘 Granos + ☕ Agua caliente (el agua caliente se encuentra con los granos de café) 💭 Sueño → 🔮 Imaginación + 🔥 Deseo (una visión ardiente del futuro) 🔥 Fuego + 💧 Agua = ♨️ Vapor 😴 Dormir + 💭 Imaginación = 💫 Sueño

Cada descomposición genera un momento "¡ajá!"; cada recombinación dibuja una sonrisa. Ese es el poder de la ingeniería de prompts — no se trata de escribir más código, sino de encontrar la forma correcta de hablar con la IA.

Fase 3: Pulido de Interacción

Aquí es donde la aplicación comenzó a sentirse viva:

• Seleccionar 1 nodo → Aparece el botón "Descomponer"— desglosarlo más

• Shift + clic en 2 nodos → Aparece el botón "Recombinar"— combinarlos

• Doble clic en cualquier nodo → Descomposición instantánea— exploración rápida

• Pasar el cursor sobre cualquier nodo procesado → Ver el razonamiento de la IAen un HoverCard

También agregué una capa de gamificación ligera: comienzas con 20 puntos(descomponer cuesta 1, recombinar cuesta 2), creando una restricción suave que te hace pensar en qué caminos explorar. Los puntos persisten localmente, y siempre puedes reiniciar.

Fase 4: Pulido del Diseño de UI

Con la funcionalidad funcionando, el siguiente enfoque fue hacer que Essence se vieratan bien como se sentía.

La primera decisión importante de diseño fue la tipografía. Elegí Bricolage Grotesquecomo la fuente global — una sans-serif geométrica y moderna que instantáneamente elevó la aplicación del territorio de fuentes predeterminadas del sistema y le dio una identidad de marca distintiva.

Los visuales de las tarjetas de nodos pasaron por varias iteraciones. El diseño final se decidió por tarjetas rectangulares redondeadas grandes (rounded-2xl) con fondos pastel suaves — amber-50, emerald-50, y violet-50 asignados aleatoriamente — con un emoji grande como ancla visual y una etiqueta de palabra corta en la parte inferior. El lienzo terminó pareciendo una dispersión de notas adhesivas coloridas: ligero, juguetón y despejado.

El cuadro de entrada es la "primera impresión" de la aplicación, así que tuve los estándares más altos para él. Aquí es donde la función Enter Componentsde Enter realmente brilló — una biblioteca de componentes de IA integrada donde puedes buscar, previsualizar y agregar componentes con un clic. Escribí "ai" en la barra de búsqueda y descubrí un componente llamado claude-style-chat-input— una entrada conversacional elegantemente diseñada. Hice clic en "+ Add to Chat," y Enter automáticamente lo integró en mi proyecto, adaptando el estilo para coincidir con el lenguaje de diseño existente. La entrada HTML simple se transformó instantáneamente en una experiencia de entrada conversacional pulida — bordes redondeados, sombras suaves, diseño de botón en línea — perfectamente cohesivo con la identidad visual de la aplicación.

No es necesario escribir componentes desde cero o ajustar CSS. Enter Components te permite ensamblar UI de alta calidad como bloques de construcción, y Enter ajusta automáticamente el estilo para mantener la consistencia visual.

Finalmente, agregué un conjunto de tarjetas de conceptos de inicio rápido— ❤️ Amor, 💰 Dinero, ⏰ Tiempo, 🌳 Árbol, 🎵 Música, 💭 Sueño — mostradas como mini-tarjetas inclinadas y coloridas en la pantalla de bienvenida, reduciendo la barrera de inicio en frío para que los usuarios comprendan inmediatamente qué pueden escribir.

Fase 5: Internacionalización

Essence está construido para una audiencia global, por lo que el soporte bilingüe chino-inglés no era algo deseable — era esencial.

Pero la internacionalización no se trata solo de traducir el texto de la UI. En Essence, la salida de la IA también tiene que coincidir con el idioma seleccionado por el usuario — en modo chino, descomponer "爱" debería devolver resultados en chino como "人 + 信任"; cambiar a modo inglés y descomponer "Love" debería devolver "Person + Trust." Esto significa que el cambio de idioma del frontend tiene que propagarse hasta la capa de prompt de la IA.

Para la implementación, utilicé Zustand para la gestión ligera del estado del idioma. Todo el sistema i18n funciona así: el usuario hace clic en el cambio de idioma en la esquina superior derecha → el estado global se actualiza → todo el texto de la UI cambia instantáneamente → las llamadas a la IA reciben el parámetro de idioma actual → las plantillas de prompts seleccionan la versión china o inglesa → la salida de la IA coincide automáticamente con el idioma del usuario. La preferencia de idioma también se persiste en localStorage, restaurándose sin problemas en la próxima visita.

En Enter, lograr todo esto requirió solo una descripción: "Agregar cambio chino/inglés con un botón de idioma en la esquina superior derecha. Todo el texto de la UI, prompts de IA y salida de IA deben cambiar automáticamente según el idioma seleccionado." Enter construyó toda la infraestructura — desde la gestión del estado hasta la ramificación de plantillas de prompts hasta la persistencia local — de una sola vez.

Esto también validó una lección importante:cuanto antes incorpores i18n, mejor. Si esperas hasta que todas las funcionalidades estén completas antes de agregar internacionalización, encontrarás texto hardcodeado disperso por tus prompts y cadenas de UI integradas en cada componente — y adaptar todo es doloroso. Construye la arquitectura multilingüe desde el primer día, y después de eso solo estarás agregando contenido de traducción.

---

Qué Hace Especial a Essence

Descomponer: Ve la estructura invisible de todo

Escribe cualquier palabra. La IA la descompone en exactamente 2 conceptos atómicos — cada uno con un emoji semántico y una explicación de una oración. Luego continúa. Descompón esos también. Observa cómo un árbol de conceptos crece ante tus ojos.

🎭 Drama → 😢 Conflicto + 👥 Personajes 😢 Conflicto → ⚡ Tensión + 🎯 Objetivos 👥 Personajes → 👤 Persona + 💬 Historia

Recombinar: Crea nuevas ideas a partir de los átomos de las antiguas

Selecciona cualquier 2 nodos en el lienzo — incluso de ramas completamente diferentes — y combínalos. La IA encontrará la conexión sorprendente.

🔥 Fuego + 💧 Agua = ♨️ Vapor 😴 Sueño + 💭 Imaginación = 💫 Ensueño 👤 Persona + ✈️ Alas = 👼 Ángel

Juega, no solo pienses

El sistema de 20 puntos convierte la exploración abstracta en un juego divertido. Cada clic es una elección. ¿Qué rama exploras? ¿Qué átomos combinas? Es un sandbox para la curiosidad.

El Stack Tecnológico — Ensamblado por Enter

No configuré nada de esto manualmente. Enter.pro ensambló el stack completo basándose en mis descripciones y prompts iterativos.

Lecciones Aprendidas

1. Prompting de Dos Capas, Dos Mentalidades

Construir aplicaciones de IA con Enter es dos conversaciones simultáneas: hablar con Enter es como colaborar con un ingeniero full-stack — se necesitan requisitos claros; hablar con el Claude integrado en la app es como colaborar con un socio creativo — se necesita orientación emocional y enseñanza basada en ejemplos. Hacer bien ambas capas es el verdadero arte.

2. Dale a la IA una Personalidad, No Solo Reglas

Cambiar el rol del sistema de "Eres un asistente de descomposición de conceptos" a "Eres un juego de descomposición divertido" transformó el estilo completo del output en una oración. Las reglas restringen el formato; la personalidad define la calidad.

3. Ejemplos Positivos + Anti-Patrones Superan Descripciones Largas

✅ Tijeras → Hoja + Bisagra ❌ Apéndices de pinza, Evolución simétrica, Neurotransmisores

Estas tres líneas transmiten más de lo que 100 palabras podrían. El contraste positivo-negativo es la técnica de ingeniería de prompts más subestimada.

4. Las Semillas Aleatorias Dan Rejugabilidad a los Productos de Exploración

El mismo concepto produce resultados diferentes cada vez — hoy "Amor = Persona + Confianza," mañana "Amor = Vulnerabilidad + Coraje." Semillas aleatorias + temperatura 0.8 maximizan la variedad manteniendo la calidad. El alma de un producto de exploración es "algo nuevo cada vez."

5. Las Restricciones Crean Juego

El sistema de 20 puntos convirtió los clics sin rumbo en exploración estratégica. Principio clásico de diseño de juegos:las elecciones significativas requieren recursos limitados.

6. Vibe Coding Bien Hecho: Enfócate en Una Fase a la Vez

Primero la base → luego la personalidad de la IA → luego el pulido de la interacción → luego el diseño visual → luego i18n. Cada fase se enfoca en una dimensión, manteniendo la conversación con Enter nítida y el output predecible.

🔗Construye el tuyo con Enter: enter.converge.ai