Natapos Ko ang Pinakamalaking Site Redesign Ko sa Loob ng Ilang Taon. Habang Nag-aalmusal.
Binuo ko ulit ang buong website ko sa loob ng 3 araw gamit ang AI—hindi bilang coding assistant, kundi bilang actual developer ko. Ako ang nagpasya; si Claude Code ang sumulat ng 28,000 linya.
8:47 AM ng isang Sabado. Kumakain ako ng vietnamese pork baguette (Banh Mi Heo Quay). At kaka-deploy ko lang ng huling piraso ng pinakacomprehensive na redesign ng personal site ko simula noong 2021.
Limang taon. Ganoon katagal mula noong huli akong gumawa ng kahit anong substantial sa website ko. Oo naman, may mga tweaks dito, may dagdag na blog post doon. Pero ang design? Ang architecture? Ang kabuuang experience? Hindi nagalaw simula bago talagang natapos ang pandemic.
Ngayong umaga, natapos ko ang TRANSMISSION design system—isang complete visual overhaul na may bagong typography, color palette, animations, at premium products page. Pero iyon lang ang finale ng isang 3-day sprint na nagbago ng lahat.
Ang mga numbers:
- 40 commits sa 3 araw
- 28,129 linya ng code na idinagdag
- 4,950 linya ng bagong CSS
- 11 CSS files (mula sa 1)
- Complete dark mode system
- Mobile-first responsive lahat
- Custom products page na may totoong screenshots
Kabuuang oras para sa buong redesign: ilang oras sa loob ng 3 araw. 36 commits sa Day 1 lang. Ang huling push ngayong araw: 30 minuto habang kumakain ng almusal.
Walang design agency. Walang Figma mockups. Walang multi-month timeline. Ako lang at Claude Code. :D
Kailangan kong linawin ito: Hindi ako sumulat ng kahit isang linya ng CSS. Hindi ako sumulat ng PHP. Hindi ko manually pinatakbo ang deployment commands. Si Claude Code ang gumawa ng 100% ng implementation—ang design, ang code, ang git commits, ang deployment. Nagpasya lang ako. "Dagdagan ng glow." "Mali ang pakiramdam ng font na iyon." "Gawing premium ang mga cards."
Ito ang hitsura ng AI-assisted development sa 2026.
---
Ang Simula: Abandonado Mula 2021
Maging honest tayo kung nasaan ako noon.
Ang site ko noong January 1, 2026:
- Isang CSS file na may 700 linya ng spaghetti
- Poppins font para sa lahat (ang "hindi talaga pinag-isipan ang typography" na pagpili)
- Walang design system — mga kulay na hardcoded kahit saan
- Basic dark mode na nasisira sa kalahati ng mga pages
- Products page: Walang product page, blog lang ang buong site.
- Mobile experience na "responsive" sa parehong paraan na ang murang suit ay "kasya"
Naka-focus ako sa main job ko, pag-aaral tungkol sa Generative AI, at pagbuo ng STRAŦUM at DIALØGUE—dalawa kong AI applications—kaya naging parang anak ng sapatero na walang sapatos ang personal site ko.
Bawat pumunta ang potential client o collaborator, nakikita nila ang site na sumisigaw ng "tumawag ang 2021, gusto nila yung WordPress theme nila pabalik."
---
Bakit Ngayon? At Bakit Ganito?
Dalawang bagay ang nangyari noong late 2025:
Una, na-ship ko ang STRAŦUM at DIALØGUE. Dalawang production AI applications, binuo mag-isa habang may day job bilang VP ng isang global advertising agency. Totoong users, totoong revenue discussions, totoong credibility na nakasalalay.
Ang personal site ko ngayon ang front door sa mga totoong products. Kailangang magkatugma ito.
Pangalawa, nagsimula akong seryosong gumamit ng Claude Code. Hindi bilang chatbot. Bilang development environment. At may nadiskubre akong nagbago ng lahat: ang `frontend-design` plugin.
Ang plugin na ito ay hindi basta sumusulat ng CSS. *Nag-iisip* ito tungkol sa design. Typography pairings. Color theory. Spatial composition. Ito ang pumipigil sa AI-generated code na maging hitsura ng "AI slop."
Naisip ko: paano kung... buuin ko ulit ang lahat? Hindi sa weekend hack. Kundi nang maayos. Na may totoong design system. Na si Claude Code ang gagawa ng mabibigat na trabaho habang nagpapasya ako.
---
Ang 3-Day Sprint: Ano Talaga ang Nangyari
Day 1: Ang Big Bang — 36 Commits
Hindi ko planong gumawa ng 36 commits sa isang araw. Pero pagkasimulan ko, hindi ko na mapigilan.
Initial setup, nai-backup ang existing theme, sinimulan ang CSS modularization.
Binuo ulit ang buong CSS architecture. Ang isang 700-line file na iyon ay naging:
```
css/
├── style.css # Design tokens lang
├── components.css # Buttons, cards, navigation
├── homepage.css # Hero, products, posts sections
├── about.css # About page specific
├── blog.css # Blog archive
├── dark-mode.css # Complete dark mode system
├── mobile-nav.css # Bottom navigation bar
├── search.css # Search overlay
├── single-post.css # Blog post typography
└── products.css # Premium products page
```
Bawat file ay may isang trabaho. Bawat file ay gumagamit ng CSS variables mula sa root. Wala nang paghahanap sa 700 linya para mahanap kung bakit mali ang kulay ng button. :P
Dark mode overhaul. Nakakahiya ang lumang dark mode ko—nawawalang text, buttons na walang contrast. Binuo ko ulit mula sa simula:
- 658 linya ng dedicated dark mode CSS
- Tamang contrast ratios (WCAG compliant)
- Inalis lahat ng 89 `!important` declarations (oo, 89)
- Semantic color tokens na automatic nagpapalit
Sa dulo ng araw: Naredisign ang Homepage, nairebuild ang About page, naidagdag ang mobile bottom nav, natapos ang newsletter integration. 36 commits.
Day 2: Architecture & Infrastructure — 9 Commits
Ang Day 2 ay tungkol sa paggawang maintainable ng lahat.
Ang malaking refactor: Ang `functions.php` ay nagmula sa 724 linya ng kaguluhan tungo sa 25 linya ng malinis na includes:
```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';
```
Nag-set up din ng Docker para sa local development, gumawa ng GCP security audit, at nagsulat ng documentation.
Day 3: Ang TRANSMISSION Finale — Ang Breakfast Sprint
Dito talaga kinita ng `frontend-design` plugin ang halaga nito.
Inilarawan ko kung ano ang gusto ko: "Retro-futuristic. Analog past meets digital future. Premium pero hindi corporate. Technical pero mainit." Tapos pumunta akong kumuha ng almusal.
Pagbalik ko na may bánh mì, naggenerate na si Claude Code ng complete TRANSMISSION design system:
Typography:
- Playfair Display — Headlines (elegant, editorial)
- DM Sans — Body text (malinis, nababasa)
- JetBrains Mono — Code at data (technical credibility)
Colors:
```css
--color-cream: #fffbeb; /* Mainit na background */
--color-navy: #0f172a; /* Malalim na primary */
--color-cyan: #22d3ee; /* Energy accent */
--color-amber: #f59e0b; /* Mainit na accent */
```
Fluid Typography:
```css
--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
```
Automatic na nag-scale ang headlines mula mobile hanggang desktop. Walang media queries na kailangan.
Tapos hinarap ko ang products page. Ang page na dati ay text lang ay naging:
Hero Section:
- Terminal-style eyebrow text
- Playfair headline: "What I'm Building"
- Stats bar: 2 Live Platforms | 99.7% Performance Gain | 92% Cost Reduction
- Floating geometric shapes na may subtle animations
Product Cards:
- Premium navy gradient backgrounds
- Totoong screenshots mula sa production sites (hindi mockups)
- Browser-frame containers na may window control dots
- Hover states na may cyan/amber glows
- Feature lists na may arrow markers
- Full-width CTAs
Ang screenshots lang ay isang adventure. Nag-navigate si Claude Code sa production sites ko, kinuha ang mga pages, in-optimize mula 1.8MB hanggang 229KB (86% na mas maliit), at binalot sa styled containers.
---
Ang Stack: Surprisingly Simple
Ito ang lahat ng ginamit ko:
Claude Code — Ang AI na nagsusulat ng code, nagpapatakbo ng commands, at nagpapanatili ng context. Ito ay isang AI na may access sa filesystem ko, makakapag-run ng git commands, at naaalala ang binuo namin kahapon.
frontend-design plugin — Ang pagkakaiba sa pagitan ng "AI-generated CSS" at "CSS na mukhang designed." Typography theory, color relationships, spatial composition na built in.
Docker — Local WordPress development. Isang `docker-compose up` at mayroon na akong production mirror.
Chrome DevTools MCP — Kinokontrol ni Claude Code ang browser. "Check mobile dark mode" → actual screenshot ng rendered page. Walang tab-switching.
gcloud CLI: na kinokontrol ni Claude
---
Ang Mga Honest Parts
Hindi ito magic. May mga nagkamali:
Nested folder chaos: Gumawa ang Docker copy ng `gambit-child/gambit-child/` structure. 10 minuto para i-debug.
Nawawalang dark mode text: May mga headings na nag-inherit ng maling colors. Na-fix sa pamamagitan ng mas specific na selectors.
Image optimization: Napakalaki ng raw screenshots. Kailangan kong matutunan na ang `sips -Z 800` sa macOS ay nagre-resize ng images nang walang external tools.
WordPress template assignment: Nakalimutan na kailangan i-assign ang bagong products page sa WP admin. Classic.
Ang pagkakaiba ay ang debugging ay minuto lang, hindi oras. Makikita ni Claude Code ang rendered page, matutukoy ang isyu, at magmumungkahi ng fixes sa parehong conversation.
---
Before & After: Ang Mga Numbers
| Metric | January 1, 2026 | January 10, 2026 |
|--------|-----------------|------------------|
| CSS Files | 1 | 11 |
| Lines of CSS | ~700 | 4,950 |
| PHP Architecture | Monolithic | Modular (6 files) |
| Typography | 1 font | 3-font system |
| Color Tokens | ~5 hardcoded | 15+ semantic |
| Dark Mode | Sira | 658 linya, WCAG compliant |
| Products Page | Plain text | Premium na may screenshots |
| Mobile Nav | Wala | Bottom bar na may 6 actions |
| Animations | 0 | 7 (fadeInUp, float, glow, atbp.) |
| Last Major Update | 2021 | Ngayon |
Kabuuang pagbabago: 28,129 linya na idinagdag sa 123 files sa 40 commits sa loob ng 3 araw. Lahat isinulat ni Claude Code.
---
Magkano Ito Nagastos
Pera: $0 para sa design. Claude Code subscription. GCP hosting na mayroon na ako.
Oras: 3 araw na lumipas. Pero ang totoong active time ko? Mga 2-3 oras kabuuan. Ilalarawan ko kung ano ang gusto ko, gagawin ni Claude Code, at babalikan ko mamaya para suriin. Ngayong umaga sinimulan ko ang huling redesign, kumain ng almusal, at bumalik para kumpirmahin—30 minuto ng totoong atensyon.
Ang totoong kontribusyon ko: Zero linya ng code. Inilalarawan ko kung ano ang gusto ko, sinusuri ang ginawa ni Claude Code, at nagsasabi ng mga bagay tulad ng "kailangan ng mas maraming glow ang hover state" o "parang mali ang spacing."
Paghahambing: Magrequote ang design agency ng 8-12 linggo at $10,000+ para sa scope na ito. At kailangan ko pa ring i-implement ang Figma files nila nang mag-isa.
---
Ano ang Natutuhan Ko
1. Hindi na ako developer—creative director na ako. Si Claude Code ang sumulat ng bawat linya ng code. Nagpapasya lang ako tungkol sa taste. "Masyadong mabagal ang animation na iyon." "Kailangan ng mas maraming glow ang cyan sa dark mode." "Gawing mas prominente ang hero stats." Fundamentally different na skill ito mula sa coding.
2. Modularize muna. Ang unang instinct ni Claude Code ay hatiin ang codebase sa logical files bago gumawa ng visual changes. Mas madali ang bawat susunod na pagbabago dahil sa foundation na ito.
3. Nag-compound ang design systems. Pagkatapos magkaroon ng TRANSMISSION tokens, bawat bagong component ay pagsasama-sama lang ng existing variables. 45 minuto lang ang products page dahil nandiyan na ang system.
4. Ang frontend-design plugin ang pagkakaiba. Ang regular na AI-generated CSS ay mukhang "AI slop"—generic, safe, nakakalimutan. Ang frontend-design plugin ay nag-iisip tungkol sa typography pairings, color theory, spatial composition. Kaya hindi mukhang AI-generated ito.
5. I-ship nang incremental. 40 commits, hindi 1. Bawat piraso ay nag-live nang handa na. Hinawakan ni Claude Code ang git workflow—staging, committing, pushing, paggawa ng PRs.
---
Subukan Mo Ito
Kung ang personal site mo ay "okay na" mula 2021:
1. I-install ang Claude Code na may `frontend-design` plugin
2. Ilarawan ang vibe na gusto mo (ang akin: "retro-futuristic, analog meets digital")
3. Simulan sa architecture — modularize bago gawing maganda
4. Buuin ang design system — tokens, typography, colors
5. Tapos buuin ang mga pages — bawat isa ay gumagamit ng system na ginawa mo
6. I-deploy nang madalas — huwag hintayin ang "tapos na"
Ang pinakamahirap na bahagi ay hindi ang teknolohiya. Ang pagpapasya kung ano ang gusto mong *pakiramdam* ng site mo.
Pagkaalam mo niyon, ang natitira ay conversation na lang.
Update: Ang aral tungkol sa taste over implementation ay naging mas malinaw pa noong nagsimula akong gumawa ng native iOS app nang hindi marunong ng Swift. Nag-scaffold si Claude ng 7,568 linya ng code sa isang gabi — pero ang "creative director" na trabaho ng pagpapaganda? Iyon ay talagang human pa rin.
Kailan ka huling nagrebuild ng isang bagay na matagal mo nang pinapaliban? Ano ang nag-push sa iyo para magsimula — at ano ang pakiramdam noong natapos ito?
Maraming salamat,
Chandler
---
*Nagbubuo pa rin, nagshi-ship pa rin, nag-eenjoy pa rin ng bánh mì.*
---
