我喺食早餐嗰陣完成咗幾年嚟最大規模嘅網站redesign
我用 AI 喺 3 日內重建咗成個網站——唔係當 coding 助手，而係當我嘅實際 developer。我做決定；Claude Code 寫咗 28,000 行 code。
禮拜六朝早 8:47。我喺食越式燒豬包（Banh Mi Heo Quay）。而我啱啱 deploy 咗我個人網站自 2021 年以來最全面嘅 redesign 嘅最後一部分。
五年。 呢個就係我幾耐冇對我嘅網站做過任何實質性嘅嘢。當然，我改過啲文案，加過篇 blog。但設計？架構？整體體驗？自疫情真正結束之前就冇搞過。
今朝，我完成咗 TRANSMISSION design system——一次完整嘅視覺翻新，包括新嘅 typography、色彩調色盤、動畫同一個高端產品頁。但呢個只係一個 3 日衝刺嘅最終章，呢個衝刺改變咗所有嘢。
數字：
- 3 日內 40 個 commit
- 加咗 28,129 行 code
- 4,950 行新 CSS
- 11 個 CSS 檔案（由 1 個增加到）
- 完整嘅 dark mode 系統
- Mobile-first responsive 一切
- 自訂產品頁面連真實截圖
總時間：3 日內幾個鐘。第一日就 36 個 commit。今朝最後衝刺：食早餐嗰陣 30 分鐘。
冇 design agency。冇 Figma mockup。冇幾個月嘅 timeline。只有我同 Claude Code。:D
呢度有樣嘢我要講清楚： 我冇寫過一行 CSS。我冇寫 PHP。我冇手動行 deployment 指令。Claude Code 做咗 100% 嘅 implementation——設計、code、git commit、deployment。我只係做決定。「多啲 glow。」「嗰個字體唔啱。」「令啲 card 更高端。」
呢個就係 2026 年 AI 輔助開發真正嘅樣子。
---
起點：自 2021 年以來被放棄
俾我坦白講我嘅起點。
我個 site 喺 2026 年 1 月 1 日：
- 一個 CSS 檔案，700 行意粉 code
- Poppins 字體用喺所有嘢（個「我冇真正考慮 typography」嘅選擇）
- 冇 design system — 顏色到處 hardcode
- 基本 dark mode 有一半頁面都壞嘅
- 產品頁面：冇產品頁，成個 site 只有 blog
- Mobile 體驗嘅「responsive」程度就好似一套平價西裝「合身」咁
我一直太專注於正職、學習 Generative AI、然後 build STRAŦUM 同 DIALØGUE——我嘅兩個 AI 應用——以至於我嘅個人 site 變成咗「鞋匠嘅仔冇鞋著」。
每次有潛在客戶或合作夥伴嚟參觀，佢哋睇到嘅 site 好似喺大叫「2021 年打嚟話要返佢哋嘅 WordPress theme」。
---
點解係而家？點解用呢個方法？
2025 年尾發生咗兩件事：
第一，我 ship 咗 STRAŦUM 同 DIALØGUE。兩個 production AI 應用，喺保持日常工作（全球廣告 agency VP）嘅同時獨自 build。真正嘅用戶，真正嘅收入討論，真正嘅信譽。
我嘅個人 site 而家係實際產品嘅大門。佢需要匹配。
第二，我開始認真用 Claude Code。唔係當 chatbot。當開發環境。然後我發現咗改變一切嘅嘢：[frontend-design](https://github.com/anthropics/claude-plugins-official/tree/main/plugins/frontend-design) plugin。
呢個 plugin 唔淨係寫 CSS。佢思考設計。Typography 配對。色彩理論。空間構圖。呢個就係令 AI 生成嘅 code 唔會睇落似「AI 垃圾」嘅嘢。
我諗：如果我直接⋯⋯重建所有嘢呢？唔係 weekend hack。而係好好咁做。有真正嘅 design system。Claude Code 做重活嘅同時我做決定。
---
3 日衝刺：實際發生咗啲咩
第一日：大爆炸 — 36 個 Commit
我冇打算一日做 36 個 commit。但一開始就停唔到。
初始設定，備份咗現有 theme，開始 CSS 模組化。
重建咗成個 CSS 架構。嗰個 700 行嘅檔案變成：
```
css/
├── style.css # 只有 Design tokens
├── components.css # 按鈕、卡片、導航
├── homepage.css # Hero、產品、帖文區
├── about.css # About 頁面專用
├── blog.css # Blog archive
├── dark-mode.css # 完整 dark mode 系統
├── mobile-nav.css # 底部導航列
├── search.css # 搜尋 overlay
├── single-post.css # Blog 帖文 typography
└── products.css # 高端產品頁面
```
每個檔案有一個職責。每個檔案用 root 嘅 CSS 變數。唔使再喺 700 行入面搵點解一個按鈕係錯嘅顏色。:P
Dark mode 翻新。我嘅舊 dark mode 令人尷尬——文字消失、按鈕冇對比度。我由零開始重建：
- 658 行專屬 dark mode CSS
- 正確嘅對比度比率（WCAG 合規）
- 移除咗所有 89 個 !important 宣告（係，89 個）
- 語義化嘅色彩 token 自動切換
到日尾：首頁 redesign 完成，About 頁面重建，mobile 底部導航加入，newsletter 整合完成。36 個 commit。
第二日：架構同基礎設施 — 9 個 Commit
第二日係關於令所有嘢可維護。
大規模重構： functions.php 由 724 行混亂變成 25 行乾淨嘅 include：
```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';
```
同時設定咗 Docker 做 local development，做咗 GCP security audit，同寫咗文檔。
第三日：TRANSMISSION 終章 — 早餐衝刺
呢度就係 frontend-design plugin 證明佢價值嘅地方。
我描述咗我想要嘅：「復古未來主義。模擬過去遇上數碼未來。高端但唔 corporate。技術性但溫暖。」然後我去買早餐。
當我帶住燒豬包返嚟，Claude Code 已經生成咗完整嘅 TRANSMISSION design system：
Typography：
- Playfair Display — 標題（優雅、editorial 風格）
- DM Sans — 內文（乾淨、易讀）
- JetBrains Mono — Code 同數據（技術信譽）
顏色：
```css
--color-cream: #fffbeb; /* 溫暖背景 */
--color-navy: #0f172a; /* 深色主色 */
--color-cyan: #22d3ee; /* 能量強調色 */
--color-amber: #f59e0b; /* 溫暖強調色 */
```
流體 Typography：
```css
--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
```
標題自動由 mobile 到 desktop 縮放。唔需要 media query。
然後我處理產品頁面。本來只有文字嘅頁面變成：
Hero Section：
- Terminal 風格嘅 eyebrow 文字
- Playfair 標題：「What I'm Building」
- Stats bar：2 Live Platforms | 99.7% Performance Gain | 92% Cost Reduction
- 帶微妙動畫嘅浮動幾何形狀
Product Card：
- 高端 navy 漸變背景
- 來自 production site 嘅真實截圖（唔係 mockup）
- 帶視窗控制點嘅瀏覽器 frame 容器
- 帶 cyan/amber glow 嘅 hover state
- 帶箭頭標記嘅功能列表
- 全寬 CTA
截圖本身就係一段旅程。Claude Code navigate 到我嘅 production site，捕捉頁面，由 1.8MB 優化到 229KB（細咗 86%），然後用 styled container 包裹佢哋。
---
技術棧：出乎意料嘅簡單
以下係我用嘅所有嘢：
Claude Code — 寫 code、行指令、維持 context 嘅 AI。呢個係一個可以存取我檔案系統、行 git 指令、同記得我哋昨日 build 咗啲咩嘅 AI。
frontend-design plugin — 「AI 生成嘅 CSS」同「睇落似設計師做嘅 CSS」之間嘅分別。Typography 理論、色彩關係、空間構圖內建。
Docker — Local WordPress 開發。一個 docker-compose up 就有一個 production 鏡像。
Chrome DevTools MCP — Claude Code 可以控制瀏覽器。「Check mobile dark mode」→ 實際嘅渲染頁面截圖。唔使切換分頁。
gcloud CLI：Claude 控制嘅
---
真實嘅部分
呢個唔係魔法。有啲嘢出錯：
巢狀資料夾混亂： Docker copy 造成咗 gambit-child/gambit-child/ 嘅結構。花咗 10 分鐘 debug。
Dark mode 文字消失： 某啲標題繼承咗錯誤嘅顏色。用更具體嘅 selector 修正。
圖片優化： 原始截圖好大。要學識 sips -Z 800 喺 macOS 可以唔用外部工具就調整圖片大小。
WordPress template 分配： 忘記咗新嘅產品頁面需要喺 WP admin 入面分配。經典錯誤。
分別在於 debug 只花咗幾分鐘，唔係幾個鐘。Claude Code 可以睇到渲染嘅頁面，識別問題，同喺同一個對話入面提出修正方案。
---
Before & After：數字
| 指標 | 2026 年 1 月 1 日 | 2026 年 1 月 10 日 |
|--------|-----------------|------------------|
| CSS 檔案 | 1 | 11 |
| CSS 行數 | ~700 | 4,950 |
| PHP 架構 | 單體式 | 模組化（6 個檔案）|
| Typography | 1 種字體 | 3 字體系統 |
| 色彩 Token | ~5 個 hardcode | 15+ 語義化 |
| Dark Mode | 壞嘅 | 658 行，WCAG 合規 |
| 產品頁面 | 純文字 | 高端連截圖 |
| Mobile Nav | 冇 | 底部列有 6 個動作 |
| 動畫 | 0 | 7（fadeInUp、float、glow 等）|
| 上次重大更新 | 2021 | 今日 |
總體改造： 40 個 commit，3 日內喺 123 個檔案加咗 28,129 行。全部由 Claude Code 寫。
---
呢個花咗幾多錢
錢： 設計 $0。Claude Code 訂閱。已有嘅 GCP hosting。
時間： 3 日經過。但我實際活躍嘅時間？大概總共 2-3 個鐘。我描述想要啲咩，Claude Code 就 build，然後我遲啲返嚟睇。今朝我開始最後嘅 redesign，去買早餐，返嚟確認——30 分鐘嘅實際注意力。
我嘅實際貢獻： 零行 code。我描述我想要啲咩，review Claude Code build 嘅嘢，然後講啲嘢好似「hover state 要多啲 glow」或者「spacing 唔啱」。
比較： 一間 design agency 會報 8-12 個星期同 $10,000+ 嘅呢個範圍。而且我仲要自己 implement 佢哋嘅 Figma 檔案。
---
我學到咗啲咩
1. 我唔再係 developer——我係 creative director。 Claude Code 寫咗每一行 code。我做品味決定。「嗰個動畫太慢。」「Dark mode 入面嗰個 cyan 要更多 glow。」「令 hero stats 更突出。」呢個係同 coding 根本唔同嘅技能。
2. 先模組化。 Claude Code 嘅第一直覺係喺做視覺改變之前將 codebase 分成邏輯檔案。之後嘅每一個改變都因為呢個基礎而更容易。
3. Design system 會複利增長。 一旦 TRANSMISSION token 存在，每個新 component 只係組合現有變數。產品頁面花咗 45 分鐘因為系統已經喺度。
4. frontend-design plugin 係關鍵分別。 一般 AI 生成嘅 CSS 睇落似「AI 垃圾」——generic、安全、平庸。frontend-design plugin 會思考 typography 配對、色彩理論、空間構圖。呢個就係點解呢個唔似 AI 生成。
5. 漸進式發布。 40 個 commit，唔係 1 個。每個部分準備好就 live。Claude Code 處理 git workflow——staging、commit、push、建立 PR。
---
自己試下
如果你嘅個人 site 自 2021 年以來都係「夠好」：
1. 安裝 Claude Code 加 frontend-design plugin
2. 描述你想要嘅感覺（我嘅：「復古未來主義，模擬遇上數碼」）
3. 由架構開始 — 先模組化再美化
4. Build design system — token、typography、顏色
5. 然後 build 頁面 — 每個都用你建立嘅系統
6. 經常 deploy — 唔好等「完成」
最難嘅部分唔係技術。係決定你想要你嘅 site 感覺點。
一旦你知道，其餘嘅就係對話。
更新： 呢個關於品味大過 implementation 嘅教訓喺我開始唔識 Swift 嘅情況下 build 原生 iOS app 嗰陣變得更加清晰。Claude 喺一個晚上搭建咗 7,568 行 code——但令佢感覺啱嘅「creative director」工作？呢個仲係完全人類嘅工作。
你上次重建一樣你拖延咗幾年嘅嘢係幾時？咩最終推動你開始——而完成嗰陣感覺點？
祝好，
Chandler
---
*仲喺度 build，仲喺度 ship，仲喺度享受嗰個燒豬包。*
---
