Tôi đã dùng Claude Code Design để làm website mà không cần thuê developer
Hôm nay tôi sẽ kể cho bạn nghe chuyện xảy ra thật, không phải case study được làm đẹp để PR. Tôi có một file Design System cho deaitinh.com — bảng màu, typography, spacing, component style — và tôi muốn nó thành code HTML/CSS chạy được, đúng từng pixel. Thay vì ngồi tự gõ hoặc tìm developer, tôi thử giao hết cho Claude Code Design. Kết quả khiến tôi phải ngồi lại và viết bài này ngay trong ngày.
Claude Code Design là gì — giải thích cho người không biết code
Đây là phiên bản đặc biệt của Claude, được tối ưu để làm việc với code và file thiết kế. Điểm khác biệt lớn nhất so với Claude thông thường là nó không chỉ trả lời — nó tạo ra file thật, chạy được, tải về được.
Nói nôm na: bạn mô tả muốn gì, upload ảnh mockup hoặc file spec, nó viết code. Không phải code mẫu để tham khảo — mà code dán thẳng vào WordPress là chạy.
Quy trình tôi đã làm — từng bước thực tế
Bước 1: Chuẩn bị nguyên liệu
Tôi upload lên Claude Code Design hai thứ: file Design System của deaitinh.com và ảnh mockup trang chủ. Không cần giải thích dài dòng. Tôi chỉ nói: “Đây là Design System và mockup của tôi. Claude đọc và hiểu context đi.”
Bước 2: Ra lệnh bằng tiếng Việt bình thường
Câu lệnh tôi dùng nguyên văn:
“Nhìn vào ảnh mockup tôi upload. Viết HTML/CSS cho phần Hero section, đúng màu theo design system, font Fraunces + DM Sans, responsive mobile-first. Không dùng framework.”
Không có từ kỹ thuật phức tạp. Không cần biết “responsive” nghĩa là gì ở mức sâu — chỉ cần biết mình muốn gì.
Bước 3: Claude làm việc — tôi ngồi uống cà phê
Claude đọc ảnh, đọc file, rồi viết ra toàn bộ code. Màu sắc đúng hex, font đúng tên, spacing đúng số. Tôi không sửa một dòng nào ở lần đầu tiên.
Bước 4: Tinh chỉnh bằng ngôn ngữ tự nhiên
Tôi chỉ nói: “Đổi nền hero sang màu kem #F6ECD2, tăng padding section lên 80px, thêm hover animation cho button.” Claude sửa ngay, không hỏi lại.
Những gì Claude Code Design làm được — và không làm được
✅ Làm được: Đọc ảnh mockup → sinh code · Viết component HTML/CSS thuần · Tạo file PHP template WordPress · Xuất nhiều kích thước · Giải thích từng dòng code theo yêu cầu
❌ Không làm được: Render video · Upload trực tiếp lên WordPress · Tự động deploy · Tạo ảnh từ đầu (dùng Midjourney/Ideogram cho việc này)
Tiết kiệm được bao nhiêu?
Tôi ước tính: một developer freelance sẽ mất 2-3 ngày làm Hero section đúng design system, giá khoảng 3-5 triệu đồng. Claude Code Design làm xong trong 45 phút, giá Claude Pro là 500 nghìn/tháng dùng không giới hạn.
Nhưng con số không phải điểm quan trọng nhất. Điều tôi trân trọng hơn là: tôi không phải giải thích design system cho developer, không phải chờ 3 lần revise, không phải ngồi họp. Tôi ra lệnh, tôi nhận kết quả, tôi tinh chỉnh tức thì.
Prompt bạn có thể dùng ngay
Hãy đóng vai trò là “Hoàng Nhật Mai – Founder Để AI Tính” và viết một bài blog về chủ đề: Dùng Claude Code Design để làm website không cần developer. Yêu cầu: – Xưng “tôi”, giọng văn chuyên nghiệp, thực chiến, không hoa mỹ – Hướng tới: marketer, PR, content creator không biết code – Có quy trình từng bước cụ thể – Có phần so sánh tiết kiệm chi phí thực tế – Dài khoảng 1200-1500 từ – Chèn chữ ký chuẩn của Hoàng Nhật Mai ở cuối bàiCopy prompt
Hoàng Nhật Mai
Hướng dẫn chi tiết từ A-Z cách sửa mọi lỗi thường gặp của Veo3 trên Google Lab Flow: mất tiếng, Read more
AMD đang tập trung toàn lực vào lĩnh vực AI với chiến lược thâu tóm nhiều công ty nhằm nâng Read more
Test Tool AI và AI Automation ngày càng phổ biến đối với người mới bắt đầu. Tuy nhiên, hiểu rõ Read more
Đội ngũ Sydney phát triển mô hình AI nhận diện suy nghĩ từ sóng não mở ra hướng mới cho Read more
