Tôi Hoàn Thành Đợt Thiết Kế Lại Website Lớn Nhất Trong Nhiều Năm. Trong Lúc Ăn Sáng.
Tôi đã xây lại toàn bộ website trong 3 ngày bằng AI — không phải như trợ lý lập trình, mà là developer thực sự của tôi. Tôi ra quyết định; Claude Code viết 28.000 dòng code.
Lúc 8:47 sáng một ngày thứ Bảy. Tôi đang ăn bánh mì heo quay. Và tôi vừa deploy phần cuối cùng của đợt thiết kế lại toàn diện nhất mà trang web cá nhân của tôi từng trải qua kể từ năm 2021.
Năm năm. Đó là khoảng thời gian kể từ lần cuối tôi làm điều gì đó đáng kể với website. Đúng, tôi đã chỉnh sửa vài dòng copy ở đây, thêm bài blog ở kia. Nhưng thiết kế? Kiến trúc? Trải nghiệm tổng thể? Không đụng đến kể từ trước khi đại dịch thực sự kết thúc.
Sáng nay, tôi hoàn thành hệ thống thiết kế TRANSMISSION — một cuộc đại tu hoàn toàn về typography, bảng màu, animation, và trang sản phẩm cao cấp. Nhưng đó chỉ là màn kết của một sprint 3 ngày biến đổi mọi thứ.
Các con số:
- 40 commit trong 3 ngày
- 28.129 dòng code được thêm
- 4.950 dòng CSS mới
- 11 file CSS (tăng từ 1)
- Hệ thống dark mode hoàn chỉnh
- Mobile-first responsive toàn bộ
- Trang sản phẩm tùy chỉnh với ảnh chụp thực
Tổng thời gian cho toàn bộ đợt thiết kế lại: vài giờ trong 3 ngày. 36 commit riêng trong Ngày 1. Đợt push cuối hôm nay: 30 phút trong lúc ăn sáng.
Không agency thiết kế. Không mockup Figma. Không timeline nhiều tháng. Chỉ tôi và Claude Code. :D
Đây là điều tôi cần nói rõ: Tôi không viết một dòng CSS nào. Tôi không viết PHP. Tôi không chạy lệnh deploy thủ công. Claude Code làm 100% phần triển khai — thiết kế, code, git commit, deploy. Tôi chỉ ra quyết định. "Thêm glow." "Font đó chưa đúng." "Làm các card cao cấp hơn."
Đây là cách phát triển với sự hỗ trợ của AI thực sự trông như thế nào trong năm 2026.
---
Điểm Xuất Phát: Bị Bỏ Quên Từ 2021
Để tôi thành thật về nơi tôi bắt đầu.
Website của tôi ngày 1 tháng 1, 2026:
- Một file CSS với 700 dòng code rối như mì spaghetti
- Font Poppins cho mọi thứ (lựa chọn kiểu "tôi thực sự chưa nghĩ về typography")
- Không có hệ thống thiết kế — màu sắc hardcode khắp nơi
- Dark mode cơ bản bị lỗi trên nửa số trang
- Trang sản phẩm: Không có trang sản phẩm, toàn bộ site chỉ là blog.
- Trải nghiệm mobile kiểu "responsive" giống như một bộ suit rẻ tiền "vừa vặn"
Tôi quá tập trung vào công việc chính, học về Generative AI, và sau đó xây dựng STRAŦUM và DIALØGUE — hai ứng dụng AI của tôi — đến nỗi trang web cá nhân trở thành đứa con đi chân trần của ông thợ giày.
Mỗi lần khách hàng tiềm năng hay cộng tác viên ghé thăm, họ thấy một trang web kêu gào "năm 2021 gọi, họ muốn lại WordPress theme."
---
Tại Sao Bây Giờ? Và Tại Sao Cách Này?
Hai điều xảy ra vào cuối năm 2025:
Thứ nhất, tôi đã ship STRAŦUM và DIALØGUE. Hai ứng dụng AI production, xây dựng một mình trong khi giữ công việc toàn thời gian là VP tại một agency quảng cáo toàn cầu. Người dùng thực, thảo luận doanh thu thực, uy tín thực sự đang bị đặt cược.
Trang web cá nhân bây giờ là cửa trước dẫn đến các sản phẩm thực. Nó cần phải xứng.
Thứ hai, tôi bắt đầu sử dụng Claude Code nghiêm túc. Không phải như chatbot. Như một môi trường phát triển. Và tôi phát hiện ra thứ thay đổi mọi thứ: plugin `frontend-design`.
Plugin này không chỉ viết CSS. Nó *tư duy* về thiết kế. Ghép cặp typography. Lý thuyết màu sắc. Bố cục không gian. Đây là thứ ngăn code do AI tạo ra trông giống "AI slop."
Tôi nghĩ: nếu tôi chỉ... xây lại mọi thứ thì sao? Không phải hack cuối tuần. Mà đàng hoàng. Với hệ thống thiết kế thật. Với Claude Code làm phần nặng trong khi tôi ra quyết định.
---
Sprint 3 Ngày: Chuyện Gì Thực Sự Xảy Ra
Ngày 1: Vụ Nổ Lớn — 36 Commit
Tôi không định làm 36 commit trong một ngày. Nhưng khi bắt đầu, tôi không thể dừng.
Thiết lập ban đầu, sao lưu theme hiện tại, bắt đầu modular hóa CSS.
Xây dựng lại toàn bộ kiến trúc CSS. File 700 dòng đó trở thành:
```
css/
├── style.css # Design tokens only
├── 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
```
Mỗi file có một nhiệm vụ. Mỗi file dùng CSS variables từ root. Không còn phải lục tung 700 dòng để tìm tại sao một nút sai màu. :P
Đại tu dark mode. Dark mode cũ của tôi thật xấu hổ — text biến mất, nút không có contrast. Tôi xây lại từ đầu:
- 658 dòng CSS dark mode chuyên dụng
- Tỷ lệ contrast đúng chuẩn (tuân thủ WCAG)
- Loại bỏ tất cả 89 khai báo `!important` (vâng, 89 cái)
- Token màu ngữ nghĩa tự động chuyển đổi
Cuối ngày: Trang chủ thiết kế lại, trang About xây lại, mobile bottom nav được thêm, tích hợp newsletter xong. 36 commit.
Ngày 2: Kiến Trúc & Hạ Tầng — 9 Commit
Ngày 2 là về việc làm cho mọi thứ dễ bảo trì.
Đợt refactor lớn: `functions.php` từ 724 dòng hỗn loạn thành 25 dòng include gọn gàng:
```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';
```
Cũng thiết lập Docker cho phát triển local, thực hiện kiểm tra bảo mật GCP, và viết tài liệu.
Ngày 3: Màn Kết TRANSMISSION — Sprint Bữa Sáng
Đây là lúc plugin `frontend-design` chứng minh giá trị.
Tôi mô tả những gì tôi muốn: "Retro-futuristic. Quá khứ analog gặp tương lai kỹ thuật số. Cao cấp nhưng không doanh nghiệp. Kỹ thuật nhưng ấm áp." Rồi tôi đi mua bữa sáng.
Khi tôi quay lại với ổ bánh mì, Claude Code đã tạo ra hệ thống thiết kế TRANSMISSION hoàn chỉnh:
Typography:
- Playfair Display — Tiêu đề (thanh lịch, editorial)
- DM Sans — Nội dung (sạch sẽ, dễ đọc)
- JetBrains Mono — Code và dữ liệu (uy tín kỹ thuật)
Màu sắc:
```css
--color-cream: #fffbeb; /* Warm background */
--color-navy: #0f172a; /* Deep primary */
--color-cyan: #22d3ee; /* Energy accent */
--color-amber: #f59e0b; /* Warm accent */
```
Fluid Typography:
```css
--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
```
Tiêu đề tự động co giãn từ mobile đến desktop. Không cần media query.
Sau đó tôi xử lý trang sản phẩm. Trang chỉ có text trở thành:
Phần Hero:
- Text eyebrow kiểu terminal
- Tiêu đề Playfair: "What I'm Building"
- Thanh thống kê: 2 Live Platforms | 99.7% Performance Gain | 92% Cost Reduction
- Các hình học nổi với animation tinh tế
Thẻ Sản Phẩm:
- Nền gradient navy cao cấp
- Ảnh chụp thực từ các site production (không phải mockup)
- Container khung trình duyệt với các nút điều khiển cửa sổ
- Hover state với glow cyan/amber
- Danh sách tính năng với marker mũi tên
- CTA toàn chiều rộng
Riêng các ảnh chụp đã là một hành trình. Claude Code điều hướng đến các site production của tôi, chụp các trang, tối ưu từ 1.8MB xuống 229KB (nhỏ hơn 86%), và bọc chúng trong container được styled.
---
Stack Công Nghệ: Đơn Giản Bất Ngờ
Đây là mọi thứ tôi dùng:
Claude Code — AI viết code, chạy lệnh, và duy trì ngữ cảnh. Đây là AI có quyền truy cập filesystem, có thể chạy lệnh git, và nhớ những gì chúng tôi xây hôm qua.
Plugin frontend-design — Sự khác biệt giữa "CSS do AI tạo" và "CSS trông như được thiết kế." Lý thuyết typography, quan hệ màu sắc, bố cục không gian tích hợp sẵn.
Docker — Phát triển WordPress local. Một lệnh `docker-compose up` và tôi có bản sao production.
Chrome DevTools MCP — Claude Code có thể điều khiển trình duyệt. "Kiểm tra dark mode mobile" -> ảnh chụp thực của trang đã render. Không cần chuyển tab.
gcloud CLI: mà Claude điều khiển
---
Phần Thành Thật
Đây không phải phép thuật. Có lỗi xảy ra:
Hỗn loạn thư mục lồng nhau: Docker copy tạo cấu trúc `gambit-child/gambit-child/`. Mất 10 phút debug.
Text dark mode biến mất: Một số heading kế thừa màu sai. Sửa bằng cách dùng selector cụ thể hơn.
Tối ưu hình ảnh: Ảnh chụp thô rất lớn. Phải tìm hiểu rằng `sips -Z 800` trên macOS resize ảnh mà không cần công cụ ngoài.
Gán template WordPress: Quên trang sản phẩm mới cần được gán trong WP admin. Cổ điển.
Sự khác biệt là debug mất vài phút, không phải vài giờ. Claude Code có thể thấy trang đã render, xác định vấn đề, và đề xuất sửa trong cùng cuộc hội thoại.
---
Trước & Sau: Các Con Số
| Chỉ số | 1 Tháng 1, 2026 | 10 Tháng 1, 2026 |
|--------|-----------------|------------------|
| File CSS | 1 | 11 |
| Dòng CSS | ~700 | 4.950 |
| Kiến trúc PHP | Monolithic | Modular (6 file) |
| Typography | 1 font | Hệ thống 3 font |
| Color Token | ~5 hardcode | 15+ ngữ nghĩa |
| Dark Mode | Lỗi | 658 dòng, tuân thủ WCAG |
| Trang Sản Phẩm | Văn bản thuần | Cao cấp với ảnh chụp |
| Mobile Nav | Không có | Thanh dưới với 6 hành động |
| Animation | 0 | 7 (fadeInUp, float, glow, v.v.) |
| Cập Nhật Lớn Cuối | 2021 | Hôm nay |
Tổng biến đổi: 28.129 dòng thêm trên 123 file trong 40 commit qua 3 ngày. Tất cả do Claude Code viết.
---
Chi Phí
Tiền: $0 cho thiết kế. Đăng ký Claude Code. GCP hosting đã có sẵn.
Thời gian: 3 ngày trôi qua. Nhưng thời gian thực sự tôi làm? Có lẽ 2-3 giờ tổng cộng. Tôi mô tả những gì muốn, Claude Code xây, và tôi quay lại kiểm tra sau. Sáng nay tôi khởi động đợt thiết kế cuối, đi mua bữa sáng, và quay lại xác nhận — 30 phút chú ý thực sự.
Đóng góp thực sự của tôi: Không một dòng code. Tôi mô tả những gì muốn, xem lại những gì Claude Code xây, và nói những thứ như "hover state cần thêm glow" hoặc "khoảng cách đó chưa đúng."
So sánh: Một agency thiết kế sẽ báo giá 8-12 tuần và $10.000+ cho phạm vi này. Và tôi vẫn phải tự triển khai file Figma của họ.
---
Những Gì Tôi Học Được
1. Tôi không còn là developer nữa — tôi là giám đốc sáng tạo. Claude Code viết mọi dòng code. Tôi đưa ra quyết định về thẩm mỹ. "Animation đó quá chậm." "Cyan cần thêm glow trong dark mode." "Làm phần hero stats nổi bật hơn." Đây là kỹ năng hoàn toàn khác so với lập trình.
2. Modular hóa trước. Bản năng đầu tiên của Claude Code là chia codebase thành các file logic trước khi thay đổi giao diện. Mọi thay đổi sau đó dễ hơn nhờ nền tảng này.
3. Hệ thống thiết kế tích lũy. Khi token TRANSMISSION đã tồn tại, mọi component mới chỉ là kết hợp các biến có sẵn. Trang sản phẩm mất 45 phút vì hệ thống đã ở đó.
4. Plugin frontend-design là sự khác biệt. CSS thông thường do AI tạo trông giống "AI slop" — chung chung, an toàn, dễ quên. Plugin frontend-design suy nghĩ về ghép cặp typography, lý thuyết màu sắc, bố cục không gian. Đó là lý do trang này không trông giống do AI tạo.
5. Ship từng phần. 40 commit, không phải 1. Mỗi phần được đưa lên khi sẵn sàng. Claude Code xử lý quy trình git — staging, commit, push, tạo PR.
---
Hãy Thử
Nếu trang web cá nhân của bạn đã "tạm được" từ 2021:
1. Cài Claude Code với plugin `frontend-design`
2. Mô tả vibe bạn muốn (của tôi: "retro-futuristic, analog gặp digital")
3. Bắt đầu với kiến trúc — modular hóa trước khi làm đẹp
4. Xây hệ thống thiết kế — token, typography, màu sắc
5. Rồi xây trang — mỗi trang dùng hệ thống bạn đã tạo
6. Deploy thường xuyên — đừng đợi "xong"
Phần khó nhất không phải công nghệ. Mà là quyết định bạn muốn trang web *cảm giác* như thế nào.
Khi bạn biết điều đó, phần còn lại là hội thoại.
Cập nhật: Bài học về thẩm mỹ hơn triển khai càng rõ ràng hơn khi tôi bắt đầu xây ứng dụng iOS native mà không biết Swift. Claude đã scaffold 7.568 dòng code trong một buổi tối — nhưng phần "giám đốc sáng tạo" để làm cho nó đúng cảm giác? Đó vẫn hoàn toàn là công việc của con người.
Lần cuối bạn xây lại thứ gì đó mà bạn đã trì hoãn nhiều năm là khi nào? Điều gì cuối cùng đã thúc đẩy bạn bắt đầu — và cảm giác ra sao khi hoàn thành?
Thân mến,
Chandler
---
*Vẫn đang xây, vẫn đang ship, vẫn đang thưởng thức ổ bánh mì.*
---
