Kisah Lahirnya Forge: Kompiler AI Deterministik untuk Membuat Website

Semua pembuat website AI bekerja dengan cara yang sama: Anda mengetik prompt, LLM menulis HTML, dan Anda mendapat apa pun yang ia berikan. Kadang bagus. Kadang tidak. Anda menekan "buat" lagi dan mendapat sesuatu yang sama sekali berbeda: tata letak berbeda, warna berbeda, kualitas berbeda. Hasilnya, pada dasarnya, tidak bisa diprediksi.

Kami pernah merilis model itu. Hasilnya berfungsi. Orang membuat website sungguhan dengannya. Tetapi saat kami mengamati ribuan website dibuat, sebuah pola muncul: LLM menghabiskan sebagian besar token-nya untuk menciptakan ulang hal-hal yang tidak seharusnya ia putuskan. Sistem navigasi. Kontras warna. Titik henti seluler. Tautan anchor. Pemuatan font. Markup formulir kontak.

Setiap pembuatan adalah lemparan dadu baru untuk masalah yang punya jawaban yang benar.

Forge adalah jawaban kami atas pengamatan itu. Ini bukan peningkatan bertahap, melainkan arsitektur yang pada dasarnya berbeda tentang cara AI membangun website.

Masalah Membiarkan AI Menulis HTML Mentah

Saat Anda meminta LLM "buatkan website untuk barbershop," ia harus membuat ribuan keputusan sekaligus: Bagian apa yang disertakan. Dalam urutan apa. Seperti apa navigasinya. Warna apa yang dipakai. Cara menangani tata letak seluler. Cara memuat font. Cara menghubungkan tautan anchor. Cara menyusun HTML secara semantik. Cara menangani rasio kontras. Cara memformat jam buka. Cara menampilkan nomor telepon sebagai tautan yang bisa diklik.

Sebagian keputusan itu bersifat kreatif: bagian apa yang disertakan, palet warna apa yang cocok untuk barbershop, bagaimana nuansa keseluruhannya.

Sebagian besar bersifat rekayasa: navigasi harus menggulir ke anchor yang nyata, rasio kontras harus minimal 4,5:1, nomor telepon harus dalam format E.164, font harus dimuat dari Google Fonts dengan preconnect, tata letak seluler harus menumpuk vertikal di bawah 480px.

Saat Anda membiarkan LLM menangani keduanya, keputusan kreatifnya bagus tetapi keputusan rekayasanya tidak konsisten. Sebagian hasil punya kontras sempurna. Yang lain tidak. Sebagian punya tautan anchor yang berfungsi. Yang lain punya href mati yang menunjuk ke bagian yang tidak ada. Sebagian memuat font dengan benar. Yang lain menyisipkan font-face yang tidak pernah terpecahkan.

Wawasan di balik Forge: pisahkan keputusan kreatif dari keputusan rekayasa. Biarkan AI menangani kreativitas. Biarkan kompiler menangani ketepatan.

Arsitektur Dua Fase

Forge membagi pembuatan website menjadi dua fase yang berbeda:

Fase 1: AI Memutuskan Apa yang Dibangun (SiteSpec)

Alih-alih menulis HTML mentah, AI menghasilkan spesifikasi terstruktur, yaitu dokumen JSON yang kami sebut SiteSpec. SiteSpec menjelaskan bagian apa yang harus ada di website, konten apa yang masuk ke setiap bagian, seperti apa palet warna dan tipografinya, seperti apa navigasinya, dan bagaimana perlakuan desain keseluruhannya.

AI membuat semua keputusan kreatif: apakah ini estetika gelap yang mewah atau nuansa editorial yang cerah? Apakah hero memakai font judul yang ramping seperti Bebas Neue atau serif elegan seperti Cormorant Garamond? Apakah bagian-bagiannya mencakup galeri, pita statistik, FAQ, atau grid tim?

Tetapi AI TIDAK memutuskan bagaimana merender semua itu. Ia tidak menulis satu baris pun HTML atau CSS. Ia menjelaskan maksudnya.

Fase 2: Kompiler Merendernya dengan Sempurna (Setiap Kali)

SiteSpec masuk ke kompiler deterministik, yaitu fungsi murni yang menerima spesifikasi dan sebuah playbook lalu menghasilkan HTML mandiri berstandar produksi. Masukan yang sama selalu menghasilkan keluaran yang sama.

Kompiler memegang setiap keputusan rekayasa:

• Anchor navigasi: setiap tautan navigasi menunjuk ke bagian yang nyata. Anchor mati mustahil terjadi; kompiler mencocokkan setiap #href dengan ID bagian yang sebenarnya.
• Keamanan kontras: kontras teks terhadap latar diperiksa dan ditegakkan sesuai WCAG AA (4,5:1). AI memilih paletnya; kompiler memastikan keterbacaannya.
• Pergantian permukaan: tidak ada dua bagian bersebelahan yang memakai nuansa latar yang sama. Kompiler otomatis menggilir permukaan dasar dan sekunder untuk menciptakan ritme visual.
• Normalisasi kontak: nomor telepon diformat ke E.164 untuk tautan tel:, kanal WhatsApp terdeteksi otomatis, jam buka dan alamat dirapikan. Setiap fakta kontak berfungsi sebagai tautan sungguhan yang bisa diklik.
• Pemuatan font: Google Fonts dimuat dengan preconnect dan display-swap. Tanpa font-face rusak, tanpa pergeseran tata letak.
• Tata letak responsif: setiap blok dirender dengan benar di titik henti seluler, tablet, dan desktop. AI tidak memilih titik henti; kompiler yang menegakkannya.
• Penyusunan footer dan navigasi: kalau AI menghilangkan footer atau navigasi (yang menghemat token), kompiler menurunkannya dari bagian-bagian yang ada. Tidak ada yang pernah hilang dari hasil akhir.

Mengapa Ini Penting: Kecepatan dan Determinisme

Kecepatan

Karena AI menghasilkan data terstruktur, bukan HTML mentah, keluarannya jauh lebih kecil. Pembuatan HTML satu halaman penuh memerlukan 15.000–25.000 token keluaran LLM. SiteSpec untuk website yang sama memerlukan 4.000–6.000 token, pengurangan 3–4×. Itu langsung berarti pembuatan yang lebih cepat (kurang dari 90 detik untuk website lengkap) dan biaya yang lebih rendah.

Determinisme

Kompiler adalah fungsi murni. Dengan SiteSpec yang sama, ia selalu menghasilkan HTML yang sama. Artinya:

• Mengedit itu aman. Saat Anda mengubah judul bagian di editor visual, hanya bagian itu yang berubah. Kompiler merender ulang spesifikasi dan sisa website tetap identik. Tanpa efek samping berantai.
• Kualitas terjamin. Kontras, anchor, format kontak, pemuatan font, semuanya benar di setiap pembuatan, bukan hanya sebagian waktu.
• Pengujian dimungkinkan. Mesin deterministik bisa dievaluasi secara sistematis. Kami menjalankan pemeriksaan otomatis untuk kontras warna, integritas anchor, ragam blok, dan variasi desain di berbagai pembuatan.

Kreativitas yang Dibatasi

Inilah wawasan yang berlawanan dengan intuisi: batasan membuat AI lebih kreatif, bukan kurang. Saat LLM dibebaskan dari menulis HTML dan CSS yang rutin, ia mencurahkan seluruh anggaran token pada keputusan yang benar-benar penting: pemilihan bagian, strategi konten, perlakuan desain, teori warna. Hasil kreatifnya lebih baik justru karena hasil rekayasanya sudah ditangani.

Sistem Playbook

Kompiler tidak mengunci cara merender blok mana pun. Sebaliknya, ia menerima sebuah Playbook, yaitu modul yang mendefinisikan pustaka blok (cara setiap jenis bagian dirender menjadi HTML/CSS), sistem penentuan desain (cara palet dan tipografi ditentukan), dan stylesheet dasar.

Ganti playbook-nya dan SiteSpec yang sama akan dirender dalam bahasa visual yang sepenuhnya berbeda. Mesinnya tetap sama. Blok-bloknya berubah. Inilah yang membuat Forge bisa diperluas: jenis bagian baru, perlakuan desain baru, strategi render baru, semuanya tanpa menyentuh inti kompiler.

Saat ini, playbook pembuat website mencakup lebih dari 26 jenis blok yang berbeda, mulai dari bagian hero dan daftar layanan hingga pita statistik, galeri, FAQ, grid tim, marquee, ajakan pemesanan, dan lainnya. AI memilih dari pustaka ini berdasarkan jenis usaha dan konten, dan kompiler merendernya dengan presisi sempurna.

Bagaimana Forge Lahir

Forge tidak dimulai sebagai rencana besar. Ia dimulai dengan sebuah prototipe, satu file compile.mjs yang menerima spesifikasi JSON tulisan tangan dan merendernya menjadi HTML. Pertanyaannya sederhana: kalau kami mendefinisikan sendiri blok-bloknya dan AI hanya mengisi kontennya, apakah hasilnya lebih baik daripada HTML mentah dari LLM?

Ternyata ya. Jauh lebih baik. Prototipe itu merender website barbershop dengan kontras sempurna, navigasi yang berfungsi, pemuatan font yang benar, dan estetika gelap/emas yang kohesif, semuanya dari spesifikasi JSON yang ukurannya sebagian kecil dari HTML yang setara.

Dari situ, arsitekturnya terbentuk:

1. Prototipe itu menjadi mesin bertipe tanpa framework, yang bisa diimpor oleh runtime JavaScript mana pun tanpa ketergantungan pada React, Next.js, atau internal SiteDrop.
2. Perender blok yang terkunci menjadi sistem Playbook yang bisa dipasang sesuai kebutuhan: setiap playbook mendefinisikan blok, token desain, dan CSS-nya sendiri.
3. Integrasi LLM beralih dari keluaran HTML mentah ke tool-use terstruktur (skema SiteSpec ADALAH skema alatnya: ia mengajari model apa yang harus dihasilkan sambil membatasi bentuk keluarannya).
4. Skema yang mendokumentasikan dirinya sendiri menggantikan system prompt tradisional: deskripsi skema mengajari AI arti setiap kolom, sehingga "tata bahasanya" hanya beberapa baris.
5. Gerbang kualitas, yaitu pemeriksaan kontras, pencocokan anchor, pergantian permukaan, normalisasi kontak, dibangun ke dalam kompiler agar berjalan di setiap pembuatan, bukan sebagai pascapemrosesan opsional.

Hasilnya adalah mesin yang tidak terikat penyedia (berfungsi dengan Claude, GPT, Gemini, DeepSeek, xAI, model apa pun yang mendukung keluaran terstruktur), bebas framework (bisa diekstrak sebagai paket mandiri), dan deterministik (spesifikasi sama → HTML sama, selalu).

Apa Artinya bagi Anda

Kalau Anda pengguna SiteDrop, Forge sudah berjalan saat Anda membuat website. Anda tidak perlu melakukan hal yang berbeda, karena peningkatannya ada pada kualitas, kecepatan, dan konsistensi hasilnya:

• Pembuatan lebih cepat: website selesai dibuat dalam waktu kurang dari 90 detik karena keluaran AI 3–4× lebih kecil.
• Kualitas konsisten: setiap pembuatan punya kontras yang benar, navigasi yang berfungsi, pemuatan font yang tepat, dan detail kontak yang terformat.
• Ragam desain lebih baik: AI memilih dari 26+ jenis blok, 4+ arketipe desain, dan beragam palet pasangan tipografi. Barbershop mendapat estetika gelap yang ramping; praktik dokter gigi mendapat nuansa editorial yang bersih; restoran fine-dining mendapat perlakuan serif yang mewah.
• Pengeditan lebih aman: editor visual mengubah SiteSpec lalu merender ulang lewat kompiler, sehingga perubahan bisa diprediksi dan bebas efek samping.

Ke Mana Forge Melangkah

Arsitektur kompiler adalah fondasi bagi semua yang sedang kami bangun. Karena mesinnya digerakkan oleh spesifikasi, setiap kemampuan baru adalah jenis blok baru, playbook baru, atau token desain baru, bukan penulisan ulang alur pembuatan. Itulah kekuatan pemisahan ini: AI makin pandai memutuskan, kompiler makin pandai merender, dan keduanya berkembang secara terpisah.

Kami yakin pola dua fase ini, yaitu AI untuk maksud, kompiler untuk eksekusi, adalah cara aplikasi web akan dibangun ke depannya. Bukan hanya website satu halaman, tetapi aplikasi multi-halaman, dasbor, dan pengalaman interaktif. AI menjelaskan apa yang seharusnya ada. Kompiler menjamin semuanya berfungsi.