Wie ich in 4 Stunden einen KI-gestützten Konzept-Explorer mit Enter gebaut habe

Ein Designer ohne Backend-Erfahrung nutzte Enter.pro, umEssencezu bauen — eine KI-native Canvas-App, die jedes Konzept in seine grundlegenden Bausteine zerlegt. Von der Idee bis zum voll funktionsfähigen Produkt mit KI-Integration, zweisprachiger Unterstützung und spielerischem Erlebnis — alles in nur 4 Stunden.

Der Funke

Als Designer hat mich eine Frage schon immer fasziniert: Woher kommt Kreativität?

Je mehr ich Designmethoden studierte, desto mehr erkannte ich dasselbe Muster: Kreativität beginnt oft mitDekonstruktionundRekombination. Zerlege etwas in seine wesentlichen Teile und baue es dann auf neue Weise wieder zusammen.

Diese Idee führte zuEssence— einem KI-gestützten Canvas zur Erforschung von Konzepten. Gib ein beliebiges Konzept ein, und die KI zerlegt es in seine Kernelemente. Durch das Rekombinieren dieser Elemente entstehen dann neue Ideen.

Warum Enter

Ich bin Produktdesigner, kein Full-Stack-Entwickler. Die Idee für Essence erforderte einige Dinge, die entmutigend wirkten:

• Ein interaktives Canvasmit Drag-and-Drop, Zoom und Pan — die Art von komplexer Benutzeroberfläche, die man aus Tools wie Figma oder Miro kennt

• KI-Integrationum die Logik für die Konzeptzerlegung und -rekombination anzutreiben

• Ein serverloses Backendum KI-API-Aufrufe sicher abzuwickeln

• Deploymentdamit Leute es tatsächlich nutzen können

Die Verbindung zu einer LLM-API hat früher die meisten Nicht-Entwickler gestoppt — API-Keys, Umgebungseinrichtung, Auth-Logik.

Mit Enters AI All sagte ich einfach: „Nutze Claude Sonnet 4.5“, und es hat alles verkabelt — Backend Edge Functions, Request-Formatierung, Fehlerbehandlung.

MitEnter.pro, berühre ich die Infrastruktur überhaupt nicht. Ich beschreibe, was ich will, und es kümmert sich um React, Supabase, Edge Functions und Modellintegration. Ich konzentriere mich nur auf das Was und Warum.

Der Build: 5 Phasen in 4 Stunden

Phase 1: Grundlage

Ich habe die Idee in meinem Kopf in einem umfassenden Prompt organisiert und an Enter gesendet. Hier ist der Kern:

Erstelle eine KI-native Canvas-Explorations-App namens "Essence". Es ist ein leichtgewichtiges Denkspiel. Kernmechanik: Benutzer geben ein beliebiges Wort ein, und die KI zerlegt es in genau 2 weitere atomare Konzepte, die als Emoji + kurzes Wort auf einem Canvas angezeigt werden. Zerlegungsregeln: Gib immer genau 2 Knoten zurück, jeder mit 1 Emoji + 1 kurzem Wort, Konzepte sollten mit jedem Level essenzieller werden — hin zu Dimensionen wie Emotion, Motiv, Energie, Struktur, Beziehung, Macht, Wert, Verlangen, Konflikt. Benutzer können auch beliebige 2 Knoten auswählen, um sie zu 1 neuem Konzept zu rekombinieren. Das Canvas unterstützt unendliches Ziehen, Zoomen, Doppelklick zum Zerlegen, Mehrfachauswahl zum Rekombinieren. Jede Zerlegung kostet 1 Punkt, jede Rekombination kostet 2.

Nachdem Enter diesen Prompt gelesen hatte, lud es als Erstes seine KI-Fähigkeiten und fragte mich dann direkt: „Welches KI-Modell möchtest du für die Konzeptzerlegung und -rekombination verwenden?“ Es listete die verfügbaren Optionen auf — GPT-5.2 Pro, Gemini 3 Pro und Claude Sonnet 4.5 — jede mit Angaben zu Kosten, Geschwindigkeit und Stärken. Ich wählte Claude Sonnet 4.5 (exzellent für das Befolgen von Anweisungen und kreative Aufgaben), und Enter richtete die gesamte API-Verbindung automatisch ein.

Minuten später war die vollständige Projektstruktur fertig — React 18 mit TypeScript, Vite als Build-Tool, Tailwind CSS für das Styling,@xyflow/reactfür das Canvas und eine Supabase Edge Function, die mit der API von Claude verbunden ist. Die Kernlogik für Zerlegung und Rekombination funktionierte beim ersten Versuch.

Phase 2: KI-Logik-Tuning

Dies war der kritischste und faszinierendste Teil des gesamten Projekts. Ob sich Essence unterhaltsam oder langweilig anfühlt, hängt vollständig von der Qualität der KI-Ausgabe ab. Der finale Code unterteilt die KI-Logik in drei unabhängige Funktionen, jede mit sorgfältig ausgearbeiteten Prompt-Strategien.

Das Problem: Die KI war zu „akademisch“

Nachdem die erste Version lief, waren die AI-Ergebnisse unfreiwillig komisch — bei Eingabe von "Schere" kamen "Greifwerkzeuge" und "symmetrische Evolution" zurück; bei Eingabe von "Liebe" kamen "Neurotransmitter" und "Quantenzustände". Technisch nicht falsch, aber absolut nicht unterhaltsam und überhaupt nicht intuitiv. Das war nicht die Erfahrung, die ich wollte.

#1 Lösung : Gib der AI eine Persona

Der entscheidende Durchbruch war, der AI eine klare Systemrolle zuzuweisen — nicht "Du bist ein Zerlegungsassistent", sondern**"Du bist ein unterhaltsames Zerlegungsspiel. Verwandle komplexe Dinge in einfache Bausteine! Verwende Alltagssprache."**Dieser eine Satz veränderte den Output-Stil komplett von einer wissenschaftlichen Arbeit hin zu einem spielerischen Gespräch.

#2 Lösung : Positive Beispiele + Anti-Patterns

Ich stellte fest, dass positive Beispiele allein nicht ausreichten – die AI verfiel gelegentlich immer noch in den akademischen Modus. Also habe ich gute und schlechte Beispiele gleichzeitig eingebunden:

**Gute Beispiele:**Schere → 🔪 Klinge + 🔗 Gelenk (zwei durch ein Gelenk verbundene Klingen), Kaffee → ☕ Heißes Wasser + 🫘 Bohnen (heißes Wasser + Kaffeebohnen), Freund → 👤 Person + 🤝 Vertrauen (Menschen, die sich vertrauen), Traum → 😴 Schlaf + 💭 Vorstellungskraft (Vorstellungskraft während des Schlafens)Schlechte Beispiele (zu akademisch):❌ Greifwerkzeuge, Symmetrische Evolution, Neurotransmitter, Quantenzustände

Dieser "Positiv-Negativ-Kontrast" gab der AI ein sehr präzises Verständnis für den Ton, den ich wollte:einfach, intuitiv, die Art, die Menschen zum Lächeln bringt oder für einen "Aha!"-Moment sorgt.

#3 Lösung : Drei Funktionen, drei Strategien

Die finale AI-Logik wurde in drei unabhängige Funktionen unterteilt, jede mit ihrem eigenen Prompt-Design und Parameter-Tuning:

① Emoji-Generierung (generateEmojiForConcept): Wenn ein Benutzer ein Konzept eingibt, generiert ein separater AI-Aufruf zuerst ein semantisch passendes Emoji. Die Systemrolle ist auf "Du bist ein Emoji-Generator. Du gibst nur JSON aus" gesetzt, bei einer Temperatur von 0,7 (Genauigkeit vor Kreativität), geleitet von Few-Shot-Beispielen: Stein → 🪨, Feuer → 🔥, Liebe → ❤️. Wenn das Parsing fehlschlägt, greift das System elegant auf ein Standard-✨ zurück.

② Konzept-Zerlegung (decomposeConcept): Die Kernfunktion. Der Prompt leitet die AI an, "Dinge wie Bausteine auseinanderzunehmen" und gibt exakt 2 Knoten (Emoji + kurzes Wort) plus eine einzeilige Erklärung zurück. Die Temperatur ist auf 0,8 gesetzt – höher als bei der Emoji-Generierung, um mehr kreativen Spielraum zu lassen. Die entscheidende Design-Entscheidung: Jede Anfrage fügt einen zufälligen Seed (randomSeed) hinzu, wodurch sichergestellt wird, dass dasselbe Konzept jedes Mal unterschiedliche Ergebnisse liefert – das verleiht der Erkundung echten "Wiederspielwert".

③ Konzept-Rekombination (recombineConcepts): Der kreativste Teil. Der Prompt formuliert es als "denke wie ein Spiel", mit fantasievollen Beispielen: Wasser + Feuer = Dampf ♨️, Mehl + Feuer = Brot 🍞, Mensch + Flügel = Engel 👼, Traurigkeit + Freude = Leben 🎭. Die Ergebnisse sollen "überraschend, aufschlussreich, leicht humorvoll und nicht offensichtlich" sein. Dieselbe Random-Seed-Technik sorgt für Abwechslung.

#4 Lösung : Hover-Erklärungen machen die Logik sichtbar

Jede AI-Zerlegung oder -Rekombination liefert auch eine kurze Erklärung. Dieser Text erscheint nicht direkt auf dem Knoten (um das Interface minimalistisch zu halten), sondern wird in den Daten des Knotens gespeichert. Wenn ein Benutzer mit der Maus über einen Knoten fährt, erscheint eine elegante HoverCard, die die vollständige Argumentationskette zeigt:

• Zerlegte Knoten(smaragdgrüne Labels): 🎭 Drama = 😢 Konflikt + 👥 Charaktere, mit "Drama ist grundlegend ein Konflikt zwischen Charakteren" darunter

• Kombinierte Knoten(violette Labels): 😴 Schlaf + 💭 Vorstellungskraft = 💫 Traum, mit "Vorstellungskraft während des Schlafens ist ein Traum" darunter

Dieses Design macht die Informationsschichtung wunderschön elegant – an der Oberfläche minimale Emoji-Karten; bei genauerer Betrachtung der Denkprozess der AI.

Das Ergebnis

Nach all diesem Tuning hat sich die Qualität der KI-Ausgabe dramatisch verändert:

❤️ Liebe → 👤 Person + 🤝 Vertrauen (Menschen, die sich gegenseitig vertrauen) ☕ Kaffee → 🫘 Bohnen + ☕ Heißes Wasser (heißes Wasser trifft auf Kaffeebohnen) 💭 Traum → 🔮 Vorstellungskraft + 🔥 Verlangen (eine brennende Vision der Zukunft) 🔥 Feuer + 💧 Wasser = ♨️ Dampf 😴 Schlaf + 💭 Vorstellungskraft = 💫 Traum

Jede Dekomposition sorgt für einen „Aha!“-Moment; jede Rekombination zaubert ein Lächeln ins Gesicht. Das ist die Kraft des Prompt Engineerings — es geht nicht darum, mehr Code zu schreiben, sondern den richtigen Weg zu finden, mit der KI zu sprechen.

Phase 3: Interaktions-Feinschliff

Hier begann sich die Applebendiganzufühlen:

• 1 Knoten auswählen → „Zerlegen“-Button erscheint— weiter unterteilen

• Umschalt-Taste + 2 Knoten anklicken → „Rekombinieren“-Button erscheint— zusammenfügen

• Doppelklick auf einen beliebigen Knoten → Sofortige Zerlegung— schnelle Erkundung

• Mit der Maus über einen verarbeiteten Knoten fahren → Die Begründung der KI sehenin einer HoverCard

Ich habe außerdem eine leichtgewichtige Gamification-Ebene hinzugefügt: Man startet mit20 Punkten(Zerlegen kostet 1, Rekombinieren kostet 2), was eine sanfte Einschränkung schafft, die einen dazu anregt, über die zu erkundenden Pfade nachzudenken. Die Punkte bleiben lokal gespeichert, und man kann jederzeit zurücksetzen.

Phase 4: UI-Design-Feinschliff

Nachdem die Funktionalität funktionierte, lag der nächste Fokus darauf, dass Essencegenauso gutaussah, wie es sich anfühlte.

Die erste große Designentscheidung war die Typografie. Ich wählteBricolage Grotesqueals globale Schriftart — eine geometrische, moderne Sans-Serif, die die App sofort vom Standard-Systemschrift-Niveau abhob und ihr eine unverwechselbare Markenidentität verlieh.

Die Optik der Knoten-Karten durchlief mehrere Iterationen. Das endgültige Design landete bei großen Karten mit abgerundeten Ecken (rounded-2xl) und sanften Pastellhintergründen — amber-50, emerald-50 und violet-50, zufällig zugewiesen — mit einem großen Emoji als visuellem Anker und einem kurzen Wort-Label am unteren Rand. Die Arbeitsfläche sah am Ende wie eine Ansammlung bunter Haftnotizen aus: leicht, spielerisch und übersichtlich.

Das Eingabefeld ist der „erste Eindruck“ der App, daher hatte ich höchste Ansprüche daran. Hier glänzte das FeatureEnter Componentswirklich — eine integrierte KI-Komponentenbibliothek, in der man mit einem Klick suchen, eine Vorschau anzeigen und Komponenten hinzufügen kann. Ich tippte „ai“ in die Suchleiste und entdeckte eine Komponente namensclaude-style-chat-input— ein elegant gestaltetes Konversationseingabefeld. Ich klickte auf „+ Add to Chat“, und Enter integrierte es automatisch in mein Projekt und passte das Styling an die bestehende Designsprache an. Das einfache HTML-Eingabefeld verwandelte sich sofort in eine ausgefeilte Konversations-Eingabe — abgerundete Ränder, sanfte Schatten, Inline-Button-Layout — perfekt abgestimmt auf die visuelle Identität der App.

Man muss keine Komponenten von Grund auf neu schreiben oder mit CSS herumspielen. Enter Components ermöglicht es, hochwertige Benutzeroberflächen wie mit Bausteinen zusammenzusetzen, und Enter passt das Styling automatisch an, um die visuelle Konsistenz zu wahren.

Schließlich fügte ich eine Reihe vonQuick-Start-Konzeptkartenhinzu — ❤️ Liebe, 💰 Geld, ⏰ Zeit, 🌳 Baum, 🎵 Musik, 💭 Traum —, die als schräg gestellte, bunte Minikarten auf dem Willkommensbildschirm angezeigt werden und die Einstiegshürde senken, damit Nutzer sofort verstehen, was sie eingeben können.

Phase 5: Internationalisierung

Essence ist für ein globales Publikum gebaut, daher war die zweisprachige Unterstützung für Chinesisch und Englisch kein nettes Extra, sondern essentiell.

Aber Internationalisierung bedeutet nicht nur, UI-Texte zu übersetzen. In Essence muss die KI-Ausgabe auch zur gewählten Sprache des Nutzers passen — im Chinesisch-Modus sollte die Zerlegung von „爱“ chinesische Ergebnisse wie „人 + 信任“ liefern; wechselt man in den Englisch-Modus, sollte die Zerlegung von „Love“ „Person + Trust“ ergeben. Das bedeutet, dass der Sprachumschalter im Frontend bis auf die Ebene der KI-Prompts durchgereicht werden muss.

Zur Implementierung nutzte ich Zustand für eine leichtgewichtige Sprachzustandsverwaltung. Das gesamte i18n-System funktioniert so: Der Nutzer klickt auf den Sprachumschalter in der oberen rechten Ecke → der globale Status wird aktualisiert → der gesamte UI-Text wechselt sofort → KI-Aufrufe erhalten den aktuellen Sprachparameter → Prompt-Vorlagen wählen die chinesische oder englische Version → die KI-Ausgabe entspricht automatisch der Sprache des Nutzers. Die Spracheinstellung wird zudem in localStorage gespeichert, sodass sie beim nächsten Besuch nahtlos wiederhergestellt wird.

In Enter erforderte all dies nur eine einzige Beschreibung: „Füge einen Chinesisch/Englisch-Umschalter mit einem Sprach-Button in der oberen rechten Ecke hinzu. Der gesamte UI-Text, die KI-Prompts und die KI-Ausgabe sollten automatisch basierend auf der ausgewählten Sprache wechseln.“ Enter erstellte die gesamte Pipeline — von der Zustandsverwaltung über die Verzweigung der Prompt-Vorlagen bis hin zur lokalen Speicherung — in einem Durchgang.

Dies bestätigte auch eine wichtige Lektion: je früher man i18n einbaut, desto besser. Wenn du wartest, bis alle Funktionen fertig sind, bevor du die Internationalisierung hinzufügst, wirst du feststellen, dass fest kodierter Text in deinen Prompts verstreut ist und UI-Strings in jeder Komponente stecken — und das nachträgliche Anpassen ist mühsam. Baue die mehrsprachige Architektur vom ersten Tag an auf, danach fügst du nur noch Übersetzungsinhalte hinzu.

---

Was Essence besonders macht

Zerlegen: Die unsichtbare Struktur von allem sehen

Gib ein beliebiges Wort ein. AI zerlegt es in genau 2 atomare Konzepte — jedes mit einem semantischen Emoji und einer Ein-Satz-Erklärung. Dann mach weiter. Zerlege auch diese. Beobachte, wie ein Konzeptbaum vor deinen Augen wächst.

🎭 Drama → 😢 Konflikt + 👥 Charaktere 😢 Konflikt → ⚡ Spannung + 🎯 Ziele 👥 Charaktere → 👤 Person + 💬 Geschichte

Rekombinieren: Neue Ideen aus den Atomen alter erschaffen

Wähle beliebige 2 Knoten auf der Arbeitsfläche aus — sogar aus völlig unterschiedlichen Zweigen — und kombiniere sie. AI findet die überraschende Verbindung.

🔥 Feuer + 💧 Wasser = ♨️ Dampf 😴 Schlaf + 💭 Fantasie = 💫 Traum 👤 Person + ✈️ Flügel = 👼 Engel

Spielen, nicht nur denken

Das 20-Punkte-System macht aus abstrakter Erkundung ein spielerisches Erlebnis. Jeder Klick ist eine Wahl. Welchen Zweig erkundest du? Welche Atome kombinierst du? Es ist ein Sandkasten für Neugier.

Der Tech Stack — zusammengestellt von Enter

Ich habe nichts davon manuell konfiguriert. Enter.pro hat den gesamten Stack basierend auf meinen Beschreibungen und iterativen Prompts zusammengestellt.

Gelernte Lektionen

1. Zwei-Schichten-Prompting, zwei Denkweisen

Das Bauen von AI-Apps mit Enter besteht aus zwei gleichzeitigen Gesprächen: Mit Enter zu sprechen ist wie die Zusammenarbeit mit einem Full-Stack-Entwickler — klare Anforderungen sind nötig; mit dem In-App Claude zu sprechen ist wie die Zusammenarbeit mit einem kreativen Partner — emotionale Anleitung und beispielbasiertes Lernen sind nötig. Beide Schichten richtig hinzubekommen ist das eigentliche Handwerk.

2. Gib der AI eine Persönlichkeit, nicht nur Regeln

Die Änderung der Systemrolle von „Du bist ein Konzept-Zerlegungs-Assistent“ zu „Du bist ein unterhaltsames Zerlegungsspiel“ veränderte den gesamten Output-Stil in einem Satz. Regeln schränken das Format ein; Persönlichkeit definiert die Qualität.

3. Positive Beispiele + Anti-Patterns schlagen lange Beschreibungen

✅ Schere → Klinge + Gelenk ❌ Greifanhängsel, Symmetrische Evolution, Neurotransmitter

Diese drei Zeilen vermitteln mehr, als 100 Wörter es jemals könnten. Der Kontrast zwischen positiv und negativ ist die am meisten unterschätzte Technik im Prompt Engineering.

4. Zufalls-Seeds verleihen Erkundungsprodukten Wiederspielbarkeit

Dasselbe Konzept liefert jedes Mal andere Ergebnisse — heute „Liebe = Person + Vertrauen“, morgen „Liebe = Verletzlichkeit + Mut“. Zufalls-Seeds + Temperatur 0.8 maximieren die Vielfalt bei gleichbleibender Qualität. Das Lebenselixier eines Erkundungsprodukts ist „jedes Mal etwas Neues“.

5. Einschränkungen erzeugen Spiel

Das 20-Punkte-System machte zielloses Klicken zu strategischer Erkundung. Klassisches Spieldesign-Prinzip: sinnvolle Entscheidungen erfordern begrenzte Ressourcen.

6. Vibe Coding richtig gemacht: Konzentriere dich auf eine Phase nach der anderen

Erst das Fundament → dann die AI-Persönlichkeit → dann der Interaktionsschliff → dann das visuelle Design → dann i18n. Jede Phase konzentriert sich auf eine Dimension, was das Gespräch mit Enter präzise und den Output vorhersehbar hält.

🔗 Baue dein eigenes mit Enter: enter.converge.ai