Bagaimana Saya Membangun Concept Explorer Berbasis AI dalam 4 Jam dengan Enter

Seorang desainer tanpa pengalaman backend menggunakan Enter Pro untuk membangun Essence — sebuah aplikasi kanvas asli AI yang memecah konsep apa pun menjadi blok bangunan fundamentalnya. Dari ide hingga produk yang berfungsi penuh dengan integrasi AI, dukungan dwibahasa, dan pengalaman yang digamifikasi — semuanya hanya dalam 4 jam.

Percikan Ide

Sebagai seorang desainer, saya selalu terpesona oleh satu pertanyaan: dari mana kreativitas berasal?

Semakin saya mempelajari metode desain, semakin saya melihat pola yang sama: kreativitas sering kali dimulai dengan dekonstruksi dan** rekombinasi**. Pecahkan sesuatu menjadi bagian-bagian pentingnya, lalu bangun kembali dengan cara baru.

Ide itulah yang melahirkan Essence — sebuah kanvas eksplorasi konsep bertenaga AI. Masukkan konsep apa pun, dan AI akan memecahnya menjadi elemen-elemen intinya. Kemudian, dengan menggabungkan kembali elemen-elemen tersebut, ide-ide baru mulai bermunculan.

Mengapa Enter

Saya adalah seorang desainer produk, bukan pengembang full-stack. Ide untuk Essence membutuhkan beberapa hal yang terasa menakutkan:

• Kanvas interaktif dengan drag-and-drop, zoom, dan pan — jenis UI kompleks yang biasa Anda lihat di alat seperti Figma atau Miro

• Integrasi AI untuk menggerakkan logika dekomposisi dan rekombinasi konsep

• Backend serverless untuk menangani panggilan API AI secara aman

• Penyebaran (Deployment) agar orang-orang benar-benar dapat menggunakannya

Menghubungkan ke API LLM biasanya menghentikan sebagian besar non-developer — kunci API, pengaturan env, logika autentikasi.

Dengan AI All dari Enter, saya hanya berkata: "Gunakan Claude Sonnet 4.5," dan sistem langsung menghubungkan semuanya — Edge Functions backend, pemformatan permintaan, penanganan kesalahan.

Dengan Enter.pro, saya tidak menyentuh infrastruktur sama sekali. Saya mendeskripsikan apa yang saya inginkan, dan sistem menangani React, Supabase, Edge Functions, dan integrasi model. Saya hanya fokus pada apa dan mengapa.

Proses Pembuatan: 5 Fase dalam 4 Jam

Fase 1: Fondasi

Saya menyusun ide di kepala saya menjadi satu perintah komprehensif dan mengirimkannya ke Enter. Berikut adalah intinya:

Buat aplikasi eksplorasi kanvas asli AI bernama "Essence." Ini adalah permainan berpikir yang ringan. Mekanik inti: pengguna memasukkan kata apa saja, dan AI memecahnya menjadi tepat 2 konsep yang lebih atomik, ditampilkan sebagai emoji + node kata pendek di kanvas. Aturan dekomposisi: selalu kembalikan tepat 2 node, masing-masing dengan 1 emoji + 1 kata pendek, konsep harus menjadi lebih esensial di setiap level — memecah ke arah dimensi seperti emosi, motif, energi, struktur, hubungan, kekuatan, nilai, keinginan, konflik. Pengguna juga dapat memilih 2 node mana saja untuk digabungkan kembali menjadi 1 konsep baru. Kanvas mendukung seret tanpa batas, zoom, klik ganda untuk mendekonposisi, multi-pilih untuk menggabungkan kembali. Setiap dekomposisi membutuhkan biaya 1 poin, setiap rekombinasi membutuhkan biaya 2 poin.

Setelah membaca perintah ini, hal pertama yang dilakukan Enter adalah memuat kemampuan AI-nya, lalu bertanya langsung kepada saya: "Model AI mana yang ingin Anda gunakan untuk dekomposisi dan rekomposisi konsep?" Ini mencantumkan opsi yang tersedia — GPT-5.2 Pro, Gemini 3 Pro, dan Claude Sonnet 4.5 — masing-masing dianotasi dengan biaya, kecepatan, dan kekuatan. Saya memilih Claude Sonnet 4.5 (sangat baik untuk mengikuti instruksi dan tugas kreatif), dan Enter menghubungkan seluruh koneksi API secara otomatis.

Beberapa menit kemudian, struktur proyek lengkap siap — React 18 dengan TypeScript, Vite sebagai alat build, Tailwind CSS untuk gaya, @xyflow/react untuk kanvas, dan Supabase Edge Function yang terhubung ke API Claude. Logika dekomposisi dan rekombinasi inti langsung berfungsi pada percobaan pertama.

Fase 2: Penyetelan Logika AI

Ini adalah bagian paling kritis dan menarik dari seluruh proyek. Apakah Essence terasa menyenangkan atau membosankan sepenuhnya bergantung pada kualitas output AI. Kode akhir membagi logika AI menjadi tiga fungsi independen, masing-masing dengan strategi perintah yang dirancang dengan cermat.

Masalahnya: AI Terlalu "Akademis"

Setelah versi pertama berjalan, hasil AI secara tidak sengaja terasa lucu — masukkan "gunting" dan ia mengembalikan "embel-embel penjepit" dan "evolusi simetris"; masukkan "cinta" dan ia memberikan "neurotransmiter" dan "keadaan kuantum." Secara teknis tidak salah, tetapi sama sekali tidak menyenangkan, dan tidak intuitif. Ini bukan pengalaman yang saya inginkan.

Solusi #1 : Berikan Persona pada AI

Terobosan utamanya adalah menetapkan peran sistem yang jelas untuk AI — bukan "Anda adalah asisten dekomposisi," melainkan "Anda adalah permainan dekomposisi yang menyenangkan. Ubah hal-hal rumit menjadi blok bangunan sederhana! Gunakan kata-kata sehari-hari." Satu kalimat itu sepenuhnya mengubah gaya output dari makalah akademis menjadi percakapan yang menyenangkan.

Solusi #2 : Contoh Positif + Anti-Pola

Saya menemukan bahwa contoh positif saja tidak cukup — AI terkadang masih tergelincir ke dalam mode akademis. Jadi saya menyertakan contoh baik dan buruk secara bersamaan:

**Contoh baik:**Gunting → 🔪 Pisau + 🔗 Engsel (dua pisau yang dihubungkan oleh engsel)Kopi → ☕ Air panas + 🫘 Biji kopi (air panas + biji kopi)Teman → 👤 Orang + 🤝 Kepercayaan (orang-orang yang saling mempercayai)Mimpi → 😴 Tidur + 💭 Imajinasi (imajinasi saat tidur)Contoh buruk (terlalu akademis):❌ Embel-embel penjepit, Evolusi simetris, Neurotransmiter, Keadaan kuantum

Kontras "positif-negatif" ini memberi AI pemahaman yang sangat tepat tentang nada yang saya inginkan: sederhana, intuitif, jenis yang membuat orang tersenyum atau mengalami momen "aha!".

Solusi #3 : Tiga Fungsi, Tiga Strategi

Logika AI akhir dibagi menjadi tiga fungsi independen, masing-masing dengan desain perintah dan penyetelan parameternya sendiri:

① Pembuatan Emoji (generateEmojiForConcept): Ketika pengguna memasukkan konsep, panggilan AI terpisah pertama-tama menghasilkan emoji yang cocok secara semantik. Peran sistem diatur ke "Anda adalah pembuat emoji. Anda hanya menghasilkan JSON," dengan suhu pada 0.7 (akurasi di atas kreativitas), dipandu oleh beberapa contoh: batu → 🪨, api → 🔥, cinta → ❤️. Jika penguraian gagal, ia akan kembali ke default ✨ dengan anggun.

② Dekomposisi Konsep (decomposeConcept): Fungsi inti. Perintah memandu AI untuk "memecah hal-hal seperti blok bangunan," mengembalikan tepat 2 node (emoji + kata pendek) ditambah penjelasan satu kalimat. Suhu diatur ke 0.8 — lebih tinggi dari pembuatan emoji untuk memungkinkan ruang kreatif yang lebih besar. Keputusan desain yang krusial: setiap permintaan menyuntikkan seed acak (randomSeed), memastikan konsep yang sama menghasilkan hasil yang berbeda setiap kali — ini memberikan eksplorasi "kemampuan bermain ulang" yang nyata.

③ Rekombinasi Konsep (recombineConcepts): Bagian paling kreatif. Perintah membingkainya sebagai "berpikir seperti permainan," dengan contoh-contoh imajinatif: Air + Api = Uap ♨️, Tepung + Api = Roti 🍞, Manusia + Sayap = Malaikat 👼, Kesedihan + Kegembiraan = Kehidupan 🎭. Hasilnya harus "mengejutkan, berwawasan luas, sedikit lucu, tidak jelas." Teknik seed acak yang sama digunakan untuk variasi.

Solusi #4 : Penjelasan Melayang Membuat Logika Terlihat

Setiap dekomposisi atau rekombinasi AI juga mengembalikan explanation singkat. Teks ini tidak muncul langsung di node (menjaga antarmuka tetap minimal), tetapi disimpan dalam data node. Ketika pengguna mengarahkan kursor ke atas node, HoverCard yang elegan muncul menunjukkan rantai penalaran lengkap:

• Node yang didekomposisi (label zamrud): 🎭 Drama = 😢 Konflik + 👥 Karakter, dengan "Drama pada dasarnya adalah konflik antar karakter" di bawahnya

• Node yang digabungkan (label ungu): 😴 Tidur + 💭 Imajinasi = 💫 Mimpi, dengan "Imajinasi saat tidur adalah mimpi" di bawahnya

Desain ini membuat pelapisan informasi menjadi sangat elegan — di permukaan, kartu emoji minimal; pada pemeriksaan lebih dalam, proses berpikir AI.

Hasilnya

Setelah semua penyetelan ini, kualitas output AI berubah secara dramatis:

❤️ Cinta → 👤 Orang + 🤝 Kepercayaan (orang-orang yang saling mempercayai) ☕ Kopi → 🫘 Biji kopi + ☕ Air panas (air panas bertemu biji kopi) 💭 Mimpi → 🔮 Imajinasi + 🔥 Keinginan (visi masa depan yang membara) 🔥 Api + 💧 Air = ♨️ Uap 😴 Tidur + 💭 Imajinasi = 💫 Mimpi

Setiap dekomposisi memicu momen "aha!"; setiap rekombinasi menarik senyuman. Itulah kekuatan rekayasa perintah — ini bukan tentang menulis lebih banyak kode, tetapi tentang menemukan cara yang tepat untuk berbicara dengan AI.

Fase 3: Pemolesan Interaksi

Di sinilah aplikasi mulai terasa hidup:

• Pilih 1 node → Tombol "Decompose" muncul — memecahnya lebih jauh

• Shift + klik 2 node → Tombol "Recombine" muncul — menggabungkannya bersama

• Klik ganda node mana saja → Dekomposisi instan — eksplorasi cepat

• Arahkan kursor ke node yang diproses → Lihat penalaran AI di HoverCard

Saya juga menambahkan lapisan gamifikasi ringan: Anda memulai dengan 20 poin (dekomposisi berbiaya 1, rekombinasi berbiaya 2), menciptakan batasan lembut yang membuat Anda berpikir tentang jalur mana yang akan dieksplorasi. Poin bertahan secara lokal, dan Anda selalu dapat menyetel ulang.

Fase 4: Pemolesan Desain UI

Dengan fungsionalitas yang sudah berjalan, fokus berikutnya adalah membuat Essence terlihat sebagus rasanya.

Keputusan desain besar pertama adalah tipografi. Saya memilih Bricolage Grotesque sebagai font global — sans-serif geometris modern yang langsung mengangkat aplikasi keluar dari wilayah font sistem default dan memberinya identitas merek yang khas.

Visual kartu node melalui beberapa iterasi. Desain akhir mendarat pada kartu persegi panjang bulat besar (rounded-2xl) dengan latar belakang pastel lembut — amber-50, emerald-50, dan violet-50 yang ditetapkan secara acak — dengan emoji besar sebagai jangkar visual dan label kata pendek di bagian bawah. Kanvas akhirnya terlihat seperti taburan catatan tempel berwarna-warni: ringan, menyenangkan, dan tidak berantakan.

Kotak input adalah "kesan pertama" aplikasi, jadi saya memiliki standar tertinggi untuk itu. Di sinilah fitur Enter Components benar-benar bersinar — pustaka komponen AI bawaan tempat Anda dapat mencari, melihat pratinjau, dan menambahkan komponen dengan satu klik. Saya mengetik "ai" di bilah pencarian dan menemukan komponen bernama claude-style-chat-input — input percakapan yang ditata dengan elegan. Saya mengklik "+ Add to Chat," dan Enter secara otomatis mengintegrasikannya ke dalam proyek saya, menyesuaikan gaya agar cocok dengan bahasa desain yang ada. Input HTML biasa langsung berubah menjadi pengalaman input percakapan yang dipoles — batas bulat, bayangan lembut, tata letak tombol inline — sangat kohesif dengan identitas visual aplikasi.

Tidak perlu menulis komponen dari awal atau mengutak-atik CSS. Enter Components memungkinkan Anda merakit UI berkualitas tinggi seperti blok bangunan, dan Enter secara otomatis menyesuaikan gaya untuk menjaga konsistensi visual.

Akhirnya, saya menambahkan satu set kartu konsep mulai cepat — ❤️ Cinta, 💰 Uang, ⏰ Waktu, 🌳 Pohon, 🎵 Musik, 💭 Mimpi — ditampilkan sebagai kartu mini miring berwarna-warni di layar selamat datang, menurunkan hambatan awal sehingga pengguna segera memahami apa yang dapat mereka ketik.

Fase 5: Internasionalisasi

Essence dibangun untuk audiens global, jadi dukungan dwibahasa Mandarin-Inggris bukan sekadar fitur tambahan — itu sangat penting.

Namun internasionalisasi bukan hanya tentang menerjemahkan teks UI. Di Essence, output AI juga harus cocok dengan bahasa yang dipilih pengguna — dalam mode bahasa Mandarin, mendekonposisi "爱" harus mengembalikan hasil bahasa Mandarin seperti "人 + 信任"; beralih ke mode bahasa Inggris dan mendekonposisi "Love" harus mengembalikan "Person + Trust." Ini berarti sakelar bahasa frontend harus merambat ke seluruh lapisan perintah AI.

Untuk implementasi, saya menggunakan Zustand untuk manajemen status bahasa yang ringan. Seluruh sistem i18n bekerja seperti ini: pengguna mengklik sakelar bahasa di sudut kanan atas → status global diperbarui → semua teks UI beralih secara instan → panggilan AI menerima parameter bahasa saat ini → templat perintah memilih versi bahasa Mandarin atau Inggris → output AI secara otomatis cocok dengan bahasa pengguna. Preferensi bahasa juga disimpan ke localStorage, memulihkan dengan mulus pada kunjungan berikutnya.

Di Enter, untuk mencapai semua ini hanya diperlukan satu deskripsi: "Tambahkan sakelar bahasa Mandarin/Inggris dengan tombol bahasa di sudut kanan atas. Semua teks UI, perintah AI, dan output AI harus beralih secara otomatis berdasarkan bahasa yang dipilih." Enter membuat seluruh alur kerja — dari manajemen status hingga percabangan templat perintah hingga penyimpanan lokal — dalam sekali jalan.

Ini juga memvalidasi pelajaran penting: semakin awal Anda membangun i18n, semakin baik. Jika Anda menunggu hingga semua fitur selesai sebelum menambahkan internasionalisasi, Anda akan menemukan teks hardcoded tersebar di seluruh perintah Anda dan string UI tertanam di setiap komponen — dan memasangnya kembali sangat menyakitkan. Bangun arsitektur multibahasa sejak hari pertama, dan setelah itu Anda hanya perlu menambahkan konten terjemahan.

---

Apa yang Membuat Essence Istimewa

Dekomposisi: Lihat struktur tak terlihat dari segalanya

Ketik kata apa saja. AI memecahnya menjadi tepat 2 konsep atomik — masing-masing dengan emoji semantik dan penjelasan satu kalimat. Lalu teruskan. Pecahkan juga konsep-konsep itu. Saksikan pohon konsep tumbuh di depan mata Anda.

🎭 Drama → 😢 Konflik + 👥 Karakter 😢 Konflik → ⚡ Ketegangan + 🎯 Tujuan 👥 Karakter → 👤 Orang + 💬 Cerita

Rekombinasi: Ciptakan ide-ide baru dari atom-atom lama

Pilih 2 node mana saja di kanvas — bahkan dari cabang yang sama sekali berbeda — dan gabungkan. AI akan menemukan hubungan yang mengejutkan.

🔥 Api + 💧 Air = ♨️ Uap 😴 Tidur + 💭 Imajinasi = 💫 Mimpi 👤 Orang + ✈️ Sayap = 👼 Malaikat

Bermain, jangan hanya berpikir

Sistem 20 poin mengubah eksplorasi abstrak menjadi permainan yang menyenangkan. Setiap klik adalah pilihan. Cabang mana yang Anda jelajahi? Atom mana yang Anda gabungkan? Ini adalah kotak pasir untuk rasa ingin tahu.

Tech Stack — Dirakit oleh Enter

Saya tidak mengonfigurasi semua ini secara manual. Enter.pro merakit seluruh tumpukan teknologi berdasarkan deskripsi saya dan perintah berulang.

Pelajaran yang Dipetik

1. Pembuatan Perintah Dua Lapis, Dua Pola Pikir

Membangun aplikasi AI dengan Enter adalah dua percakapan yang terjadi secara bersamaan: berbicara dengan Enter seperti berkolaborasi dengan insinyur full-stack — membutuhkan persyaratan yang jelas; berbicara dengan Claude di dalam aplikasi seperti berkolaborasi dengan mitra kreatif — membutuhkan panduan emosional dan pengajaran berbasis contoh. Menyelaraskan kedua lapisan ini adalah seni yang sebenarnya.

2. Berikan Kepribadian pada AI, Bukan Hanya Aturan

Mengubah peran sistem dari "Anda adalah asisten dekomposisi konsep" menjadi "Anda adalah permainan dekomposisi yang menyenangkan" mengubah seluruh gaya output dalam satu kalimat. Aturan membatasi format; kepribadian menentukan kualitas.

3. Contoh Positif + Anti-Pola Mengalahkan Deskripsi Panjang

✅ Gunting → Pisau + Engsel ❌ Embel-embel penjepit, Evolusi simetris, Neurotransmiter

Tiga baris ini menyampaikan lebih banyak hal daripada yang bisa disampaikan oleh 100 kata. Kontras positif-negatif adalah teknik rekayasa perintah yang paling diremehkan.

4. Seed Acak Memberikan Kemampuan Bermain Ulang pada Produk Eksplorasi

Konsep yang sama menghasilkan hasil yang berbeda setiap kali — hari ini "Cinta = Orang + Kepercayaan," besok "Cinta = Kerentanan + Keberanian." Seed acak + suhu 0.8 memaksimalkan variasi sambil mempertahankan kualitas. Jiwa dari produk eksplorasi adalah "sesuatu yang baru setiap saat."

5. Batasan Menciptakan Permainan

Sistem 20 poin mengubah klik tanpa tujuan menjadi eksplorasi strategis. Prinsip desain game klasik: pilihan yang berarti membutuhkan sumber daya yang terbatas.

6. Vibe Coding Dilakukan dengan Benar: Fokus Satu Fase pada Satu Waktu

Fondasi terlebih dahulu → lalu kepribadian AI → lalu pemolesan interaksi → lalu desain visual → lalu i18n. Setiap fase berfokus pada satu dimensi, menjaga percakapan dengan Enter tetap tajam dan output dapat diprediksi.

🔗 Bangun milik Anda sendiri dengan Enter: enter.converge.ai