Claude Code cho Designer — Mô tả Figma bằng lời, Claude build ra HTML pixel-perfect

Bạn vừa dựng xong một màn hình đẹp trong Figma. Màu chuẩn, spacing chuẩn, animation trong đầu bạn đã chạy sẵn rồi. Rồi bạn gửi cho dev. Hai tuần sau nhận về một trang lệch 8px, màu nhạt hơn design, và cái hover mà bạn tưởng tượng thì… không có. Bạn ngồi ghi 14 comment. Sprint sau sửa được một nửa.

Mình gặp cảnh này suốt trong 16 năm làm marketing và làm việc với đội design. Vấn đề không phải dev tệ — mà là khoảng cách dịch thuật giữa "ý đồ thiết kế" và "code". Và bây giờ, cái khoảng cách đó bạn tự bịt được, không cần biết code.

Bài này dành cho designer, UI/UX, hoặc người làm sản phẩm không viết code nhưng muốn tự biến design thành trang web thật chạy được. Mình sẽ chỉ cách mô tả Figma bằng lời để Claude Code build ra HTML/CSS gần như pixel-perfect, kèm 3 case thật, 5 prompt "magic" bạn copy dùng ngay, và 3 lỗi hay mắc khi ra lệnh.

Claude Code là gì — và không phải là gì

Đây là chỗ hay nhầm, nên mình định nghĩa rõ trước:

• Claude Code: một công cụ chạy trong terminal (cửa sổ dòng lệnh) trên máy bạn. Nó đọc/sửa file trong thư mục dự án và viết code trực tiếp. Bạn ra lệnh bằng tiếng Việt, nó tạo ra file .html, .css, .js thật.
• Claude Cowork: bản làm việc theo kiểu "đồng nghiệp trong không gian dự án", thiên về task nghiệp vụ, ít đụng terminal.
• Claude (chat trên web/app): hộp chat thường. Trả lời, viết text, không tự tạo/sửa file trong máy bạn.

Với designer, Claude Code là cái bạn cần — vì nó sinh ra file web thật để mở trên trình duyệt và deploy. Bạn không cần thuộc câu lệnh nào; chỉ cần biết mô tả cái mình thấy trong đầu cho rõ.

Nói cho gọn: bạn là art director, Claude là dev ngồi cạnh làm ngay. Bạn chỉ bằng lời, review bằng mắt, sửa bằng lời.

Cách mô tả Figma bằng lời để Claude không đoán bừa

Claude build tốt hay tệ phụ thuộc 80% vào cách bạn mô tả. Dev cần spec; Claude cũng vậy. Đừng nói "làm cái hero đẹp đẹp" — nó sẽ tự bịa. Hãy đưa con số cụ thể lấy thẳng từ Figma.

Bốn thứ luôn phải nói:

1. Layout: bố cục dọc/ngang, mấy cột, canh giữa hay canh trái, max-width bao nhiêu px.
2. Spacing: khoảng cách giữa các khối (padding, gap) — đọc đúng số trong panel Figma.
3. Màu + font: mã hex chính xác, tên font, cỡ chữ (px), độ đậm (weight).
4. Trạng thái: hover, click, mobile trông ra sao.

Cách nhanh nhất: trong Figma, click vào element rồi đọc panel bên phải (Fill = màu, Typography = font/size, Auto layout = spacing). Copy y nguyên các số đó vào prompt.

3 case study có thịt

Case 1 — Landing page campaign cho một brand F&B

Bối cảnh: Một bạn designer freelance có file Figma landing page khuyến mãi, nhưng dev bận, campaign chạy sau 3 ngày. Bạn ấy chưa từng viết HTML.

Quy trình 5 bước:

1. Mở terminal trong thư mục trống, gõ claude để khởi động.
2. Dán prompt mô tả section hero (đọc số từ Figma — xem prompt đầy đủ ở dưới).
3. Xem file HTML Claude tạo ra bằng cách mở trên trình duyệt, so với Figma.
4. Sửa bằng lời: "nút CTA đang nhạt hơn design, đổi thành #FF5A1F, bo góc 12px".
5. Làm tiếp từng section (features, pricing, footer) theo cùng cách.

Output: Một trang một cột, canh giữa, chạy được cả desktop lẫn mobile, deploy lên Cloudflare Pages miễn phí. Từ Figma tới live: một buổi chiều.

Bài học:

• Làm từng section một, đừng bắt Claude build cả trang trong một prompt — dễ sai và khó sửa.
• Luôn dán mã hex chính xác; nếu nói "màu cam" thì mỗi lần ra một sắc cam khác.
• So sánh cạnh nhau (Figma bên trái, trình duyệt bên phải) để bắt lỗi nhanh.

Case 2 — Sửa layout mobile cho một trang portfolio

Bối cảnh: Bạn có sẵn trang portfolio đẹp trên desktop nhưng vào điện thoại thì chữ tràn, ảnh đè lên nhau. Bạn không biết responsive CSS là gì.

Quy trình 5 bước:

1. Đưa file HTML đang có vào thư mục, mở claude trong đó.
2. Chụp màn hình lỗi trên điện thoại (hoặc mô tả rõ: "ở màn hình dưới 480px, grid 3 cột đang tràn").
3. Ra lệnh cho Claude "chỉ sửa responsive, giữ nguyên desktop".
4. Mở lại bằng chế độ Responsive của trình duyệt (F12 → biểu tượng điện thoại) để kiểm.
5. Tinh chỉnh từng breakpoint cho tới khi gọn.

Output: Trên máy tính giữ nguyên; xuống mobile grid tự xuống 1 cột, chữ co lại vừa, không còn tràn. Không đụng gì tới phần desktop vốn đang đẹp.

Bài học:

• Câu thần chú "giữ nguyên desktop, chỉ sửa mobile" cực quan trọng — không có nó, Claude dễ chỉnh luôn cả phần bạn đang ưng.
• Ảnh chụp màn hình lỗi giá trị hơn 10 câu mô tả. Claude đọc được ảnh.
• Test trên đúng khung màn hình bạn quan tâm (375px cho iPhone chẳng hạn).

Case 3 — Prototype có animation để pitch

Bối cảnh: Team sản phẩm cần một prototype bấm được để demo cho sếp, thay vì click-through tĩnh trong Figma. Cần vài animation micro-interaction cho "có hồn".

Quy trình 5 bước:

1. Export các frame chính từ Figma làm tham chiếu bố cục.
2. Mô tả flow: màn A → bấm nút → trượt sang màn B.
3. Yêu cầu animation cụ thể: kiểu chuyển, thời lượng, easing (mô tả bằng lời, xem prompt dưới).
4. Bấm thử từng nút, thấy khựng hay giật thì mô tả lại.
5. Deploy link để gửi cho sếp bấm thử trên điện thoại.

Output: Một prototype web bấm được, có hiệu ứng chuyển mượt, mở bằng link không cần cài Figma. Sếp bấm trực tiếp trên điện thoại trong buổi họp.

Bài học:

• Mô tả animation bằng cảm giác + thời lượng: "trượt lên nhẹ, khoảng 0.3 giây, chậm dần ở cuối" — Claude dịch được sang CSS.
• Đừng tham 10 animation một lúc; thêm từng cái, thấy ổn mới thêm tiếp.
• Prototype không cần code sạch để pitch — cần chạy được và trông thật.

5 prompt "magic" designer dùng để chỉ đạo Claude

Đây là phần bạn copy dùng ngay. Thay số trong [ngoặc vuông] bằng số của bạn.

Prompt 1 — Build một section chuẩn Figma

Build cho tôi section hero của landing page, xuất ra 1 file index.html
với CSS inline trong thẻ <style>. Thông số lấy từ Figma:

- Layout: 1 cột, canh giữa, max-width 1140px, padding trên dưới 96px
- Nền: màu #0F172A
- Tiêu đề: font Inter, 56px, weight 700, màu #FFFFFF, canh giữa
- Mô tả dưới tiêu đề: 18px, weight 400, màu #94A3B8, cách tiêu đề 20px
- Nút CTA: chữ "Bắt đầu ngay", nền #FF5A1F, chữ trắng 16px weight 600,
  padding 16px 32px, bo góc 12px, cách mô tả 32px
- Font Inter lấy từ Google Fonts

Chỉ dùng HTML + CSS thuần, không dùng framework.

Output mẫu: Claude tạo file index.html mở lên là ra đúng hero — nền xanh đậm, tiêu đề trắng to canh giữa, nút cam bo góc. Vì bạn đưa hex và px chính xác nên nó khớp Figma gần như tuyệt đối, không phải "cam chung chung".

Prompt 2 — "Làm màu và font đúng y Figma"

Dùng khi Claude build xong nhưng màu/chữ lệch:

Trang đang chưa khớp design. Sửa lại đúng các giá trị sau, KHÔNG đổi gì khác:
- Tất cả tiêu đề H2: đổi sang màu #1E293B, font-weight 600
- Màu nền section pricing: đổi từ trắng sang #F8FAFC
- Nút CTA: màu hiện tại quá nhạt, đổi chính xác sang #FF5A1F
- Khoảng cách giữa các card: đổi gap thành 24px

Output mẫu: Claude chỉ chỉnh đúng 4 chỗ đó, phần còn lại giữ nguyên. Trước: tiêu đề xám nhạt, nút cam nhợt. Sau: tiêu đề đậm chuẩn, nút cam đúng brand.

Prompt 3 — Thêm animation kiểu này

Thêm animation cho các card trong section features:
- Khi cuộn tới, card hiện lên bằng cách trượt nhẹ từ dưới lên (khoảng 20px)
  kèm mờ dần thành rõ, thời lượng 0.4 giây, chậm dần ở cuối (ease-out)
- Các card xuất hiện lần lượt, mỗi card trễ hơn card trước 0.1 giây
- Khi rê chuột vào card: nhấc lên nhẹ 4px và đổ bóng mềm hơn, chuyển trong 0.2 giây
Dùng CSS thuần, không thêm thư viện.

Output mẫu: Cuộn xuống, các card lần lượt trồi lên mượt như hiệu ứng bạn hình dung; hover thì nhấc nhẹ. Mẹo: mô tả animation bằng hướng + khoảng cách + thời lượng + easing thay vì "làm cho đẹp".

Prompt 4 — Fix layout mobile

Trang này desktop đang đẹp, GIỮ NGUYÊN phần desktop.
Chỉ sửa responsive cho mobile:
- Dưới 768px: grid 3 cột đổi thành 1 cột, gap 16px
- Dưới 768px: tiêu đề hero giảm từ 56px xuống 32px
- Dưới 768px: padding hai bên giảm còn 20px để không dính mép màn hình
- Kiểm tra không có phần tử nào tràn ngang gây cuộn ngang

Output mẫu: Desktop y nguyên, mobile gọn gàng một cột, chữ vừa màn hình, hết tràn ngang. Câu "GIỮ NGUYÊN desktop" là thứ giữ bạn khỏi hỏng phần đang ưng.

Prompt 5 — Bắt Claude hỏi lại trước khi làm

Dùng cho việc lớn (cả trang, cả prototype):

Tôi muốn build một trang bảng giá 3 gói. Trước khi viết code,
hãy hỏi tôi 4-5 câu về màu sắc, font, nội dung từng gói và
gói nào cần làm nổi bật. Sau khi tôi trả lời mới bắt đầu code.

Output mẫu: Thay vì lao vào đoán, Claude hỏi: "Ba gói tên gì? Gói nào highlight? Màu chủ đạo? Font?". Bạn trả lời xong nó mới build — kết quả sát ý hơn nhiều so với để nó tự bịa.

Sai lầm thường gặp

Lỗi 1 — Mô tả bằng cảm giác thay vì con số. Nói "màu xanh dịu, chữ hơi to, cách nhau thoáng thoáng" thì mỗi lần Claude ra một kiểu. Cách tránh: mở Figma, đọc panel bên phải, dán thẳng hex + px + weight vào prompt. Con số là ngôn ngữ chung giữa bạn và Claude.

Lỗi 2 — Bắt build cả trang trong một prompt. Prompt dài 2 trang mô tả 6 section một lúc thường ra kết quả sai lung tung, và khi sai bạn không biết sửa từ đâu. Cách tránh: build từng section, duyệt xong section này mới sang section kế. Sai ở đâu sửa ngay ở đó.

Lỗi 3 — Không khóa phần đang đúng khi sửa. Bạn nhờ sửa mobile, Claude "tiện tay" chỉnh luôn màu desktop bạn đang ưng. Cách tránh: luôn thêm câu giới hạn — "chỉ sửa X, giữ nguyên mọi thứ khác" hoặc "không đổi phần desktop". Ra lệnh có ranh giới rõ thì kết quả ổn định.

Takeaway

Bạn không cần học code để biến design thành sản phẩm thật. Cái bạn cần là mô tả rõ bằng con số những gì mình đã thấy trong Figma, làm từng phần một, review bằng mắt và sửa bằng lời. Claude Code lo phần cú pháp; bạn giữ vai trò art director như xưa nay.

Bắt đầu nhỏ: chọn một section trong file Figma bạn đang có, dùng Prompt 1 ở trên, đổi số cho khớp design của bạn, và xem kết quả mở trên trình duyệt. Một section chạy được sẽ cho bạn tự tin làm cả trang.

Nếu bạn muốn hiểu bức tranh lớn hơn về cách làm việc cùng Claude như một đồng nghiệp trong cả dự án, đọc tiếp bài Claude Cowork — Hướng dẫn.

Steve Phan (10/04/2026)