Designer không biết code có dùng được Claude Code không?

Dùng được để bắt đầu, vì bạn ra lệnh bằng tiếng Việt hoặc tiếng Anh thường. Nhưng để kiểm được kết quả, bạn cần đọc hiểu HTML, CSS và cấu trúc một dự án ở mức cơ bản. Thiếu phần đó thì bạn chỉ nhận code mà không biết nó đúng hay sai.

Claude Code có miễn phí không?

Không. Theo tài liệu của Anthropic, Claude Code cần tài khoản Pro, Max, Team, Enterprise hoặc Console. Gói Claude miễn phí không có Claude Code.

Có bắt buộc phải nối Figma MCP mới dùng được Claude Code cho thiết kế không?

Không bắt buộc. Bạn có thể dán ảnh chụp màn hình vào Claude Code và mô tả bằng lời. Figma MCP giúp Claude đọc thẳng biến, component và bố cục từ file Figma nên kết quả bám thiết kế sát hơn.

Nên viết quy tắc thiết kế vào đâu để Claude Code làm theo?

Vào file CLAUDE.md ở gốc dự án, hoặc AGENTS.md rồi import từ CLAUDE.md. Tôi để chi tiết hệ thống trong DESIGN.md và token trong file CSS, còn CLAUDE.md chỉ chứa luật ngắn và đường dẫn tới hai nơi đó.

Claude Code cho designer: biến thiết kế Figma thành trang chạy được

Claude Code là công cụ lập trình bằng AI của Anthropic, chạy trong terminal, ứng dụng desktop hoặc trình soạn code. Với designer, nó đọc file Figma (qua Figma MCP) hoặc ảnh chụp màn hình, đọc quy tắc thiết kế bạn viết sẵn, rồi tạo và sửa code trong dự án thật. Bạn vẫn là người quyết định và duyệt từng thay đổi.

Bài này là bài gốc của cụm "code cho designer" trên blog. Tôi là Haile, UI/UX designer hơn 5 năm, biết React, Tailwind và Next.js. Site bạn đang đọc được dựng bằng Claude Code từ ngày 31/08/2026, nên phần lớn ví dụ dưới đây lấy từ chính repo này. Phần nào lấy từ tài liệu chính thức thì tôi ghi nguồn ở cuối bài.

Claude Code là gì và designer dùng nó vào việc gì?

Claude Code là một agent: bạn giao việc bằng câu chữ, nó tự đọc file trong thư mục dự án, chạy lệnh, viết code, rồi báo lại đã sửa gì. Khác với việc hỏi đáp trong khung chat, nó làm việc trực tiếp trên mã nguồn của bạn.

Với designer, tôi thấy nó có ích nhất ở bốn việc:

Dựng giao diện từ thiết kế. Đưa cho nó một frame Figma hoặc ảnh chụp, nó viết component bằng đúng framework bạn đang dùng.
Giữ hệ thống thiết kế nhất quán. Nếu bạn viết quy tắc rõ (chỉ dùng token, không hard-code màu), nó sẽ làm theo và nhắc lại quy tắc khi bạn quên.
Thử nhanh một ý tưởng tương tác. Hiệu ứng cuộn, trạng thái hover, chế độ tối: thử trên trình duyệt thật nhanh hơn dựng prototype trong Figma.
Viết tài liệu cho chính hệ thống. Bảng token, quy ước đặt tên, ghi chú bàn giao cho dev.

Nếu bạn chưa cài, bài cài đặt Claude Code đi từng bước cho người chưa mở terminal bao giờ.

Designer cần chuẩn bị gì trước khi bắt đầu?

Cần có	Vì sao	Ghi chú
Tài khoản Claude trả phí	Claude Code cần gói Pro, Max, Team, Enterprise hoặc Console	Gói miễn phí không có Claude Code
Terminal hoặc ứng dụng desktop	Nơi bạn trò chuyện với Claude Code	Không quen terminal thì dùng Claude Desktop
Một dự án web	Claude cần thư mục code để làm việc	Tôi dùng Next.js, Tailwind và shadcn/ui
File Figma đã dọn	Để Claude đọc được ý định thiết kế	Component, variable, auto layout, tên layer rõ
Git	Để xem lại và hoàn tác mọi thay đổi	Đây là lưới an toàn quan trọng nhất

Trên macOS, lệnh cài chính thức hiện tại là:

curl -fsSL https://claude.ai/install.sh | bash

Cài xong, mở thư mục dự án trong terminal rồi gõ claude để bắt đầu một phiên làm việc. Lần đầu nó sẽ mở trình duyệt để bạn đăng nhập.

Hãy dùng Git ngay từ ngày đầu. Claude Code sửa file thật trên máy bạn. Có Git thì mỗi lần nó làm sai, bạn chỉ cần xem lại thay đổi và quay về bản trước.

Làm sao để Claude hiểu design system của tôi?

Mỗi phiên Claude Code bắt đầu với bộ nhớ trống. Thứ duy nhất nó mang theo giữa các phiên là file hướng dẫn bạn viết sẵn, thường là CLAUDE.md ở gốc dự án. Theo tài liệu của Anthropic, file này được đọc lúc bắt đầu mỗi phiên. Lệnh /init có thể tạo một bản nháp đầu tiên cho bạn.

Trong repo này, tôi chia quy tắc thành ba tầng:

CLAUDE.md chỉ có một dòng @AGENTS.md. Cú pháp @ dùng để import file khác vào, nên công cụ AI khác đọc AGENTS.md cũng nhận được cùng một bộ luật.
AGENTS.md chứa luật ngắn: bảng màu, bậc chữ, cách dùng token, quy ước song ngữ, những gì đã làm và chưa làm.
DESIGN.md là nguồn sự thật đầy đủ về thiết kế, dài hơn 800 dòng: thang màu, cỡ chữ, khoảng cách, chuyển động, mô tả từng component. Token đã dịch sang CSS nằm ở app/globals.css.

Ngoài ra còn các file CLAUDE.md nhỏ trong thư mục con, ví dụ components/layout/CLAUDE.md mô tả chi tiết header và menu. Claude chỉ nạp chúng khi làm việc trong thư mục đó, nên bối cảnh chung không bị phình ra.

Một đoạn luật thật trong AGENTS.md của site này, viết lại ngắn:

- Bảng màu: nền trắng #ffffff, chữ đen #000000, thang xám trung tính,
  và đúng một màu sắc là magenta #FF009D.
- Mặc định dùng token semantic (background, foreground, muted, border).
- Không có box-shadow ở bất kỳ đâu. Chỉ dùng viền 1px hoặc nền bg-muted.
- Chữ magenta cỡ nhỏ hơn hoặc bằng 20px dùng text-primary-text (#be0074),
  vì #ff009d trên nền trắng chỉ đạt tương phản 3.66:1.

Dòng cuối cùng là ví dụ cho loại luật đáng viết nhất: luật có lý do. Khi Claude biết vì sao magenta gốc không được dùng cho chữ nhỏ, nó áp dụng đúng cả ở những chỗ tôi chưa nghĩ tới. Bài DESIGN.md là gì đi sâu vào cách viết file này.

Quy trình đưa một màn hình Figma thành trang chạy được gồm những bước nào?

Đây là quy trình tôi khuyên dùng. Phần dọn file Figma lấy theo hướng dẫn chính thức của Figma, phần còn lại là cách tôi làm việc với Claude Code trên repo này.

Dọn file Figma. Thứ gì lặp lại thì làm thành component. Màu, khoảng cách, bo góc, chữ đều gắn variable. Dùng auto layout để bố cục co giãn đúng ý. Đổi tên layer từ Frame1268 sang tên có nghĩa như CardContainer.
Nối Figma với Claude Code. Cài Figma MCP để Claude đọc được frame, variable và ảnh chụp từ file. Cách cài và giới hạn lượt gọi nằm ở bài Figma MCP và Claude Code.
Bật plan mode trước khi cho sửa code. Nhấn Shift+Tab cho tới khi thanh trạng thái hiện plan mode. Lúc này Claude chỉ đọc file và đề xuất kế hoạch, chưa sửa gì cho tới khi bạn duyệt. Tôi đọc kỹ kế hoạch xem nó định dùng token nào, tạo file mới ở đâu.
Làm từng phần nhỏ. Giao từng khối: header, thẻ, lưới. Hướng dẫn của Figma cũng khuyên chia màn hình nhỏ ra, vì vùng chọn quá lớn làm công cụ chậm và trả kết quả thiếu.
So với thiết kế trên trình duyệt thật. Chạy dev server, mở trang, đặt cạnh bản Figma. Kiểm ở cả màn hẹp, chế độ tối và khi bàn phím điều hướng.
Đọc diff rồi mới commit. Xem từng dòng Claude đổi. Thấy mã màu hex nằm trong component là dấu hiệu nó vừa bỏ qua token.

Không dùng Figma MCP vẫn làm được bước 2: kéo thả hoặc dán ảnh chụp màn hình vào Claude Code, kèm mô tả bố cục và tên token cần dùng. Kết quả kém chính xác hơn vì Claude phải đoán giá trị từ ảnh.

Tôi đã dựng site này bằng Claude Code như thế nào?

Repo bắt đầu từ Create Next App ngày 31/08/2026. Đến ngày viết bài có khoảng 80 commit, trong đó 57 commit có dòng đồng tác giả là Claude. Vài điều tôi học được:

Kế hoạch viết thành file, chia theo phase. Thư mục plan/ có một file tổng và các file phase-*.md, mỗi phase một việc: dựng khung, hệ thống thiết kế, layout, hạ tầng nội dung. Luật trong AGENTS.md là làm hết một phase mới sang phase sau. Khi mở phiên mới, tôi chỉ cần nói "làm Task 9.5" và Claude tự đọc file phase để biết việc.

Đổi hướng giữa chừng vẫn giữ được trật tự. Site khởi đầu là "Design Stash", một thư viện tham chiếu thiết kế. Ở Phase 9 tôi đổi hẳn sang portfolio cá nhân. Nhờ kế hoạch nằm trong file, Claude gỡ đúng những route cũ, viết lại phần mô tả trong AGENTS.md, và để lại ghi chú vì sao chúng bị xoá.

Có thứ làm hai lần rồi bỏ. Header từng co lại thành một "viên thuốc" nổi khi cuộn. Bản đầu theo dõi vị trí cuộn bằng React, bản sau chuyển sang CSS thuần với animation-timeline: scroll(). Cả hai đều giật trên máy yếu, nên tôi bỏ hẳn và ghi lý do vào components/layout/CLAUDE.md để lần sau không ai làm lại.

Lỗi tương tác chỉ lộ ra trên máy thật. Menu mobile từng mở thêm một dropdown chọn ngôn ngữ chồng lên chính nó, rất khó bấm trên cảm ứng. Claude dựng đúng như mô tả, nhưng mô tả của tôi sai. Cách sửa là nhúng thẳng phần chọn ngôn ngữ vào menu. Lỗi này tôi chỉ thấy khi cầm điện thoại thử.

Review theo đợt. Cuối Phase 9 có một commit sửa 11 vấn đề chéo nhau mà vòng review tìm ra. Claude viết nhanh, nên phần việc của tôi dịch sang đọc và quyết định.

Designer hay gặp lỗi gì khi để AI viết giao diện?

Lỗi	Dấu hiệu	Cách chặn
Hard-code giá trị	Mã hex, px lẻ nằm trong component	Viết luật "chỉ dùng token" vào `CLAUDE.md`, đọc diff trước khi commit
Giao diện trông chung chung	Gradient tím, bo góc to, đổ bóng khắp nơi	Mô tả hệ thống cụ thể; plugin `frontend-design` của Anthropic được viết cho đúng việc này
Vùng chọn quá lớn	Figma MCP chậm, code thiếu phần	Giao từng component hoặc từng khối
Bỏ qua tương phản	Chữ xám nhạt trên nền xám	Ghi ngưỡng tương phản và token chữ được phép dùng
Nhận code không đọc	Trang chạy nhưng không ai hiểu vì sao	Hỏi Claude giải thích từng file trước khi chấp nhận
Luật mâu thuẫn nhau	Lúc làm thế này, lúc làm thế khác	Rà lại các file hướng dẫn định kỳ, xoá luật cũ

Dòng cuối có trong tài liệu của Anthropic: nếu hai chỉ dẫn mâu thuẫn, Claude có thể chọn tuỳ ý một bên. Vì vậy khi tôi bỏ một quyết định (như hiệu ứng viên thuốc ở trên), tôi sửa luôn file hướng dẫn trong cùng commit.

Designer cần biết code đến mức nào để dùng Claude Code?

Bạn có thể bắt đầu mà không viết được dòng code nào. Nhưng để dùng lâu dài, tôi nghĩ cần đủ ba thứ:

Đọc được HTML và CSS, đặc biệt là flexbox và grid. Đây là auto layout của trình duyệt.
Hiểu cấu trúc thư mục của framework bạn dùng: trang nằm ở đâu, component nằm ở đâu.
Biết dùng Git ở mức cơ bản: xem thay đổi, commit, quay lại bản trước.

Phần còn lại bạn học dần qua việc hỏi Claude giải thích những gì nó vừa viết. Nếu bạn còn mới với Figma, bài học Figma từ số 0 là chỗ bắt đầu hợp hơn. Còn nếu bạn chỉ cần một prototype bấm được để kiểm ý tưởng, Figma Make có thể đủ, không cần mở terminal.

Khi nào nên dùng Claude Code, khi nào nên dùng công cụ khác?

Bạn cần	Công cụ hợp
Prototype nhanh để test với người dùng	Figma Make hoặc prototype trong Figma
Trang thật, chạy trên domain thật, sửa lâu dài	Claude Code trên một dự án có Git
Bàn giao một màn hình cho đội dev có sẵn codebase	Claude Code kết hợp Figma MCP, theo quy ước của đội
Hỏi nhanh một đoạn CSS	Claude trong ứng dụng chat là đủ

Tôi dùng Claude Code khi kết quả cần sống lâu và cần nhất quán. Một trang portfolio sửa mỗi tuần, một design system có nhiều người dùng chung, một tính năng sẽ lên production. Với ý tưởng dùng một lần, công cụ nhẹ hơn tiết kiệm thời gian hơn.

Nên đọc gì tiếp?

Cài đặt Claude Code: cài và chạy lệnh đầu tiên.
Figma MCP và Claude Code: lấy token và component từ Figma ra code.
DESIGN.md là gì: viết tài liệu thiết kế mà cả người và AI đọc được.
Case study Joyme: phiên bản đầu làm trong ba tháng, kèm hệ thống hơn 50 component, ví dụ cho loại hệ thống đáng viết thành quy tắc.

Nếu bạn đang tìm một designer vừa dựng được hệ thống vừa đọc được code, phần giới thiệu về tôi có kinh nghiệm và cách liên hệ.

Nguồn

Anthropic, Advanced setup: cài đặt và yêu cầu tài khoản Claude Code
Anthropic, How Claude remembers your project: CLAUDE.md, AGENTS.md, import
Anthropic, Common workflows: plan mode, làm việc với ảnh
Anthropic, Discover plugins: chợ plugin chính thức
Figma, Structure your Figma file for better code
Figma, Figma MCP server guide trên GitHub

Lệnh cài đặt, yêu cầu tài khoản và cách hoạt động của CLAUDE.md được kiểm lại theo tài liệu chính thức ngày 04/10/2026. Số commit đếm trực tiếp trong repo của site này cùng ngày.