Belajar Pakai AI untuk Debug dan Desain UI: Pengalaman Jujur Seorang Mahasiswa

ai pengalaman debug ui prompt-engineering

Jujur, saya tidak menyangka blog ini akan jadi seperti ini.

Awalnya saya cuma mau bikin blog sederhana. Astro, Tailwind, deploy ke Firebase. Selesai. Tapi ternyata “sederhana” itu relatif — dan perjalanan dari blank folder ke blog yang sekarang kamu baca ini mengajarkan saya banyak hal tentang bagaimana bekerja dengan AI secara efektif.

Ini ceritanya.

Mulai dari Nol, Tapi Tidak Sendirian

Saya buka terminal, buat folder kosong, dan mulai ngobrol dengan Kiro — AI assistant dari AWS yang terintegrasi langsung di terminal saya.

Permintaan pertama saya cukup panjang: Astro + Tailwind, dark mode adaptif, bilingual ID/EN, Firebase deploy, GitHub Actions, responsif di 1366×768 (laptop Axioo saya), dan tanpa iklan. Semua dalam satu brief.

Kiro langsung mulai bekerja. Dalam beberapa menit, struktur project sudah terbentuk. Tapi ada hal menarik yang terjadi di awal — waktu npm create astro dijalankan, dia nolak nulis ke direktori yang tidak kosong (karena ada README.md). Jadinya Kiro bikin subfolder blue-bar. Saya tidak sadar ini terjadi sampai Kiro sendiri yang bilang, “Saya deteksi ini, saya pindahkan semua file ke root.”

Itu momen pertama saya sadar: AI yang bagus tidak cuma mengeksekusi instruksi, tapi juga membaca konteks dan mengambil keputusan kecil yang logis tanpa harus ditanya.

Bug Pertama: Dark Mode yang Hilang

Setelah Tahap 1 selesai — layout dasar, navbar, blog system — saya mulai navigasi antar halaman. Dan saya notice sesuatu yang aneh.

Saya set tema ke Dark. Klik ke halaman Blog. Halaman muncul sebentar dalam mode Light, lalu gelap lagi.

Saya tanya Kiro: “Kenapa dark mode-nya kedip waktu pindah halaman?”

Penjelasannya langsung masuk akal:

“Ini efek samping ViewTransitions. Tanpa ViewTransitions, setiap navigasi adalah full page reload — script anti-flicker di <head> jalan ulang, class .dark di-apply sebelum paint. Dengan ViewTransitions, Astro hanya swap konten <body> — <head> tidak di-reload. Jadi script anti-flicker tidak jalan lagi setelah navigasi pertama.”

Solusinya: document.addEventListener('astro:after-swap', applyTheme).

document.addEventListener('astro:after-swap', function() {
  var t = localStorage.getItem('theme') || 'system';
  var isDark = t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
  document.documentElement.classList.toggle('dark', isDark);
});

Satu event listener. Bug hilang.

Yang saya pelajari dari sini: bug yang kelihatan misterius hampir selalu punya penjelasan teknis yang logis. Dan kalau kamu bisa mendeskripsikan bug dengan tepat ke AI, kamu akan dapat penjelasan yang tepat juga.

”Grid-nya Terlalu Kaku”

Setelah bug dark mode beres, saya lihat tampilan blog secara keseluruhan. Ada yang mengganggu — background-nya ada grid line kotak-kotak yang bikin blog terasa seperti spreadsheet, bukan ruang personal.

Saya bilang ke Kiro: “Grid-nya terlalu kaku. Ganti dengan sesuatu yang lebih modern.”

Kiro ganti dengan dots pattern — titik-titik kecil dengan radial-gradient. Hasilnya jauh lebih halus. Tapi yang lebih menarik adalah bagaimana dots itu dibuat reaktif terhadap perubahan tema:

new MutationObserver(function() {
  var isDark = document.documentElement.classList.contains('dark');
  var color = isDark ? 'rgba(139,92,246,0.10)' : 'rgba(20,184,166,0.18)';
  el.style.backgroundImage = 'radial-gradient(' + color + ' 1px, transparent 1px)';
}).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });

MutationObserver yang watch perubahan class di <html>. Ringan, tidak ada polling, tidak ada interval. Dots berubah warna otomatis saat tema berganti.

Saya tidak tahu teknik ini sebelumnya. Saya belajarnya dari kode yang Kiro tulis, lalu saya tanya “kenapa pakai MutationObserver dan bukan CSS?” — dan dapat penjelasan yang masuk akal.

Pelajaran Terbesar: Cara Bertanya yang Benar

Setelah beberapa sesi, saya sadar ada pola yang membuat kolaborasi dengan AI jauh lebih efektif:

1. Spesifik soal konteks, bukan cuma masalah

Bukan: “Dark mode-nya rusak” Tapi: “Dark mode hilang saat navigasi dengan ViewTransitions aktif”

Perbedaannya besar. Yang pertama bisa berarti apa saja. Yang kedua langsung mengarah ke solusi yang tepat.

2. Sebutkan constraint yang nyata

Saya selalu menyebut: laptop Axioo 1366×768, CachyOS, Samsung A13. Bukan karena AI perlu tahu spesifikasi hardware, tapi karena constraint yang spesifik menghasilkan solusi yang spesifik juga.

3. Iterasi, bukan perfeksi di awal

Blog ini tidak langsung sempurna. Ada v1.1, v1.2, v1.3, v1.4. Setiap versi lebih baik dari sebelumnya karena ada feedback yang jelas: “ini terlalu kaku”, “ini terlalu putih”, “ini macet waktu navigasi”.

Iterasi yang cepat lebih baik dari perencanaan yang panjang.

Soal Google Translate yang Macet

Ini bug yang lebih subtle. Setelah ViewTransitions, tombol Google Translate kadang tidak mau muncul widget-nya.

Masalahnya ada di flag loaded:

// Kode lama — bermasalah
var loaded = false; // variabel lokal, reset tiap navigasi!

btn.addEventListener('click', function() {
  if (!loaded) {
    loaded = true;
    // inject script GT
  }
});

Setiap kali ViewTransitions swap halaman, script di-reinit — dan loaded kembali ke false. Tapi script GT sudah ada di <head>. Jadi waktu kode mencoba inject ulang, terjadi konflik.

Solusinya: pakai window._gtLoaded sebagai flag global yang persisten:

// Kode baru — benar
if (!window._gtLoaded) {
  window._gtLoaded = true;
  // inject script GT — hanya sekali, selamanya
}

window tidak di-reset oleh ViewTransitions. Flag global persisten selama sesi browser.

Apa yang Saya Rasakan Sekarang

Blog ini bukan cuma portofolio. Ini adalah bukti bahwa seorang mahasiswa semester 8 bisa membangun sesuatu yang proper — dengan arsitektur yang bersih, performa yang baik, dan desain yang tidak memalukan — dalam satu hari, dengan bantuan AI.

Bukan karena AI yang “nulis semua kode”. Tapi karena saya tahu apa yang saya mau, bisa mendeskripsikannya dengan jelas, dan tahu kapan harus bertanya “kenapa ini bekerja seperti ini?”

Itu yang saya sebut prompt engineering yang sesungguhnya — bukan sekadar nulis prompt yang panjang, tapi membangun dialog yang produktif dengan AI sebagai partner kerja.

Kalau kamu mahasiswa atau developer yang belum coba kolaborasi intensif dengan AI, coba sekarang. Bukan untuk menggantikan kemampuan kamu — tapi untuk mempercepat loop belajar kamu secara drastis.

Saya belajar lebih banyak tentang Astro, ViewTransitions, MutationObserver, dan CSS custom properties dalam satu hari ini daripada yang mungkin saya pelajari dalam seminggu baca dokumentasi sendirian.

Dan blog ini adalah buktinya.

← Kembali ke Blog