Nơi tôi chia sẻ kiến thức từ công việc và những điều nhỏ trong cuộc sống.
Tailwind cho designer: đọc code AI viết ra mà không sợ
Cách đọc một chuỗi class Tailwind theo nhóm, bảng class thường gặp và CSS tương ứng, ý nghĩa của hover:, md:, dark:, token nằm ở đâu trong theme, và cách bắt AI dùng token thay vì giá trị gõ cứng. Ví dụ lấy từ code thật của site này.
Working· 2026-10-04
Cách viết prompt cho Claude: 6 mẫu cho dân thiết kế
Một prompt tốt có bối cảnh, việc cần làm, tài liệu và hình dạng kết quả. Bài này giải thích từng phần theo hướng dẫn của Anthropic, kèm sáu mẫu chép được cho việc thiết kế: tóm tắt phỏng vấn, microcopy, rà heuristic, brief thành checklist, đặt tên token và release note.
Working· 2026-10-04
Quay lại đọc sách giấy
Sau nhiều năm đọc trên điện thoại, tôi quay lại sách giấy. Đọc chậm hơn, ít hơn, nhưng nhớ lâu hơn. Vài điều tôi học được khi đổi thói quen đọc.
Living· 2026-10-03
Đi bộ để nghĩ
Những vấn đề tôi kẹt cả buổi trước màn hình thường được gỡ sau 30 phút đi bộ. Vài ghi chép về thói quen đi bộ không tai nghe, không mục tiêu.
Living· 2026-09-28
Một giờ đầu ngày không màn hình
Ba tháng tôi giữ giờ đầu tiên sau khi thức dậy không điện thoại, không laptop. Chuyện gì thay đổi, chỗ nào khó, và vì sao tôi vẫn giữ thói quen này.
Living· 2026-09-14
Design token là gì? Ba lớp raw, alias, semantic
Design token là một cặp tên và giá trị cho một quyết định thiết kế, dùng chung giữa Figma và code. Bài này giải thích ba lớp raw, alias, semantic, khác biệt với biến CSS, cách làm trong Figma Variables và Tailwind v4, kèm token thật của site này.
Working· 2026-08-18
Thang màu kiểu Radix: đánh số theo khoảng cách để dark mode tự đúng
Thang màu kiểu Radix đánh số bậc theo khoảng cách so với nền thay vì theo độ sáng. Bài này so sánh với cách đánh số của Tailwind, chỉ ra CSS thật của site này, và giải thích vì sao lớp token ngữ nghĩa không cần một dòng override nào cho dark mode.
Working· 2026-08-04
Font tiếng Việt cho UI: cách kiểm dấu trong 5 phút
Chọn font cho giao diện tiếng Việt bắt đầu từ ba phép kiểm: subset vietnamese trên Google Fonts, dấu thanh chồng dấu mũ ở cỡ 12–14px, và line-height đủ chỗ cho chữ hoa có dấu. Kèm bảng mười font phổ biến, chỉ ghi điều đã xác minh.
Working· 2026-07-21
Lưới 4px và 8px: vì sao đúng lưới mà layout vẫn lệch
Lưới 4px hay 8px giúp mọi khoảng cách là bội số của một đơn vị, nhưng không tự tạo ra nhịp. Bài này giải thích vì sao lưới 8px/4px phổ biến, rồi sửa một layout đúng lưới mà vẫn rối bằng ba bậc khoảng trắng, có code CSS trước và sau.
Working· 2026-07-09
Câu hỏi thường gặp về design token: 8 câu trả lời
Token có phải biến CSS không? Có cần Style Dictionary hay Tokens Studio không? Đặt tên thế nào, làm dark mode ra sao, giữ Figma và code khớp nhau bằng cách nào? Trả lời ngắn, kèm ví dụ từ token thật của site này.
Working· 2026-06-27
Dark mode trong design system: câu hỏi thường gặp về token và tương phản WCAG
Dark mode có cần thiết kế riêng không, tỉ lệ tương phản bao nhiêu là đạt WCAG AA, vì sao màu xám nhạt và màu thương hiệu hay trượt chuẩn. Trả lời bằng số đo thật và CSS thật của site này.
Working· 2026-06-12