Como construí um Explorador de Conceitos com IA em 4 horas com o Enter

Um designer sem experiência em backend usou o Enter.pro para construirEssence— um aplicativo de canvas nativo de IA que decompõe qualquer conceito em seus blocos fundamentais. Da ideia a um produto totalmente funcional com integração de IA, suporte bilíngue e uma experiência gamificada — tudo em apenas 4 horas.

A Faísca

Como designer, sempre fui fascinado por uma pergunta: de onde vem a criatividade?

Quanto mais estudava métodos de design, mais via o mesmo padrão: a criatividade muitas vezes começa com adesconstruçãoe arecombinação. Quebrar algo em suas partes essenciais e depois reconstruí-lo de uma maneira nova.

Essa ideia levou aoEssence— um canvas de exploração de conceitos impulsionado por IA. Insira qualquer conceito e a IA o decompõe em seus elementos centrais. Então, ao recombinar esses elementos, novas ideias começam a surgir.

Por que o Enter

Sou designer de produto, não desenvolvedor full-stack. A ideia para o Essence exigia várias coisas que pareciam assustadoras:

• Um canvas interativocom drag-and-drop, zoom e pan — o tipo de interface complexa que você veria em ferramentas como Figma ou Miro

• Integração com IApara alimentar a lógica de decomposição e recombinação de conceitos

• Um backend serverlesspara lidar com chamadas de API de IA de forma segura

• Implantaçãopara que as pessoas pudessem realmente usá-lo

Conectar-se a uma API de LLM costumava impedir a maioria dos não desenvolvedores — chaves de API, configuração de ambiente, lógica de autenticação.

Com o AI All do Enter, eu apenas disse: “Use o Claude Sonnet 4.5”, e ele conectou tudo — Edge Functions de backend, formatação de requisições, tratamento de erros.

Com oEnter.pro, eu não toco na infraestrutura de jeito nenhum. Eu descrevo o que quero e ele lida com React, Supabase, Edge Functions e integração de modelos. Eu apenas foco no "o quê" e no "porquê".

A Construção: 5 Fases em 4 Horas

Fase 1: Fundação

Organizei a ideia na minha cabeça em um prompt abrangente e enviei ao Enter. Aqui está o essencial:

Crie um aplicativo de exploração de canvas nativo de IA chamado "Essence". É um jogo de pensamento leve. Mecânica principal: os usuários inserem qualquer palavra e a IA a decompõe exatamente em 2 conceitos mais atômicos, exibidos como nós de emoji + palavra curta em um canvas. Regras de decomposição: sempre retornar exatamente 2 nós, cada um com 1 emoji + 1 palavra curta, os conceitos devem se tornar mais essenciais a cada nível — quebrando em direção a dimensões como emoção, motivo, energia, estrutura, relacionamento, poder, valor, desejo, conflito. Os usuários também podem selecionar quaisquer 2 nós para recombinar em 1 novo conceito. O canvas suporta arraste infinito, zoom, clique duplo para decompor, seleção múltipla para recombinar. Cada decomposição custa 1 ponto, cada recombinação custa 2.

Após ler este prompt, a primeira coisa que o Enter fez foi carregar suas capacidades de IA e depois me perguntou diretamente: "Qual modelo de IA você gostaria de usar para a decomposição e recomposição de conceitos?" Ele listou as opções disponíveis — GPT-5.2 Pro, Gemini 3 Pro e Claude Sonnet 4.5 — cada uma anotada com custo, velocidade e pontos fortes. Escolhi o Claude Sonnet 4.5 (excelente para seguir instruções e tarefas criativas), e o Enter conectou toda a API automaticamente.

Minutos depois, a estrutura completa do projeto estava pronta — React 18 com TypeScript, Vite como ferramenta de build, Tailwind CSS para estilização,@xyflow/reactpara o canvas, e uma Supabase Edge Function conectada à API do Claude. A lógica principal de decomposição e recombinação estava funcionando na primeira tentativa.

Fase 2: Ajuste da Lógica de IA

Esta foi a parte mais crítica e fascinante de todo o projeto. Se o Essence parece encantador ou entediante depende inteiramente da qualidade da saída da IA. O código final divide a lógica da IA em três funções independentes, cada uma com estratégias de prompt cuidadosamente elaboradas.

O Problema: A IA era "Acadêmica" demais

Depois que a primeira versão estava rodando, os resultados da AI eram involuntariamente hilários — ao inserir "tesoura", ela retornava "apêndices pinçadores" e "evolução simétrica"; ao inserir "amor", ela dava "neurotransmissores" e "estados quânticos". Tecnicamente não estava errado, mas não era nada divertido e não era intuitivo. Essa não era a experiência que eu queria.

#1 Correção : Dê uma Persona para a AI

O grande avanço foi definir uma função de sistema clara para a AI — não "você é um assistente de decomposição", mas**"Você é um jogo divertido de decomposição. Transforme coisas complexas em blocos de montar simples! Use palavras do dia a dia."**Essa única frase transformou completamente o estilo de saída de um artigo acadêmico para uma conversa lúdica.

#2 Correção : Exemplos Positivos + Anti-Padrões

Descobri que exemplos positivos sozinhos não eram suficientes — a AI ainda escorregava ocasionalmente para o modo acadêmico. Então, incluí exemplos bons e ruins simultaneamente:

**Bons exemplos:**Tesoura → 🔪 Lâmina + 🔗 Dobradiça (duas lâminas conectadas por uma dobradiça)Café → ☕ Água quente + 🫘 Grãos (água quente + grãos de café)Amigo → 👤 Pessoa + 🤝 Confiança (pessoas que confiam umas nas outras)Sonho → 😴 Sono + 💭 Imaginação (imaginação enquanto se dorme)Maus exemplos (muito acadêmicos):❌ Apêndices pinçadores, Evolução simétrica, Neurotransmissores, Estados quânticos

Esse "contraste positivo-negativo" deu à AI um entendimento muito preciso do tom que eu queria:simples, intuitivo, do tipo que faz as pessoas sorrirem ou terem um momento "ahá!".

#3 Correção : Três Funções, Três Estratégias

A lógica final da AI foi dividida em três funções independentes, cada uma com seu próprio design de prompt e ajuste de parâmetros:

① Geração de Emojis (generateEmojiForConcept): Quando um usuário insere um conceito, uma chamada de AI separada gera primeiro um emoji semanticamente correspondente. A função do sistema é definida como "Você é um gerador de emojis. Você gera apenas JSON", com temperatura em 0.7 (precisão acima da criatividade), guiada por exemplos few-shot: pedra → 🪨, fogo → 🔥, amor → ❤️. Se a análise falhar, ela volta suavemente para um ✨ padrão.

② Decomposição de Conceitos (decomposeConcept): A função central. O prompt guia a AI para "quebrar as coisas como blocos de montar", retornando exatamente 2 nós (emoji + palavra curta) mais uma explicação de uma frase. A temperatura é definida em 0.8 — mais alta que a geração de emoji para permitir mais espaço criativo. A decisão de design crucial: cada solicitação injeta uma semente aleatória (randomSeed), garantindo que o mesmo conceito produza resultados diferentes a cada vez — isso dá à exploração uma verdadeira "rejogabilidade".

③ Recombinação de Conceitos (recombineConcepts): A parte mais criativa. O prompt enquadra como "pense como um jogo", com exemplos imaginativos: Água + Fogo = Vapor ♨️, Farinha + Fogo = Pão 🍞, Humano + Asas = Anjo 👼, Tristeza + Alegria = Vida 🎭. Os resultados devem ser "surpreendentes, perspicazes, levemente humorísticos, não óbvios". Mesma técnica de semente aleatória para variedade.

#4 Correção : Explicações ao passar o mouse tornam a lógica visível

Cada decomposição ou recombinação da AI também retorna uma breveexplicação. Esse texto não aparece diretamente no nó (mantendo a interface minimalista), mas é armazenado nos dados do nó. Quando um usuário passa o mouse sobre um nó, um elegante HoverCard aparece mostrando a cadeia completa de raciocínio:

• Nós decompostos(rótulos esmeralda): 🎭 Drama = 😢 Conflito + 👥 Personagens, com "Drama é fundamentalmente conflito entre personagens" abaixo

• Nós combinados(rótulos violeta): 😴 Sono + 💭 Imaginação = 💫 Sonho, com "Imaginação durante o sono é um sonho" abaixo

Esse design torna a estratificação de informações lindamente elegante — na superfície, cartões de emoji minimalistas; em uma inspeção mais profunda, o processo de pensamento da AI.

O Resultado

Após todo esse ajuste, a qualidade da saída da AI transformou-se drasticamente:

❤️ Amor → 👤 Pessoa + 🤝 Confiança (pessoas que confiam umas nas outras) ☕ Café → 🫘 Grãos + ☕ Água quente (água quente encontra grãos de café) 💭 Sonho → 🔮 Imaginação + 🔥 Desejo (uma visão ardente do futuro) 🔥 Fogo + 💧 Água = ♨️ Vapor 😴 Sono + 💭 Imaginação = 💫 Sonho

Cada decomposição gera um momento "aha!"; cada recombinação arranca um sorriso. Esse é o poder do prompt engineering — não se trata de escrever mais código, mas de encontrar a maneira certa de conversar com a AI.

Fase 3: Polimento da Interação

Foi aqui que o aplicativo começou a parecervivo:

• Selecione 1 nó → o botão "Decompor" aparece— quebre-o ainda mais

• Shift + clique em 2 nós → o botão "Recombinar" aparece— misture-os

• Clique duplo em qualquer nó → Decomposição instantânea— exploração rápida

• Passe o mouse sobre qualquer nó processado → Veja o raciocínio da AIem um HoverCard

Também adicionei uma camada leve de gamificação: você começa com20 pontos(decompor custa 1, recombinar custa 2), criando uma restrição suave que faz você pensar sobre quais caminhos explorar. Os pontos persistem localmente e você sempre pode reiniciar.

Fase 4: Polimento do Design da UI

Com a funcionalidade funcionando, o próximo foco foi fazer com que o Essenceparecessetão bom quanto a sensação que ele proporcionava.

A primeira grande decisão de design foi a tipografia. EscolhiBricolage Grotesquecomo fonte global — uma sans-serif moderna e geométrica que tirou instantaneamente o aplicativo do território de fontes padrão do sistema e lhe deu uma identidade de marca distinta.

O visual dos cartões de nós passou por várias iterações. O design final chegou a cartões grandes de retângulos arredondados (rounded-2xl) com fundos em tons pastéis suaves — amber-50, emerald-50 e violet-50 atribuídos aleatoriamente — com um emoji grande como âncora visual e um rótulo de palavra curta na parte inferior. A tela acabou parecendo uma dispersão de notas adesivas coloridas: leve, divertida e organizada.

A caixa de entrada é a "primeira impressão" do aplicativo, então tive os padrões mais elevados para ela. Foi aqui que o recursoEnter Componentsdo Enter realmente brilhou — uma biblioteca de componentes de AI integrada onde você pode pesquisar, visualizar e adicionar componentes com um clique. Digitei "ai" na barra de busca e descobri um componente chamadoclaude-style-chat-input— uma entrada de conversação elegantemente estilizada. Cliquei em "+ Add to Chat" e o Enter integrou-o automaticamente ao meu projeto, adaptando o estilo para corresponder à linguagem de design existente. A entrada HTML simples transformou-se instantaneamente em uma experiência de entrada conversacional polida — bordas arredondadas, sombras suaves, layout de botão em linha — perfeitamente coesa com a identidade visual do aplicativo.

Não é necessário escrever componentes do zero ou perder tempo com CSS. O Enter Components permite montar uma UI de alta qualidade como blocos de montar, e o Enter ajusta automaticamente o estilo para manter a consistência visual.

Por fim, adicionei um conjunto decartões de conceito de início rápido— ❤️ Amor, 💰 Dinheiro, ⏰ Tempo, 🌳 Árvore, 🎵 Música, 💭 Sonho — exibidos como mini cartões coloridos e inclinados na tela de boas-vindas, reduzindo a barreira de entrada para que os usuários entendam imediatamente o que podem digitar.

Fase 5: Internacionalização

O Essence foi construído para um público global, então o suporte bilíngue chinês-inglês não era apenas algo bom de se ter — era essencial.

Mas a internacionalização não trata apenas de traduzir o texto da UI. No Essence, a saída da AI também deve corresponder ao idioma selecionado pelo usuário — no modo chinês, decompor "爱" deve retornar resultados em chinês como "人 + 信任"; mude para o modo inglês e decompor "Love" deve retornar "Person + Trust". Isso significa que a alternância de idioma do frontend deve propagar-se até a camada de prompt da AI.

Para a implementação, usei o Zustand para gerenciamento leve do estado do idioma. Todo o sistema i18n funciona assim: o usuário clica na alternância de idioma no canto superior direito → o estado global é atualizado → todo o texto da UI muda instantaneamente → as chamadas de AI recebem o parâmetro de idioma atual → os modelos de prompt selecionam a versão em chinês ou inglês → a saída da AI corresponde automaticamente ao idioma do usuário. A preferência de idioma também é persistida no localStorage, restaurando perfeitamente na próxima visita.

No Enter, alcançar tudo isso exigiu apenas uma descrição: "Adicione uma alternância de chinês/inglês com um botão de idioma no canto superior direito. Todo o texto da UI, prompts de AI e saída de AI devem mudar automaticamente com base no idioma selecionado." O Enter estruturou todo o pipeline — do gerenciamento de estado à ramificação de modelos de prompt e persistência local — de uma só vez.

Isso também validou uma lição importante:quanto antes você implementar i18n, melhor. Se você esperar até que todos os recursos estejam completos antes de adicionar internacionalização, encontrará textos codificados espalhados pelos seus prompts e strings de interface integradas a cada componente — e fazer essa adaptação é doloroso. Construa a arquitetura multilíngue desde o primeiro dia e, depois disso, você estará apenas adicionando conteúdo de tradução.

---

O que torna o Essence especial

Decompor: veja a estrutura invisível de tudo

Digite qualquer palavra. A AI a decompõe exatamente em 2 conceitos atômicos — cada um com um emoji semântico e uma explicação de uma frase. Então continue. Decomponha esses também. Veja uma árvore de conceitos crescer diante dos seus olhos.

🎭 Drama → 😢 Conflito + 👥 Personagens 😢 Conflito → ⚡ Tensão + 🎯 Objetivos 👥 Personagens → 👤 Pessoa + 💬 História

Recombinar: crie novas ideias a partir dos átomos das antigas

Selecione quaisquer 2 nós na tela — mesmo de ramos completamente diferentes — e combine-os. A AI encontrará a conexão surpreendente.

🔥 Fogo + 💧 Água = ♨️ Vapor 😴 Sono + 💭 Imaginação = 💫 Sonho 👤 Pessoa + ✈️ Asas = 👼 Anjo

Brinque, não apenas pense

O sistema de 20 pontos transforma a exploração abstrata em um jogo divertido. Cada clique é uma escolha. Qual ramo você explora? Quais átomos você combina? É um playground para a curiosidade.

A Tech Stack — Montada pelo Enter

Não configurei nada disso manualmente. O Enter.pro montou a stack completa com base nas minhas descrições e prompts iterativos.

Lições Aprendidas

1. Prompting de Duas Camadas, Duas Mentalidades

Construir aplicativos de AI com o Enter são duas conversas simultâneas: falar com o Enter é como colaborar com um engenheiro full-stack — são necessários requisitos claros; falar com o Claude dentro do aplicativo é como colaborar com um parceiro criativo — são necessárias orientação emocional e ensino baseado em exemplos. Acertar ambas as camadas é a verdadeira habilidade.

2. Dê à AI uma personalidade, não apenas regras

Mudar a função do sistema de "Você é um assistente de decomposição de conceitos" para "Você é um jogo divertido de decomposição" transformou todo o estilo de saída em uma frase. Regras restringem o formato; a personalidade define a qualidade.

3. Exemplos Positivos + Anti-Padrões superam descrições longas

✅ Tesoura → Lâmina + Dobradiça ❌ Apêndices em pinça, Evolução simétrica, Neurotransmissores

Estas três linhas transmitem mais do que 100 palavras jamais poderiam. O contraste positivo-negativo é a técnica de engenharia de prompt mais subestimada.

4. Seeds aleatórias dão aos produtos de exploração capacidade de replay

O mesmo conceito gera resultados diferentes a cada vez — hoje "Amor = Pessoa + Confiança", amanhã "Amor = Vulnerabilidade + Coragem". Seeds aleatórias + temperatura 0.8 maximizam a variedade enquanto mantêm a qualidade. A força vital de um produto de exploração é "algo novo a cada vez".

5. Restrições criam o brincar

O sistema de 20 pontos transformou cliques sem rumo em exploração estratégica. Princípio clássico de design de jogos:escolhas significativas exigem recursos limitados.

6. Vibe Coding feito da maneira certa: foque em uma fase de cada vez

Fundação primeiro → depois personalidade da AI → depois polimento da interação → depois design visual → depois i18n. Cada fase foca em uma dimensão, mantendo a conversa com o Enter nítida e o resultado previsível.

🔗Construa o seu próprio com o Enter: enter.converge.ai