Saya Menyelesaikan Redesain Situs Terbesar dalam Bertahun-tahun. Saat Sarapan.

Sabtu pagi. Saya sedang makan bánh mì heo quay (roti Vietnam isi babi panggang). Dan saya baru saja men-deploy bagian terakhir dari redesain paling komprehensif yang pernah dialami situs personal saya sejak 2021.

Lima tahun. Selama itulah sejak saya melakukan sesuatu yang substansial pada website saya. Tentu, saya mengedit sedikit copy di sini, menambah blog post di sana. Tapi desainnya? Arsitekturnya? Keseluruhan pengalaman? Tidak tersentuh sejak sebelum pandemi benar-benar berakhir.

Pagi ini, saya menyelesaikan design system TRANSMISSION — overhaul visual lengkap dengan tipografi, palet warna, animasi, dan halaman produk premium baru. Tapi itu hanya finale dari sprint 3 hari yang mentransformasi segalanya.

Angka-angkanya:

- 40 commit dalam 3 hari

- 28.129 baris kode ditambahkan

- 4.950 baris CSS baru

- 11 file CSS (naik dari 1)

- Sistem dark mode lengkap

- Mobile-first responsive semuanya

- Halaman produk custom dengan screenshot asli

Total waktu untuk seluruh redesain: beberapa jam selama 3 hari**.** 36 commit di Hari 1 saja. Push terakhir hari ini: 30 menit sambil makan sarapan.

Tanpa design agency. Tanpa mockup Figma. Tanpa timeline berbulan-bulan. Hanya saya dan Claude Code. :D

Ini yang perlu saya tegaskan: Saya tidak menulis satu baris CSS pun. Saya tidak menulis PHP. Saya tidak menjalankan perintah deployment secara manual. Claude Code melakukan 100% implementasi — desain, kode, git commit, deployment. Saya hanya membuat keputusan. "Lebih banyak glow." "Font itu terasa salah." "Buat card-nya premium."

Inilah tampilan pengembangan berbantuan AI yang sebenarnya di 2026.

---

Titik Awal: Ditinggalkan Sejak 2021

Izinkan saya jujur tentang posisi saya.

Situs saya tanggal 1 Januari 2026:

- Satu file CSS dengan 700 baris spaghetti

- Font Poppins untuk semuanya (pilihan "saya tidak benar-benar memikirkan tipografi")

- Tidak ada design system — warna di-hardcode di mana-mana

- Dark mode dasar yang rusak di separuh halaman

- Halaman produk: Tidak ada halaman produk, seluruh situs hanyalah blog.

- Pengalaman mobile yang "responsive" dengan cara yang sama seperti jas murah "pas"

Saya terlalu fokus pada pekerjaan utama, belajar tentang Generative AI, lalu membangun STRAŦUM dan DIALØGUE — dua aplikasi AI saya — sampai situs personal saya menjadi seperti anak tukang sepatu yang tidak pakai sepatu.

Setiap kali calon klien atau kolaborator berkunjung, mereka melihat situs yang berteriak "2021 menelepon, mereka mau tema WordPress-nya kembali."

---

Kenapa Sekarang? Dan Kenapa Dengan Cara Ini?

Dua hal terjadi di akhir 2025:

Pertama, saya me-ship STRAŦUM dan DIALØGUE. Dua aplikasi AI production, dibangun solo sambil tetap bekerja penuh waktu sebagai VP di agensi periklanan global. Pengguna nyata, diskusi revenue nyata, kredibilitas nyata yang dipertaruhkan.

Situs personal saya sekarang jadi pintu depan ke produk nyata. Harus sesuai.

Kedua, saya mulai menggunakan Claude Code secara serius. Bukan sebagai chatbot. Sebagai lingkungan pengembangan. Dan saya menemukan sesuatu yang mengubah segalanya: plugin `frontend-design`.

Plugin ini tidak hanya menulis CSS. Dia memikirkan desain. Pasangan tipografi. Teori warna. Komposisi spasial. Inilah yang mencegah kode yang di-generate AI dari terlihat seperti "AI slop."

Saya berpikir: bagaimana kalau saya... membangun ulang semuanya? Bukan dalam weekend hack. Tapi dengan benar. Dengan design system yang nyata. Dengan Claude Code melakukan pekerjaan berat sementara saya membuat keputusan.

---

Sprint 3 Hari: Apa yang Sebenarnya Terjadi

Hari 1: Big Bang — 36 Commit

Saya tidak berencana membuat 36 commit dalam sehari. Tapi begitu mulai, saya tidak bisa berhenti.

Setup awal, backup tema yang ada, memulai modularisasi CSS.

Membangun ulang seluruh arsitektur CSS. File tunggal 700 baris itu menjadi:

```
css/
├── style.css          # Design token saja
├── components.css     # Button, card, navigasi
├── homepage.css       # Hero, produk, bagian post
├── about.css          # Khusus halaman About
├── blog.css           # Arsip blog
├── dark-mode.css      # Sistem dark mode lengkap
├── mobile-nav.css     # Bar navigasi bawah
├── search.css         # Overlay pencarian
├── single-post.css    # Tipografi blog post
└── products.css       # Halaman produk premium
```

Setiap file punya satu tugas. Setiap file menggunakan variabel CSS dari root. Tidak perlu lagi mencari di 700 baris untuk menemukan kenapa sebuah button warnanya salah. :P

Overhaul dark mode. Dark mode lama saya memalukan — teks yang menghilang, button tanpa kontras. Saya membangunnya ulang dari nol:

- 658 baris CSS dark mode khusus

- Rasio kontras yang proper (sesuai WCAG)

- Menghapus semua 89 deklarasi `!important` (ya, 89)

- Token warna semantik yang berganti otomatis

Di akhir hari: Homepage didesain ulang, halaman About dibangun ulang, navigasi bawah mobile ditambahkan, integrasi newsletter selesai. 36 commit.

Hari 2: Arsitektur & Infrastruktur — 9 Commit

Hari 2 soal membuat semuanya bisa di-maintain.

Refaktor besar: `functions.php` berubah dari 724 baris kekacauan menjadi 25 baris include yang bersih:

```php
require_once get_stylesheet_directory() . '/inc/enqueue.php';
require_once get_stylesheet_directory() . '/inc/homepage-sections.php';
require_once get_stylesheet_directory() . '/inc/navigation.php';
require_once get_stylesheet_directory() . '/inc/search.php';
require_once get_stylesheet_directory() . '/inc/blog.php';
```

Juga setup Docker untuk pengembangan lokal, melakukan audit keamanan GCP, dan menulis dokumentasi.

Hari 3: Finale TRANSMISSION — Sprint Sarapan

Di sinilah plugin `frontend-design` membuktikan nilainya.

Saya mendeskripsikan apa yang saya mau: "Retro-futuristik. Masa lalu analog bertemu masa depan digital. Premium tapi tidak korporat. Teknis tapi hangat." Lalu saya pergi mengambil sarapan.

Ketika saya kembali dengan bánh mì saya, Claude Code sudah men-generate design system TRANSMISSION yang lengkap:

Tipografi:

- Playfair Display — Headline (elegan, editorial)

- DM Sans — Body text (bersih, mudah dibaca)

- JetBrains Mono — Kode dan data (kredibilitas teknis)

Warna:

```css
--color-cream: #fffbeb;    /* Background hangat */
--color-navy: #0f172a;     /* Primary yang dalam */
--color-cyan: #22d3ee;     /* Aksen energi */
--color-amber: #f59e0b;    /* Aksen hangat */
```

Fluid Typography:

```css
--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
```

Headline otomatis menyesuaikan dari mobile ke desktop. Tidak perlu media query.

Lalu saya menangani halaman produk. Halaman yang tadinya hanya teks menjadi:

Bagian Hero:

- Teks eyebrow bergaya terminal

- Headline Playfair: "What I'm Building"

- Bar statistik: 2 Live Platform | 99.7% Performance Gain | 92% Cost Reduction

- Bentuk geometris mengambang dengan animasi halus

Kartu Produk:

- Background gradien navy premium

- Screenshot asli dari situs production (bukan mockup)

- Container frame browser dengan dot kontrol window

- State hover dengan glow cyan/amber

- Daftar fitur dengan penanda panah

- CTA full-width

Screenshot saja sudah jadi perjalanan tersendiri. Claude Code menavigasi ke situs production saya, menangkap halaman, mengoptimalkan dari 1.8MB menjadi 229KB (86% lebih kecil), dan membungkusnya dalam container bergaya.

---

Stack-nya: Ternyata Sederhana

Ini semua yang saya gunakan:

Claude Code — AI yang menulis kode, menjalankan perintah, dan menjaga konteks. Ini AI yang punya akses ke filesystem saya, bisa menjalankan perintah git, dan mengingat apa yang kami bangun kemarin.

Plugin frontend-design — Perbedaan antara "CSS yang di-generate AI" dan "CSS yang terlihat dirancang." Teori tipografi, hubungan warna, komposisi spasial sudah built in.

Docker — Pengembangan WordPress lokal. Satu `docker-compose up` dan saya punya mirror production.

Chrome DevTools MCP — Claude Code bisa mengontrol browser. "Cek dark mode mobile" → screenshot aktual dari halaman yang dirender. Tidak perlu pindah tab.

gcloud CLI: yang dikontrol Claude

---

Bagian yang Jujur

Ini bukan sulap. Ada yang salah:

Kekacauan folder bersarang: Docker copy membuat struktur `gambit-child/gambit-child/`. Butuh 10 menit untuk di-debug.

Teks dark mode menghilang: Beberapa heading mewarisi warna yang salah. Diperbaiki dengan selektor yang lebih spesifik.

Optimasi gambar: Screenshot mentah berukuran besar. Harus belajar bahwa `sips -Z 800` di macOS bisa resize gambar tanpa tool eksternal.

Penugasan template WordPress: Lupa halaman produk baru perlu di-assign di WP admin. Klasik.

Bedanya adalah debugging butuh menit, bukan jam. Claude Code bisa melihat halaman yang dirender, mengidentifikasi masalah, dan mengusulkan perbaikan dalam percakapan yang sama.

---

Sebelum & Sesudah: Angka-angkanya

| Metrik | 1 Januari 2026 | 10 Januari 2026 |

|--------|-----------------|------------------|

| File CSS | 1 | 11 |

| Baris CSS | ~700 | 4.950 |

| Arsitektur PHP | Monolitik | Modular (6 file) |

| Tipografi | 1 font | Sistem 3 font |

| Token Warna | ~5 di-hardcode | 15+ semantik |

| Dark Mode | Rusak | 658 baris, sesuai WCAG |

| Halaman Produk | Teks biasa | Premium dengan screenshot |

| Nav Mobile | Tidak ada | Bar bawah dengan 6 aksi |

| Animasi | 0 | 7 (fadeInUp, float, glow, dll.) |

| Update Besar Terakhir | 2021 | Hari ini |

Total transformasi: 28.129 baris ditambahkan di 123 file dalam 40 commit selama 3 hari. Semua ditulis oleh Claude Code.

---

Berapa Biayanya

Uang: $0 untuk desain. Langganan Claude Code. Hosting GCP yang sudah saya punya.

Waktu: 3 hari berlalu. Tapi waktu aktif saya yang sebenarnya? Mungkin 2-3 jam total. Saya mendeskripsikan apa yang saya mau, Claude Code membangunnya, dan saya kembali nanti untuk mereview. Pagi ini saya memulai redesain terakhir, pergi sarapan, dan kembali untuk mengonfirmasi — 30 menit perhatian yang sebenarnya.

Kontribusi saya yang sebenarnya: Nol baris kode. Saya mendeskripsikan apa yang saya mau, mereview apa yang dibangun Claude Code, dan berkata hal-hal seperti "hover state-nya butuh lebih banyak glow" atau "spacing itu terasa salah."

Perbandingan: Design agency akan mengutip 8-12 minggu dan $10.000+ untuk scope ini. Dan saya masih harus mengimplementasikan file Figma mereka sendiri.

---

Apa yang Saya Pelajari

1. Saya bukan developer lagi — saya creative director. Claude Code menulis setiap baris kode. Saya membuat keputusan taste. "Animasi itu terlalu lambat." "Cyan-nya butuh lebih banyak glow di dark mode." "Buat hero stats-nya lebih menonjol." Ini skill yang secara fundamental berbeda dari coding.

2. Modularisasi dulu. Insting pertama Claude Code adalah memecah codebase menjadi file-file logis sebelum membuat perubahan visual. Setiap perubahan berikutnya jadi lebih mudah karena fondasi ini.

3. Design system itu compound. Begitu token TRANSMISSION ada, setiap komponen baru tinggal mengombinasikan variabel yang sudah ada. Halaman produk cuma butuh 45 menit karena sistemnya sudah ada.

4. Plugin frontend-design adalah pembedanya. CSS yang di-generate AI biasa terlihat seperti "AI slop" — generik, aman, mudah dilupakan. Plugin frontend-design berpikir tentang pasangan tipografi, teori warna, komposisi spasial. Itulah kenapa ini tidak terlihat seperti di-generate AI.

5. Ship secara inkremental. 40 commit, bukan 1. Setiap bagian go live saat siap. Claude Code menangani workflow git — staging, committing, pushing, membuat PR.

---

Coba Sendiri

Kalau situs personalmu sudah "cukup baik" sejak 2021:

1. Install Claude Code dengan plugin `frontend-design`

2. Deskripsikan vibe yang kamu mau (punya saya: "retro-futuristik, analog bertemu digital")

3. Mulai dengan arsitektur — modularisasi sebelum memperindah

4. Bangun design system — token, tipografi, warna

5. Lalu bangun halaman — masing-masing menggunakan sistem yang kamu buat

6. Deploy sering — jangan tunggu sampai "selesai"

Bagian tersulit bukan teknologinya. Tapi memutuskan kamu ingin situsmu terasa seperti apa.

Begitu kamu tahu itu, sisanya adalah percakapan.

Update: Pelajaran tentang taste di atas implementasi menjadi semakin jelas ketika saya mulai membangun native iOS app tanpa tahu Swift. Claude men-scaffold 7.568 baris kode dalam satu malam — tapi kerja "creative director" untuk membuatnya terasa benar? Itu masih sepenuhnya manusia.

Kapan terakhir kali kamu membangun ulang sesuatu yang sudah kamu tunda bertahun-tahun? Apa yang akhirnya mendorongmu untuk mulai — dan bagaimana rasanya saat selesai?

Salam,

Chandler

---

*Masih membangun, masih men-ship, masih menikmati bánh mì itu.*

---