Php while ( have_posts() ) : the_post(); ? Tags — thêm custom field “dat_tags” trong WP hoặc hardcode Tiêu đề

Php the_title(); ?

Intro — dùng excerpt hoặc custom field “dat_intro” php if ( has_excerpt() ) : ?

Php the_excerpt(); ?

Php endif; ? Nội dung chính Chữ ký — tự động thêm cuối mọi bài Bài liên quan Function datCopy(btn, id) { var text = document.getElementById(id).innerText; navigator.clipboard.writeText(text).then(function() { btn.innerText = ‘✅ Đã copy!’; setTimeout(function(){ btn.innerText = ‘Copy prompt’; }, 1500); }); } php get_footer(); ?

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