Khắc phục “bệnh mù thẩm mỹ” của AI khi code web với Taste Skill

Chào anh em, chào mừng trở lại với blog hnitmedia.com. Dạo gần đây ngoài việc cày cuốc với đống code PHP, framework Laravel quen thuộc hay lân la học thêm Next.js, chắc hẳn anh em cũng hay nhờ mấy con AI như Gemini, Claude hay ChatGPT gõ code hộ đúng không?

Nhưng anh em có để ý không? Dù ra lệnh kiểu gì thì mấy con AI này hay đẻ ra mấy cái UI trông rất “công nghiệp”, nhạt nhẽo và rập khuôn. Đa phần là canh giữa cơ bản, dùng màu mặc định của HTML/CSS hay Tailwind, thiếu điểm nhấn nghệ thuật. Dân trong nghề hay gọi hiện tượng này là “AI slop” (rác giao diện AI).

Để giải quyết triệt để vụ này, mình vừa lụm được một bí kíp khá hay mang tên Taste Skill. Bài viết này mình sẽ hướng dẫn chi tiết cách dùng nó để bắt AI “có gu” hơn, giúp anh em sinh ra những giao diện đạt chuẩn xịn sò ngay từ lần chạy đầu tiên nhé!

1. Taste Skill là cái gì?

Nói một cách dễ hiểu cho anh em dev tụi mình, Taste Skill giống như một “bộ lọc thẩm mỹ” mã nguồn mở dành riêng cho AI Agent. Nó không phải là một thư viện chứa sẵn đống component đâu. Thay vào đó, nó đóng vai trò như một ông thiết kế trưởng (Art Director) đứng cạnh chỉ việc cho AI. Điểm hay là nó không phụ thuộc vào framework, nên anh em build bằng Next.js, Vue hay đơn thuần là HTML/CSS thuần thì nó cũng cân hết.

Nó điều khiển AI thông qua 3 thông số chính (như 3 cái nút vặn chỉnh thông số vậy):

• Design variance (Độ biến thiên bố cục – Thang 1-10): Điểm thấp thì AI sẽ trả về giao diện đối xứng, gọn gàng, an toàn. Càng tăng lên, nó càng dám chơi lớn với bố cục bất đối xứng, lưới phức tạp, xài viền dày dặn (Neo-Brutalism) hoặc các kiểu phá cách như giao diện trên Awwwards.
• Motion intensity (Cường độ chuyển động – Thang 1-10): Điểm thấp thì chỉ có ba cái hiệu ứng hover đổi màu nhạt nhẽo. Kéo lên mức cao, AI sẽ tự giác nhúng thêm Framer Motion hoặc GSAP để làm animation cuộn mượt mà, tạo hiệu ứng vật lý xịn sò.
• Visual density (Mật độ hình ảnh – Thang 1-10): Điểm thấp thì web sẽ có nhiều khoảng trắng (whitespace) thoáng đãng, hợp làm web nghệ thuật. Còn đẩy lên cao thì nội dung sẽ nén sát lại, cực kỳ phù hợp khi anh em cần code một cái Dashboard nhét cả đống data mà không bị rối mắt.

2. Cài đặt vào project như thế nào?

Là dân IT cơ bản thì anh em cứ mở terminal ở thư mục gốc của project rồi gõ một dòng lệnh này cho nhanh:

npx skills add design-taste-frontend

npx skills add design-taste-frontend

Chạy xong, bộ cài sẽ tự đẻ ra một thư mục chứa file skills/taste-skill/SKILL.md. Trong cái file markdown này là cả một “hệ tư tưởng” chống lại sự nhàm chán để con AI đọc và “thấm” trước khi nó bắt đầu gõ code.

Típ nhỏ cho anh em thích tự vọc vạch Docker: Nếu anh em triển khai máy chủ chạy LLM nội bộ (self-hosted) để làm luồng tự động hóa, hãy nhớ dùng container_name thay vì localhost để các container giao tiếp mượt mà nhé. Ví dụ container chạy AI tên là llm_engine thì gọi port là http://llm_engine:11434.

3. Cách ép AI code “có gu” hơn bằng Prompt

Có cài Taste Skill rồi, thay vì quăng cho AI mấy câu chung chung như “Ê làm cho tôi cái trang chủ”, anh em phải yêu cầu nó đọc file quy tắc kia trước. Cấu trúc prompt anh em có thể dùng thử (copy ném vào Cursor hoặc Claude đều ngon):

Hãy đọc kỹ tệp quy tắc tại skills/taste-skill/SKILL.md. Nhiệm vụ: Dựng giao diện trang Dashboard quản lý công việc. Yêu cầu: Phong cách Neo-Brutalism, tập trung tối ưu diện tích hiển thị thông tin thay vì màu mè bóng bẩy. Thiết lập thông số dựa trên Taste Skill như sau:

• DESIGN_VARIANCE: 8 (Phá vỡ lưới thông thường, dùng viền dày)
• MOTION_INTENSITY: 2 (Animation ít thôi, chuyển cảnh nhanh gọn)
• VISUAL_DENSITY: 8 (Hiển thị nhiều data trên một màn hình) Hãy sử dụng Tailwind CSS v4 và Next.js. Viết code đầy đủ, cấm cắt xén hoặc để lại ghi chú kiểu // TODO.

4. Trị dứt điểm “bệnh lười” của AI

Anh em code chung với LLM chắc cay nhất cái cảnh AI đang code ngon trớn tự dưng ném lại dòng // TODO: Tự code tiếp phần này.

Tin vui là dự án này có đính kèm một kỹ năng cực hay gọi là full-output-enforcement. Thả cái này vào, nó sẽ bắt con AI phải tính toán số lượng tính năng cần làm rồi mới nhả code, đồng thời cấm tiệt việc dùng comment rút gọn. Kết hợp với cái Taste Skill ở trên, kết quả anh em nhận được là một cục code chuẩn chỉnh, cứ thế copy dán vào file là chạy rầm rầm.

Kết luận

Taste Skill thực sự là một bước chuyển mình hay ho cho dân công nghệ tụi mình. Nó thay đổi cách chúng ta làm việc với AI: bớt đi những dòng prompt mông lung và chuyển sang quản lý AI bằng bộ thông số kỹ thuật (SOP). Bằng cách này, chúng ta giành lại quyền kiểm soát thiết kế từ tay cỗ máy, biến nó thành một “thực tập sinh” biết nghe lời và có mắt thẩm mỹ.

Anh em hãy thử áp dụng vào project sắp tới xem kết quả thế nào nhé. Cảm ơn anh em đã theo dõi bài viết trên hnitmedia.com, hẹn gặp lại ở các tuts tiếp theo!