Dựng portfolio này 100% bằng Claude và VS Code

Đây là chính website bạn đang xem. Tôi muốn một portfolio song ngữ do mình tự dựng và tự sửa được, nên làm toàn bộ với Claude trong VS Code: từ moodboard, hệ thống thiết kế đến code và deploy. Không có dev, không dùng template.

VAI TRÒ

Designer & Builder

THỜI GIAN

1 tuần

ĐỘI NGŨ

1 người + Claude

KẾT QUẢ

Đã lên sóng

tại hailedes36.com

Bài toán

Các nền tảng dựng web kéo thả nhanh nhưng khó giữ một hệ thống thiết kế chặt, và khó viết song ngữ cho gọn. Tự code thì tôi là designer, không phải dev. Câu hỏi là: designer có thể tự đưa một website thật lên sóng không, nếu Claude viết code còn mình giữ vai trò ra quyết định thiết kế?

Quy trình

1. 1Nghiên cứu

   Lướt các portfolio và trang sản phẩm mình thích, ghi lại chúng làm tốt điều gì: bố cục, nhịp chữ, cách kể case study.
   Research
2. 2Ý tưởng

   Chụp màn hình những chỗ đáng học, gom thành moodboard trên Figma. Từ đó chốt hướng: nền trắng, chữ đen, đúng một màu nhấn magenta.
   Insight
3. 3Thiết kế và dựng

   Viết DESIGN.md làm nguồn sự thật, rồi cùng Claude trong VS Code dịch nó thành token CSS và dựng từng trang theo plan chia phase.
   Design
4. 4Lên sóng

   Mỗi phase xong là một commit lên GitHub. Vercel tự build và deploy, tên miền trỏ về hailedes36.com.
   Deploy

Giải pháp

Viết luật trước, để Claude viết code sau

Thay vì mô tả lại yêu cầu mỗi lần, tôi dồn mọi quyết định vào hai file: DESIGN.md cho thiết kế (màu, chữ, khoảng cách, chuyển động) và AGENTS.md cho quy ước code. Claude đọc hai file này ở đầu mỗi phiên, nên trang thứ mười vẫn cùng giọng với trang đầu tiên.

Chia nhỏ theo phase

Kế hoạch nằm ở plan/, mỗi phase là một lát cắt hoàn chỉnh chạy được: khung trống, hệ thống thiết kế, layout, nội dung, rồi từng trang. Làm hết một phase mới sang phase sau, nên lúc nào cũng có một bản chạy được để xem và sửa.

Git và Vercel thay cho bàn giao

Không có bước bàn giao cho dev. Code nằm trên GitHub, Vercel build lại sau mỗi lần push, nên sửa một dòng chữ cũng lên sóng sau vài phút.

Kết quả

Bài học

• Viết rõ luật quan trọng hơn viết prompt hay. Một DESIGN.md chặt giúp Claude làm đúng ngay lần đầu nhiều hơn mọi câu lệnh dài.
• Designer vẫn là người quyết định. Claude viết code nhanh, nhưng chọn bỏ gì, giữ gì, khi nào là đủ vẫn là việc của mình.
• Lên sóng sớm, sửa sau. Có bản chạy thật trên Vercel giúp thấy lỗi nhanh hơn ngồi chỉnh trong Figma.