karawaci.kode

2026-06-01 · 7 min

Vibe Coding 2 Minggu dengan Claude Code + Astro

Dua minggu lalu saya dapat brief dari klien kuliner Tangerang: landing page baru untuk launching cabang ke-4, butuh dalam 10 hari, budget Rp 3,5 juta. Saya coba sesuatu yang sebelumnya saya hindari — pure vibe-coding pakai Claude Code, tanpa nulis satu line manual.

Setup

Project: Astro 6 + Tailwind v4 + shadcn (port Astro). Deploy ke Cloudflare Pages. Klien minta: hero, menu showcase (3 cabang), testimoni, form WA, embed Google Maps.

Tools: Claude Code (CLI version), VS Code di sebelahnya untuk read-only. Saya disclose ke diri sendiri: tidak akan langsung tulis kode di editor. Semua via prompt.

Reference baseline saya untuk Astro greenfield: biasanya 24-30 jam kerja untuk scope ini. Mari kita lihat.

Velocity

Hari 1 (4 jam): scaffold project, hero section, navbar responsive. Claude Code generate ~600 lines code dalam 4 prompt iterasi. Hasil: production-ready 80%.

Hari 2-3 (6 jam): menu section, testimoni carousel, form WA dengan WhatsApp Business API. Saya nge-prompt “buat form dengan validasi Zod, submit kirim ke WhatsApp Business via fetch, handle rate limit”. Output langsung jalan. Edit minor untuk styling.

Hari 4-5 (4 jam): SEO meta tags, structured data JSON-LD untuk LocalBusiness, sitemap, robots.txt. Claude tau pattern Astro untuk semua ini.

Hari 6 (2 jam): integrate Google Maps embed dengan lazy load, ARIA attributes untuk accessibility. Selesai.

Total: 16 jam, vs baseline 28 jam. ~43% lebih cepat.

P50 prompt-to-working-code: sekitar 90 detik. P95: 4 menit (untuk request yang kompleks seperti carousel custom).

Yang break

Hari ke-7 saya QA full. Ini yang ketemu:

  1. CSP header tidak ada. Claude generate aplikasi tanpa Content Security Policy. Saya minta secara eksplisit, baru ditambahkan. Default-nya: assumes you don’t care.

  2. Form WA simpan token di client-side env. Claude pakai import.meta.env.PUBLIC_WA_TOKEN. Token bocor ke browser. Saya fix dengan Astro Server Endpoint dan env non-PUBLIC. 30 menit kerja.

  3. N+1 fetch di menu page. Component menu fetch tiap card terpisah. 12 fetch untuk 12 menu item. Saya refactor ke single fetch di getStaticProps equivalent. P95 page load: dari 2.8s ke 480ms.

  4. Accessibility miss: carousel tidak ada keyboard navigation. Form input tidak ada aria-describedby untuk error message. Saya audit dengan axe-core, fix 14 violation. 2 jam.

  5. Image weight: hero image 4.2MB JPEG karena Claude tidak optimize. Saya convert ke AVIF + responsive srcset via Astro <Image>. Page weight turun dari 6.1MB ke 890KB.

Total cleanup: 8 jam. Net velocity gain: 28 - 16 - 8 = 4 jam, atau ~14% improvement. Bukan 3x.

Memory & cost AI

Claude Code consume sekitar 2,3M tokens selama 2 minggu untuk project ini. Pakai paid plan Anthropic, cost real ~$18 USD (~Rp 290k). Per jam cost AI: ~Rp 18k. Vs tarif freelance saya Rp 250k/jam: AI tax ~7%. Acceptable.

RAM laptop saya (M2 Air 16GB) ketika Claude Code aktif + Astro dev server + Chrome: 11.2GB. Dari 7,8GB baseline tanpa Claude. Heavy-ish.

Pola yang work

# Pattern yang saya temukan: prompt dengan konteks file explicit
claude "baca src/layouts/Base.astro, lalu buat header sticky 
dengan menu mobile yang accessible (focus trap, escape close)"

Kunci-nya: kasih konteks file existing, jangan suruh Claude tebak struktur project.

Pattern kedua: minta diff, bukan full file. “Edit form WA di src/components/Form.astro, tambahkan honeypot field untuk anti-spam. Kasih saya diff saja.”

Pattern ketiga: review prompt. Setelah generate, prompt lagi: “review file yang baru kamu buat untuk security issues, accessibility, dan performance”. Claude sering catch issue sendiri kalau diminta.

Yang AI tidak bisa cover

  • Business logic ambiguity: klien bilang “menu yang sold out tetap tampil tapi disabled”. Claude implement “disabled” sebagai opacity-50. Klien maksud: ada badge “Habis” + tidak bisa di-tap. Communication problem, bukan AI problem.
  • Brand voice copywriting: AI-generated copy terlalu generic. Klien minta saya rewrite microcopy semua. 1,5 jam.
  • Real device testing: AI tidak tau Samsung A12 (HP umum di Indonesia segment menengah-bawah) punya viewport bug tertentu. Saya test manual di device, fix 2 issue.

Verdict

Vibe coding untuk landing page / MVP greenfield: yes, productivity naik. Tapi marketing claim “10x productivity” tidak realistic. Real improvement: 15-25% setelah cleanup tax dihitung. Lebih relevan: AI menggeser jenis kerja saya dari “ngetik boilerplate” ke “review + fix edge case + business logic”. Lebih ergonomis untuk sesi kerja 8 jam.

Untuk project dengan paying customer di payment flow atau auth (seperti migrasi Bun di payment gateway saya): tetap line-by-line review wajib. Vibe coding bukan untuk situasi yang break = data leak.

Bukan magic. Tapi alat ini sudah cukup berguna untuk masuk daily workflow saya secara permanen.

Ditulis oleh Reza Pradipta