Designer có cần tự viết được một trang web từ đầu không?

Không cần ngay. Mức tôi khuyên là đọc hiểu được HTML và CSS do AI viết, rồi tự sửa được những chỗ nhỏ như khoảng cách, màu, thứ tự phần tử. Viết từ đầu sẽ đến dần khi bạn sửa đủ nhiều.

Nên học HTML/CSS trước hay học JavaScript trước?

HTML và CSS trước. Phần lớn quyết định thiết kế nằm ở bố cục, khoảng cách, chữ và màu, tức là CSS. JavaScript cần khi bạn muốn hiểu tương tác và trạng thái, có thể học sau khi đã đọc CSS thoải mái.

Biết Figma auto layout thì học flexbox có nhanh hơn không?

Nhanh hơn nhiều. Auto layout gần như là flexbox có giao diện: hướng xếp, khoảng cách giữa phần tử, padding, căn lề, xuống dòng đều có thuộc tính CSS tương ứng. Bảng đối chiếu trong bài liệt kê từng cặp.

Có AI rồi thì designer học code để làm gì?

Để duyệt. AI viết nhanh và thường chạy được, nhưng nó không biết token nào bạn cấm, màu chữ nào trượt ngưỡng tương phản hay trạng thái nào bạn chưa vẽ. Đọc được code thì bạn bắt được những lỗi đó trước khi lên production.

Designer cần biết HTML/CSS đến mức nào trong thời AI?

Designer làm cùng AI cần đọc hiểu HTML và CSS, chưa cần viết giỏi. Bạn phải nhìn code AI sinh ra và biết bố cục co giãn ra sao, giá trị lấy từ token hay gõ cứng, trạng thái nào còn thiếu. Cần học HTML có nghĩa và năm khái niệm CSS: box model, flexbox và grid, position, biến CSS, responsive.

Tôi là Hai Le, UI/UX designer hơn 5 năm, viết được React, Tailwind và Next.js. Bài gốc Claude Code cho designer nói về quy trình làm việc với AI. Bài này trả lời câu hỏi đứng trước nó: cần biết bao nhiêu code để việc duyệt không thành bấm "chấp nhận" mù.

Có AI rồi, designer còn cần học code không?

Cần, nhưng mục đích đổi. Trước đây designer học code để tự dựng prototype hoặc nói chuyện được với dev. Bây giờ AI dựng được bản đầu trong vài phút, nên phần việc còn lại của bạn là duyệt bản đó.

Duyệt code giống duyệt một file Figma do người khác làm. Bạn không cần vẽ nhanh hơn họ, nhưng phải nhận ra frame nào dùng màu ngoài style, khoảng cách nào lệch lưới. Với code cũng vậy. Khi AI viết p-[13px] hay #9a9a9a vào component, chỉ người đọc được code mới thấy.

Trong repo của site này có một luật tôi viết ra sau khi đo tương phản: xám neutral-500 và neutral-400 không được dùng làm màu chữ, vì #9a9a9a trên nền trắng chỉ đạt 2.81:1. Ngưỡng WCAG cho chữ thường là 4.5:1. Một class như text-neutral-500 vẫn build, vẫn hiện chữ, trang vẫn chạy. Lỗi này chỉ lộ ra khi có người đọc dòng code và biết vì sao nó sai.

Designer nên biết HTML/CSS ở mức nào?

Tôi chia làm ba mức. Mục tiêu hợp lý cho designer làm cùng AI là mức 2.

Mức	Bạn làm được	Đủ cho
1. Đọc	Nhìn class và thuộc tính, đoán được nó làm gì trên màn hình	Hỏi AI đúng câu, đọc diff cơ bản
2. Sửa	Đổi khoảng cách, màu, thứ tự, hướng xếp; thêm trạng thái hover hoặc focus	Duyệt và chỉnh code AI viết mà không phải nhờ dev
3. Viết	Dựng một component từ đầu, xử lý bố cục khó, viết tương tác	Tự làm sản phẩm nhỏ, dựng design system trong code

Những khái niệm HTML/CSS nào nên học trước?

Đây là lộ trình tối thiểu, theo thứ tự tôi khuyên. Mỗi mục kèm việc bạn làm được sau khi học.

HTML có nghĩa. Phân biệt button với a, nav, main, h1 đến h3, label đi với input. Học xong, bạn thấy ngay khi AI dùng div có sự kiện click thay cho nút thật, điều làm hỏng điều hướng bằng bàn phím và trình đọc màn hình.
Box model. Mỗi phần tử là một hộp gồm nội dung, padding, border và margin. Cần nhớ thêm box-sizing: border-box: khi bật, width tính luôn padding và border. Tailwind bật sẵn giá trị này cho mọi phần tử, nên một thẻ rộng 320px là 320px kể cả viền.
Flexbox và grid. Flexbox xếp phần tử theo một hàng hoặc một cột, grid xếp theo hai chiều. Trong repo của site này, gần như mọi thẻ, hàng tab, thanh công cụ đều dựng bằng một trong hai thứ này, nên đây là phần đáng đầu tư thời gian nhất.
Position. Năm giá trị static, relative, absolute, fixed, sticky. Quan trọng nhất là cặp relative ở khung cha và absolute ở phần tử con, dùng cho badge, nút đóng, lớp phủ trên ảnh.
Biến CSS (custom properties). Cú pháp --ten-bien và var(--ten-bien). Đây là nơi design token sống trong code. Bài design token là gì giải thích vì sao nên chia token thành ba lớp.
Responsive. Media query như @media (width >= 48rem), đơn vị tương đối (rem, %), và cách nghĩ mobile-first: viết cho màn hẹp trước, rồi thêm luật cho màn rộng.

Bạn có thể bỏ qua animation phức tạp, CSS-in-JS, preprocessor và cấu hình build ở giai đoạn này. AI xử lý chúng ổn, và chúng ít khi là chỗ quyết định thiết kế bị sai.

Khái niệm Figma nào tương ứng với CSS?

Nếu bạn đã dùng Figma thành thạo, bạn biết nhiều CSS hơn mình nghĩ. Bảng dưới là các cặp tôi dùng khi giải thích cho designer mới. Một số cặp chỉ gần đúng, tôi ghi chú ở cột cuối.

Trong Figma	Trong CSS	Ghi chú
Auto layout ngang / dọc	`display: flex` với `flex-direction: row` / `column`	Gần như một đối một
Spacing between items	`gap`
Padding của auto layout	`padding`
Alignment (căn 9 ô)	`justify-content`, `align-items`	Trục chính và trục phụ đổi theo hướng xếp
Hug contents	Kích thước theo nội dung (`width: auto` hoặc `fit-content`)	Mặc định của phần lớn phần tử
Fill container	`flex: 1` trong hàng, hoặc `align-self: stretch`
Fixed width	`width: 320px`
Wrap	`flex-wrap: wrap`
Ignore auto layout (tên cũ: absolute position)	`position: absolute`, khung cha `position: relative`	Figma mô tả nó giống absolute của CSS
Constraints (left, right, center, scale)	`position: absolute` kèm `left` / `right` / `top` / `bottom`, hoặc kích thước theo `%`	Chỉ gần đúng; constraints không áp được cho con trong auto layout
Layout grid	`display: grid` với `grid-template-columns`	Layout grid trong Figma chỉ là đường gióng, grid CSS thực sự xếp phần tử
Variables	Custom properties (`--color-primary`)
Variable modes (sáng / tối)	Ghi đè biến trong `.dark` hoặc trong `@media (prefers-color-scheme: dark)`
Text style	Một class gom `font-size`, `line-height`, `letter-spacing`	Site này dùng class `type-*`
Clip content	`overflow: hidden`
Corner radius	`border-radius`
Component và variant	Component React, variant thành prop	Ví dụ `variant="outline"`, `size="sm"`

Hai cặp đầu là lý do tôi khuyên học auto layout thật chắc trước khi học flexbox. Bài auto layout trong Figma giải thích từng thiết lập Hug, Fill, Fixed, còn học Figma từ số 0 dành hẳn một ngày cho phần này.

AI làm tốt việc gì, và việc gì designer vẫn phải tự kiểm?

Đây là phân chia tôi rút ra khi làm site này. Cột trái là những việc tôi giao cho AI mà gần như không phải sửa. Cột phải là những việc tôi luôn tự kiểm.

AI làm tốt	Designer vẫn phải tự kiểm
Dựng khung HTML và bố cục flex/grid từ một mô tả hoặc ảnh chụp	Giá trị có lấy từ token không, hay là số và mã màu gõ cứng
Chuyển một frame thành component theo đúng framework đang dùng	Tương phản chữ, nhất là chữ xám trên nền xám
Giải thích từng dòng code khi được hỏi	Trạng thái chưa vẽ: hover, focus bàn phím, disabled, rỗng, lỗi, đang tải
Viết lại một đoạn CSS theo cách khác (ví dụ chuyển flex sang grid)	Màn hẹp 360px, chữ tiếng Việt dài, nội dung dài hơn bản mẫu
Tìm lỗi cú pháp và lỗi build	Dark mode: màu có lật đúng bậc không
Làm theo luật đã viết sẵn trong file hướng dẫn	Luật nào chưa có trong file hướng dẫn, và luật nào đã cũ

Cột phải có một điểm chung: AI không biết ý định thiết kế mà bạn chưa viết ra. Trong repo này, mọi ý định quan trọng nằm trong DESIGN.md và AGENTS.md. Bài DESIGN.md là gì hướng dẫn cách viết file đó.

Tôi kiểm code AI viết như thế nào?

Một đoạn code thật từ thẻ danh sách của Blog và Thư viện trên site này, rút gọn:

<Link className="group flex rounded-md border border-border hover:bg-muted">
  <p className="type-body-md text-foreground">{title}</p>
  <p className="type-caption text-muted-foreground">{description}</p>
</Link>

Khi đọc, tôi hỏi bốn câu theo thứ tự:

Bố cục là gì? flex nghĩa là một hàng ngang, tương đương auto layout ngang.
Màu và chữ lấy từ đâu? border-border, text-foreground, text-muted-foreground đều là token. type-body-md và type-caption là text style của hệ thống. Đoạn này không có giá trị gõ cứng nào.
Hover làm gì? hover:bg-muted đổi nền sang mảng xám. Site này cấm box-shadow, nên thẻ không được "nhấc lên" khi hover. Nếu AI thêm hover:shadow-lg, tôi xoá.
Thiếu trạng thái nào? Bản đầy đủ trong repo có thêm focus-visible:bg-muted, để người dùng bàn phím thấy cùng phản hồi như người dùng chuột.

Bốn câu này dùng được cho mọi component. Nếu bạn chưa đọc được Tailwind, bài Tailwind cho designer giải thích cách đọc chuỗi class như trên.

Muốn AI tự kiểm trước khi bạn kiểm, hãy viết các câu hỏi trên thành luật trong CLAUDE.md. Bài viết prompt cho Claude có mẫu câu lệnh cụ thể.

Học theo thứ tự nào để không bỏ giữa chừng?

Tôi khuyên học trên dự án thật thay vì làm bài tập rời. Một trình tự gọn:

Bước	Việc	Kết quả
1	Nhờ AI dựng một trang đơn giản từ một frame Figma bạn đã có	Có code thật của chính thiết kế mình để đọc
2	Mở công cụ DevTools của trình duyệt, bấm vào từng phần tử, xem box model	Nhìn thấy padding, margin, border bằng màu
3	Đổi tay các giá trị `gap`, `padding`, `flex-direction`, xem trang thay đổi	Nối được thuộc tính CSS với thao tác trong Figma
4	Thu hẹp cửa sổ xuống cỡ điện thoại, ghi lại chỗ vỡ, nhờ AI sửa từng chỗ	Hiểu media query qua lỗi có thật
5	Chuyển mọi màu gõ cứng thành biến CSS	Hiểu token trong code

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

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

Claude Code cho designer: quy trình sáu bước từ Figma ra trang chạy được.
Tailwind cho designer: đọc chuỗi class AI viết ra.
Figma MCP và Claude Code: cho AI đọc thẳng biến và component từ Figma.
Case study Joyme: hệ thống hơn 50 component, ví dụ cho loại hệ thống cần người đọc được cả Figma lẫn code để giữ nhất quán.

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

Nguồn

MDN, Introduction to the CSS box model
MDN, Flexbox và Grids
MDN, position
MDN, Using CSS custom properties
MDN, Responsive design
MDN, HTML: a good basis for accessibility
W3C, Understanding SC 1.4.3: Contrast (Minimum)
Figma, Guide to auto layout
Tailwind CSS, Preflight: đặt box-sizing: border-box cho mọi phần tử

Các định nghĩa CSS và cách Figma mô tả auto layout được kiểm lại theo tài liệu trên ngày 04/10/2026. Đoạn code và tỉ lệ tương phản lấy trực tiếp từ repo của site này cùng ngày.