Nhìn kiểu trang. Chép câu. Gửi cho AI.
Mỗi thẻ một công thức đã thử. Không phải file tải về. Cần AI của bạn — ChatGPT, Claude hoặc Cursor.
Thư viện phong cách
Bấm Chép, dán vào ô chat AI.
Newsprint
Academia
Bento
Editorial
Kính mờ
Brutalism
Dark tech
Aurora
Sticky-stack
Bảng điều khiển
Nguyên tắc thiết kế
Một bộ luật. Chép một lần, dán vào AI trước khi nhờ dựng trang.
Luật chung
Bố cục rõ
Xếp thứ gần nhau thành nhóm. Lưới thẳng thì trang phức tạp vẫn nhìn đơn.
- Một khoảng cách dùng xuyên suốt, đừng mỗi khối một kiểu.
- Thứ cùng việc thì đứng cạnh nhau.
- Khách nhìn phát biết chỗ nào là mục, chỗ nào là việc.
Cái quan trọng phải nổi
Một trang một việc chính. Chữ to, chữ đậm, màu đậm — để mắt rơi đúng chỗ.
- Tiêu đề, tiêu đề phụ và thân bài phải khác nhau rõ.
- Đừng để mọi dòng cùng cỡ, cùng đậm.
- Một trang sạch hơn một trang nhồi.
Giống nhau thì trông giống nhau
Nút cùng việc thì cùng hình. Khách khỏi phải học lại từng trang.
- Chọn một bộ chữ, một bộ màu, rồi giữ.
- Cùng chức năng thì cùng cách bấm.
- Ít kiểu hơn là sang hơn.
Chữ đọc được
Chữ thân bài đủ lớn, dòng không quá dài, tiếng Việt không bị cắt dấu.
- Tối đa hai hoặc ba font.
- Chữ bài ít nhất 16px, dòng thoáng.
- Một dòng khoảng 40–75 chữ, không kéo hết màn hình rộng.
Bấm là phải thấy
Khách bấm xong phải biết máy đã nhận. Đang chờ thì nói đang chờ.
- Nút có trạng thái chạm và đang bấm.
- Việc lâu thì có chữ đang làm.
- Hình theo việc, đừng trang trí suông.
Luôn có đường lui
Xóa hay trả tiền thì hỏi lại. Luôn có nút về hoặc hủy.
- Có hủy / quay lại ngay chỗ đang làm.
- Việc mất dữ liệu thì hỏi một lần.
- Chặn sai trước khi xảy ra còn hơn sửa sau.
Ai cũng đọc được
Chữ đủ tương phản. Bàn phím dùng được. Điện thoại bấm được.
- Chữ và nền tương phản rõ, tối thiểu khoảng 4.5:1.
- Tab đi hết được các nút.
- Vùng bấm trên điện thoại cao ít nhất 44px.
Vừa máy tính vừa điện thoại
Hết cột khi hẹp. Không cuộn ngang. Việc chính vẫn bấm được.
- Lưới chảy, không khóa một bề ngang.
- Chữ co theo màn hình, không tràn.
- Việc quan trọng nằm trong tầm ngón tay.
Hiện dần, đừng đổ hết
Việc dài thì chia bước. Mặc định chỉ hiện thứ cần ngay.
- Chia việc dài thành bước.
- Có dấu đang ở bước nào.
- Ẩn thứ chưa tới lúc.
Việc của khách là trên hết
Bỏ thứ không giúp họ xong việc. Ít hơn thì dễ dùng hơn.
- Giữ đúng việc phải làm.
- Bỏ gánh không cần.
- Trang xong việc còn hơn trang nhiều nút.
Khi chỉnh từng phần
Bắt đầu từ việc, không từ khung
Hỏi trang này để khách làm gì, rồi mới xếp chữ.
- Viết việc trước, xếp hình sau.
- Chi tiết để lúc cuối.
- Đừng trang trí khi việc chưa rõ.
- Cho trang một tính cách, rồi giới hạn lựa chọn.
Không phải thứ nào cũng quan trọng như nhau
Làm yếu chỗ phụ thì chỗ chính tự nổi. Đừng chữ xám trên nền màu.
- To chưa chắc là nổi — độ đậm và tương phản mới quyết.
- Bỏ nhãn nếu bản thân chữ đã nói đủ.
- Cân nặng chữ với khoảng trống.
Để trống trước, rồi mới thu
Đừng lấp hết màn hình. Một thang khoảng cách, dùng đều.
- Bắt đầu thoáng, rồi mới khít.
- Một bộ khoảng: 8–12–16–24–40.
- Khoảng mơ hồ giữa hai khối là lỗi.
Chữ có thang, có lề
Căn theo dòng chữ, không căn giữa mọi thứ. Độ giãn dòng theo cỡ chữ.
- Chọn 4–5 cỡ chữ rồi khóa.
- Dòng vừa đọc, không kéo hết hàng.
- Không phải link nào cũng cần màu khác.
Ít màu, đủ bậc
Một màu nhấn. Xám hơi ấm, không phải xám chết. Đừng chỉ dùng màu để báo lỗi.
- Chọn màu rồi pha sẵn các bậc.
- Xám hơi ngả theo màu chủ, đừng xám máy.
- Lỗi phải có chữ, không chỉ có màu.
Sâu do ánh sáng một phía
Bóng cùng một hướng. Phẳng cũng có lớp — chồng nhẹ là đủ.
- Một nguồn sáng tưởng tượng.
- Bóng để nói lớp, không để trang trí.
- Chồng khối tạo lớp, đừng viền hết mọi hộp.
Ảnh phải chịu được chữ đè
Ảnh rõ. Chữ trên ảnh luôn đọc được. Ảnh khách tải lên phải có nền dự phòng.
- Ảnh sắc, đúng việc.
- Chữ trên ảnh có nền hoặc bóng chữ đủ đọc.
- Ô ảnh trống thì có màu nền, đừng để vỡ khung.
Chạm cuối
Trang trống cũng phải nói được. Bớt viền. Nền có lý do.
- Làm đẹp nút mặc định của trình duyệt.
- Trạng thái chưa có dữ liệu phải có chữ.
- Bớt khung, thêm khoảng.