Thật ra, UX (User Experience) – trải nghiệm người đọc – là một phạm trù cần nghiên cứu rất sâu. Nhưng UI (User Interface) – phần nhìn – thì lại dễ giải quyết hơn rất nhiều.
Chỉ cần đẹp, gọn gàng, đúng tinh thần thương hiệu là bài viết đã khác biệt ngay lập tức.
Chúng ta thường hay mắc sai lầm là chỉ chăm chăm viết “Content chay”. Nhưng thực tế phũ phàng là: Một bài viết tốt nhưng trình bày cẩu thả… thì dù nội dung có chất đến đâu, người đọc vẫn rất dễ lướt qua mà chẳng để lại ấn tượng gì.
Lúc đó mới thấy: không phải cứ viết hay là đủ.
Khi UI được chăm chút, bài viết bỗng nhiên “sáng” lên. Sáng theo đúng nghĩa — sáng trong mắt người đọc. Nó biến bài viết từ một khối văn bản khô khan thành một “trải nghiệm nhỏ” – nơi người đọc cảm nhận được sự chỉn chu cả về phần nhìn lẫn phần đọc.
Và cái hay ở chỗ: Bạn không cần là một lập trình viên. Chỉ với vài câu lệnh (Prompt) dưới đây, bạn đã có thể tạo ra một bộ CSS đẹp, chuẩn ngành nghề và đúng cá tính thương hiệu của mình.
🚀 Prompt CSS “Thần Thánh” Cho Website
Hãy copy nguyên văn đoạn prompt dưới đây, điền thông tin của bạn vào các ô [...] và gửi cho AI (Gemini, ChatGPT, Claude…).
👇 Copy Prompt Này:
Bạn là senior frontend developer, chuyên tối ưu CSS cho WordPress/Flatsome. Mục tiêu: Tạo một đoạn CSS cực đẹp, nhẹ, hiện đại cho khu vực NỘI DUNG BÀI VIẾT của website sau: - Loại website: [mô tả website, ví dụ: blog dạy tiếng Nhật cho người đi làm, phong cách trẻ trung – rõ ràng] - Màu chủ đạo (primary): [#MÃ_MÀU_CHỦ_ĐẠO] - Màu phụ (accent): [#MÃ_MÀU_PHỤ hoặc để bạn tự đề xuất] YÊU CẦU CHUNG: 1. Tất cả font-size phải dùng đơn vị **px** (KHÔNG dùng rem/em). 2. Danh sách lồng nhau (ul/ol) phải hiển thị đúng, không mất bullet/number, không sai indent. 3. CSS sạch, nhẹ, không reset toàn trang, không dùng !important nếu không thực sự cần. 4. Chỉ áp dụng trong phạm vi: `.entry-content` và `.entry-summary`. ------------------------------------------------ 1. BẢNG MÀU (CSS VARIABLES) ------------------------------------------------ - Dựa trên màu chủ đạo và loại website, hãy đề xuất một bảng màu gồm: - Màu chữ chính (body) - Màu heading - Màu link + link hover - Màu nền nhạt (dùng cho blockquote, chip, zebra row…) - Màu border - Màu header bảng (table head) - Màu bullet list cấp 1 & cấp 2 - Màu nền & viền cho code block - Khai báo các màu này bằng CSS variables trong `:root` hoặc trong `.entry-content`. ------------------------------------------------ 2. CSS CHO CÁC THÀNH PHẦN NỘI DUNG ------------------------------------------------ Viết CSS cho các thành phần sau, chỉ dùng selector trong `.entry-content` và `.entry-summary`: A. Heading (h2, h3, h4) - Thiết kế kiểu heading **phù hợp với loại website** (nghiêm túc, học thuật, trẻ trung, vui vẻ… tuỳ theo mô tả đầu bài). - Đảm bảo: - h2 > h3 > h4 về kích thước (ví dụ gợi ý: h2 khoảng 26–32px, h3 khoảng 20–26px, h4 khoảng 16–20px – tất cả dùng px). - Phân cấp thị giác rõ ràng (size, weight, màu, khoảng cách). - Bạn có thể linh hoạt chọn: - underline, highlight bar, border-left, background chip… miễn là **nhẹ, dễ đọc, hợp tông website**. - Đừng cố định 1 kiểu (ví dụ: không bắt buộc h2 luôn underline, h3 luôn border-left); hãy chọn kiểu phù hợp với website được mô tả. B. Paragraph & Link - `p`: màu chữ, line-height, margin trên/dưới dễ đọc. - `a`: màu brand, underline (có thể dotted), hover đổi sang accent hoặc màu đậm hơn. C. Danh sách (ul, ol, li) – chú ý list lồng nhau - Mức 1: - `ul` có thể bỏ bullet mặc định và dùng bullet custom (tròn/viền) theo màu thương hiệu. - `ol` dùng số (decimal) bình thường. - Mức 2 trở đi (ul/ol bên trong li): - Indent nhỏ hơn một chút so với cấp 1. - Bullet/số nhỏ hơn hoặc màu nhạt hơn. - Không được làm mất số thứ tự của `ol`. - Dùng margin/indent bằng **px**, không rem/em. D. Blockquote - Tạo blockquote dễ đọc: - Viền trái hoặc nền nhạt theo màu brand. - Padding thoáng (16–22px). - Có thể thêm icon/dấu quote bằng ::before nếu muốn, nhưng phải nhẹ. E. Table - Style cho: - `table`, `thead`, `tbody`, `th`, `td`, `caption`. - Yêu cầu: - Border-radius nhẹ, shadow rất nhẹ. - Header bảng dùng màu brand/gradient, chữ trắng. - Zebra row (odd/even) với nền nhạt. - Hover row đổi nền dịu, không chói. - Caption (nếu có) font nhỏ hơn nội dung. - Responsive: - Trên mobile, bảng cần có `overflow-x: auto;` để có thể cuộn ngang. F. Code & Pre - `code` (inline): - Nền nhạt, bo tròn nhẹ, padding ngang nhỏ, font monospace. - `pre` và `pre code`: - Nền tối hơn nền trang một chút, border mỏng màu brand hoặc accent. - Padding thoáng (18–22px). - Font monospace, font-size 12–14px (px). - `overflow-x: auto;` để code dài có thể cuộn ngang. ------------------------------------------------ 3. RESPONSIVE ------------------------------------------------ - Thêm một block `@media (max-width: 768px)`: - Giảm font-size heading (vẫn dùng px). - Điều chỉnh margin/indent của ul/ol cho gọn. - Đảm bảo table & pre có scroll ngang. ------------------------------------------------ 4. ĐẦU RA ------------------------------------------------ - Xuất duy nhất **CSS thuần** nằm trong Markdown code block . - Có thể dùng comment `/* ... */` trong CSS để chú thích từng nhóm (heading, list, blockquote, table, code…). Hãy bắt đầu bằng phần khai báo CSS variables cho bảng màu, sau đó lần lượt đến headings → paragraph/link → lists → blockquote → table → code/pre → responsive.
và đưa kết quả vào Custom CSS của wordpress là hiển thị được
🎨 Demo các giao diện bài viết trên các website
Lời kết
Đừng để công sức viết bài của bạn bị lãng phí chỉ vì giao diện nhàm chán. Hãy thử ngay prompt trên hoặc áp dụng một trong các mẫu CSS có sẵn. Bạn sẽ thấy bài viết của mình “lột xác” hoàn toàn, mang lại trải nghiệm đọc thú vị và giữ chân người xem lâu hơn.
Để lại một bình luận