AI Code Builder — Frontend Breakdown

#ai #frontend #research #project

Breakdown: Code Builder → Frontend

Back to: [AI Code Builder — Project README](Research: AI Code Builder)
Legenda: Legenda Prioritas, Estimasi & Cycle

EPIC F1: AI Core Engine (Frontend)

Tujuan Epic: Membangun kemampuan AI mengenali struktur & elemen visual halaman web dari screenshot.
Research Question: Seberapa presisi deteksi elemen visual (bounding box + atribut) yang dibutuhkan supaya code generator bisa menghasilkan layout yang akurat?

Chapter F1.1 — Feature Detection

Task F1.1.1 — Classifier UI web

Meta	Detail
Priority	P0
Effort	L
Cycle	0–1
Dependencies	Dataset screenshot web

Description: Membangun model untuk mengenali jenis halaman (Login, Dashboard, dll) dari screenshot web.

Sub-task:

Kumpulkan screenshot web UI (Auth, Dashboard, dll)
Label dataset per feature
Training classifier & evaluasi akurasi

Definition of Done:

Dataset minimal 100 screenshot berlabel
Classifier F1-score ≥ 0.85 pada test set (lihat [Thresholds](Minimum Score / Threshold))
Hasil evaluasi terdokumentasi
Entry dicatat di [Experiment Log](Experiment Log Template)

Task F1.1.2 — Deteksi elemen visual

Meta	Detail
Priority	P0
Effort	L
Cycle	1
Dependencies	Task F1.1.1

Description: Mendeteksi elemen individual di dalam screenshot (button, input, teks, gambar) beserta atribut visualnya (posisi, warna, font).

Sub-task:

Deteksi bounding box tiap elemen (button, input, text, image)
Deteksi warna, font, spacing dasar

Definition of Done:

Elemen terdeteksi dengan recall ≥ 80% (lihat Component Completeness di [Metrics](Success Metrics))
Output deteksi dalam format terstruktur (JSON bounding box + atribut) siap dipakai code generator

Chapter F1.2 — Reference Code & Testing Result

Task F1.2.1 — Dataset reference code frontend

Meta	Detail
Priority	P0
Effort	M
Cycle	1
Dependencies	Stack target diputuskan (rekomendasi awal: React — lihat [Output Spec]([[ai-code-builder/output-spec

Description: Menyiapkan kumpulan kode halaman Login sebagai ground truth pembanding untuk testing.

Sub-task:

Kumpulkan contoh kode Login page (React/Vue/HTML)
Validasi manual reference code

Definition of Done:

Minimal 10–15 reference code tervalidasi bisa di-build/run
Anotasi lengkap (framework, versi)

Task F1.2.2 — Testing harness frontend

Meta	Detail
Priority	P0
Effort	L
Cycle	2
Dependencies	Task F1.2.1

Description: Membangun pipeline render otomatis (headless browser) untuk mengambil screenshot hasil generate dan membandingkannya ke input asli.

Sub-task:

Build pipeline render otomatis (headless browser)
Screenshot hasil render vs input asli untuk komparasi

Definition of Done:

Pipeline berhasil render kode hasil generate ke screenshot tanpa intervensi manual
Skor visual similarity otomatis dihasilkan dan tersimpan

EPIC F2: UI Module (Web)

Tujuan Epic: Menggenerate komponen web nyata berdasarkan hasil deteksi Epic F1.

Meta	Detail
Priority	P0
Effort	M
Cycle	1
Dependencies	Epic F1 selesai

Description: Menggenerate komponen form Login lengkap dengan styling sesuai hasil deteksi visual (warna, spacing, font).

Sub-task:

Generate form input & validasi
Generate styling (CSS/Tailwind) sesuai deteksi visual

Definition of Done:

Hasil generate berhasil di-build dan tampil dengan visual similarity ≥ threshold di [Thresholds](Minimum Score / Threshold)
Validasi input dasar berfungsi (field wajib, format email)

Chapter F2.2 — Dashboard Page

Task F2.2.1 — Generate komponen Dashboard

Meta	Detail
Priority	P1
Effort	M
Cycle	2
Dependencies	Task F2.1.1

Description: Menggenerate layout Dashboard web (grid/table + navigasi sidebar/topbar) berdasarkan hasil deteksi struktur.

Sub-task:

Generate layout grid/table sesuai deteksi
Generate navigasi (sidebar/topbar)

Definition of Done:

Layout dan navigasi hasil generate berfungsi (bisa klik & berpindah menu dummy)
Responsif minimal di 1 breakpoint tambahan (opsional untuk MVP)

EPIC F3: Testing & Validation (Frontend)

Tujuan Epic: Memastikan hasil generate frontend bisa di-build dan visualnya sesuai referensi.

Chapter F3.1 — Compile/Render Test

Task F3.1.1 — Automated build test

Meta	Detail
Priority	P0
Effort	M
Cycle	2
Dependencies	Epic F2

Description: Menyiapkan sandbox otomatis untuk menjalankan npm install && build dari hasil generate.

Sub-task:

Setup sandbox build (npm install & build)
Capture error log jika build gagal

Definition of Done:

Build otomatis berjalan < 60 detik per hasil generate
Error log tersedia dan actionable

Chapter F3.2 — Visual Regression Test

Task F3.2.1 — Screenshot comparison

Meta	Detail
Priority	P1
Effort	M
Cycle	2
Dependencies	Task F1.2.2, F3.1.1

Description: Membandingkan screenshot hasil render kode dengan screenshot input asli menggunakan metrik SSIM.

Sub-task:

Render hasil generate di headless browser
Bandingkan screenshot render vs input asli (SSIM)

Definition of Done:

Skor SSIM otomatis dihasilkan per test run
Skor tersimpan dan terhubung ke Dashboard metrik