Pernahkah Anda mencoba AI website builder lain dan mendapati hasilnya "setengah matang"? Tombol tidak berfungsi, layout berantakan saat dibuka di HP, atau bahkan kodenya tidak bisa di-build karena syntax error di sisi React/Vue?

Di Weba, kami tahu bahwa menghasilkan kode website yang benar-benar siap produksi tidak semudah mengirim satu prompt ke Large Language Model (LLM) lalu berharap keajaiban terjadi. Itulah mengapa kami membangun Multi-Agent AI System yang meniru cara kerja tim software engineer sungguhan.

Dalam artikel ini, kita akan membongkar dapur arsitektur Weba—mulai dari Multi-Agent Planner, QA Auditor, hingga sistem Self-Healing Repair berbasis Sandbox—yang membuat hasil generasi Weba jauh lebih konsisten dan akurat dibanding AI builder lainnya.

1. Tahap Desain & Strategi: Kolaborasi Trio Agent Planner

Sebelum sebaris kode pun ditulis, Weba menjalankan pipa perencanaan asinkron yang dikelola oleh PlannerService. Menggunakan fungsi RunPipelineAsync dari layanan perencanaan tersebut, Weba membagi beban kognitif perencanaan ke dalam tiga agen terspesialisasi yang dikonfigurasi melalui PlannerStageDefinitions:

graph TD
    Brief[User Product Brief] --> Loki[Loki Agent: Product Strategy]
    Loki -->|Product Strategy & Persona| Thor[Thor Agent: Design Blueprint]
    Thor -->|Design Token & Component Specs| Hera[Hera Agent: Technical Architecture]
    Hera -->|System Architecture & Dev Brief| FinalResult[Generate Website Brief]

A. Loki — Sang Product Strategist

Loki bertugas menganalisis kebutuhan produk dari user. Loki tidak sekadar menyalin apa yang ditulis user; ia melakukan dekonstruksi masalah (Problem Decomposition):

• Symptom vs Root Cause: Mengidentifikasi masalah sebenarnya di balik permintaan user.

• Persona & JTBD (Jobs To Be Done): Memetakan perilaku konkret target pengguna dan mendesain solusi yang langsung menyelesaikan pain points mereka.

• Scope Discipline: Menentukan batasan fitur mana yang masuk MVP (Minimum Viable Product) dan mana yang ditunda, memastikan website tetap terfokus dan selesai tepat waktu.

B. Thor — Sang UX & Design System Architect

Setelah strategi produk matang, Thor mengambil alih untuk menerjemahkannya ke cetak biru desain (Design Blueprint):

• Information Architecture: Menyusun struktur halaman secara hierarkis (Value Proposition $\rightarrow$ Penanganan Keberatan $\rightarrow$ Social Proof $\rightarrow$ CTA).

• Layout Decision: Memilih secara logis apakah website harus berupa Single Page Application (SPA) atau Multi-Page, menghindari pemborosan navigasi.

• Visual Tokens & Components: Merumuskan palet warna kontras tinggi (lulus uji WCAG AA) dan daftar komponen UI lengkap dengan parameter teknisnya (seperti aspek rasio gambar untuk mencegah pergeseran layout atau Cumulative Layout Shift).

C. Hera — Sang Technical Architect

Hera bertindak sebagai pimpinan engineer yang menyusun cetak biru teknologi:

• Constraint-First Design: Memilih tumpukan teknologi terbaik (Next.js, React + Tailwind, atau Vue) berdasarkan waktu pengerjaan dan kapasitas server.

• Security & Scaling Check: Memasukkan pengamanan sejak dini (seperti rel="noopener" untuk tautan eksternal atau penyimpanan token aman) dan rencana mitigasi beban server.

• Unified Developer Brief: Menyaring seluruh keputusan Loki dan Thor ke dalam satu set instruksi terpadu dalam Bahasa Indonesia untuk dieksekusi oleh mesin generator kode.

2. Tahap Verifikasi: QA Auditor dengan Dual-Engine

Setelah kode selesai digenerasi, Weba tidak langsung merilisnya ke publik. Sistem menjalankan fungsi analyzeWebsite yang memadukan dua pendekatan audit:

A. Static & Programmatic Analysis (Findings Builder)

Pemeriksaan terprogram melalui fungsi buildFindings untuk mengecek ratusan metrik teknis secara instan:

• HTML & SEO Gaps: Memastikan keberadaan viewport mobile, meta description, lang tag, tag canonical, dan kelengkapan struktur heading.

• Asset & CSS Health: Mendeteksi inline style yang berlebihan, font-display swap yang hilang, hingga pergeseran elemen CSS (displaced grid).

• JS Safety: Menangkap sisa-sisa perintah debugging seperti console.log, potensi syntax error, serta dependensi eksternal tanpa enkripsi integrity.

B. AI Semantic Auditing (Semantic Auditor)

Melalui fungsi runSemanticAudit, Weba memanggil model AI ekonomis untuk memeriksa aspek yang sulit dinilai secara terprogram, seperti kesesuaian bahasa, kejelasan visual, keramahan aksesibilitas, serta kepatuhan pada WCAG 2.1.

3. Tahap Pemulihan: Sistem Self-Healing & Auto-Repair

Jika QA Auditor menemukan celah atau build website gagal, Weba mengaktifkan sistem pertahanan mandiri (Self-Healing) lewat RunAsync dari layanan perbaikan. Proses pemulihan ini terbagi menjadi dua jalur:

A. Perbaikan Deterministik Instan (Auto-Repair)

Untuk masalah-masalah terstruktur seperti tag alt gambar yang kosong, link tanpa rel="noopener", atau meta tag yang hilang, sistem menjalankan fungsi applyDeterministicAutoRepairs untuk memodifikasi kode secara instan dan aman sebelum meminta persetujuan pengguna.

B. Perbaikan Kesalahan Build dalam Sandbox

Bagi kegagalan build yang kompleks (misalnya kegagalan kompilasi Vite pada proyek React/Vue), Weba mengambil langkah drastis:

1. Analisis Log Build: Membaca pesan error keluaran kompiler secara rinci.

2. AI Coder Patching: Mengirimkan potongan kode bermasalah beserta log error kepada agen coder khusus untuk menambal kodenya.

3. Sandbox Verification: Melakukan verifikasi build tiruan (npm run build) secara tertutup di dalam verifyRepairBuild menggunakan modul sandbox.

4. Auto-Apply: Jika kompilasi di dalam sandbox lulus uji, perubahan langsung diterapkan secara otomatis (self-healed) tanpa menunggu tindakan pengguna.

Kesimpulan: Lingkaran Setan Kualitas Kode Weba

Keunggulan Weba tidak terletak pada seberapa canggih satu LLM yang digunakan, melainkan pada ekosistem Multi-Agent yang saling mengawasi dan menyempurnakan pekerjaan satu sama lain:

graph LR
    Planner[Multi-Agent Planner] -->|1. Desain Kokoh| Generator[Code Generator]
    Generator -->|2. Hasil Kode| QA[QA Auditor]
    QA -->|3. Laporan Celah| Repair[Self-Healing Repair]
    Repair -->|4. Perbaikan Teruji| Generator

Dengan alur lingkaran kualitas ini, Weba menjamin bahwa website yang Anda bangun tidak hanya tampak indah di luar, tetapi juga bersih di dalam, bebas dari error build, ramah aksesibilitas, bersahabat dengan SEO, dan siap bersaing di level produksi.

Ingin merasakan presisi generasi website kelas industri? Coba Weba sekarang dan saksikan bagaimana asisten multi-agent kami mewujudkan ide Anda secara konsisten!