Tóm tắt nhanh:
Taste Skill là một framework mã nguồn mở giúp loại bỏ tình trạng AI sinh ra các giao diện chung chung (slop) bằng cách cung cấp cho AI agent những tiêu chuẩn thiết kế tinh tế. Thay vì cung cấp các đoạn code mẫu, Taste Skill tiêm một “bộ lọc thẩm mỹ” thông qua các tham số như độ biến thiên bố cục, cường độ chuyển động và mật độ hình ảnh, giúp công việc lập trình bằng AI (vibe coding) đạt chất lượng thương mại ngay từ lần chạy đầu tiên.
Trong làn sóng phát triển mạnh mẽ của các công cụ AI hỗ trợ lập trình như Cursor, Claude Code hay Github Copilot, phương pháp “vibe coding” đã thay đổi hoàn toàn cách chúng ta xây dựng phần mềm. Chỉ với một vài câu lệnh và ảnh chụp màn hình, một ứng dụng web có thể được dựng lên trong vài phút. Tuy nhiên, bất kỳ ai đã từng thực hiện dự án thực tế đều nhận ra một điểm nghẽn lớn: giao diện do AI tạo ra mặc định trông rất nhàm chán, thiếu sự tinh tế và mang nặng tính “công nghiệp”.
Các mô hình ngôn ngữ lớn (LLM) được huấn luyện trên một lượng khổng lồ các thư viện giao diện và mã nguồn mở. Hệ quả là khi yêu cầu thiết kế một trang web, AI thường có xu hướng an toàn, tạo ra các bố cục căn giữa cơ bản, sử dụng màu sắc mặc định của Tailwind CSS, và thiếu đi những điểm nhấn về hoạt ảnh hay kiểu chữ nghệ thuật. Đây chính là hiện tượng “AI slop” trong thiết kế giao diện.
Để giải quyết triệt để vấn đề này, dự án Taste Skill ra đời như một hệ thống tiêu chuẩn kỹ năng (skill system) dành riêng cho các AI agent. Nó không phải là một thư viện component chứa các viên gạch xây dựng sẵn. Nó đóng vai trò như một kiến trúc sư trưởng, hướng dẫn AI cách lắp ráp các đoạn code một cách có gu, có chủ đích và phù hợp với từng định hướng thương hiệu cụ thể.
Taste Skill là gì và cơ chế hoạt động ra sao?
Taste Skill cung cấp các tập lệnh được cấu trúc hóa chặt chẽ để thay đổi hành vi mặc định của AI. Nó hoạt động không phụ thuộc vào framework (framework agnostic), nghĩa là bạn có thể sử dụng nó để sinh code cho React, Next.js, Vue hay Svelte đều được.
Điểm đặc biệt nhất của Taste Skill nằm ở hệ thống “Dial” (các nút vặn điều chỉnh thông số), giúp người lập trình định lượng được các yếu tố chủ quan trong thiết kế. Hệ thống này bao gồm ba trục chính:
- Design variance (Độ biến thiên bố cục): Thang điểm từ 1 đến 10. Điểm thấp sẽ tạo ra các giao diện đối xứng, gọn gàng và truyền thống. Điểm cao thúc đẩy AI thử nghiệm các bố cục bất đối xứng, lưới phức tạp, phong cách Neo-Brutalism (với viền dày, đổ bóng cứng) hoặc các thiết kế mang tính thể nghiệm cao như Awwwards.
- Motion intensity (Cường độ chuyển động): Thang điểm từ 1 đến 10. Mức độ thấp chỉ giới hạn ở các hiệu ứng di chuột (hover) tinh tế. Ở mức độ cao, AI sẽ tích hợp các thư viện như Framer Motion hoặc GSAP để tạo ra hiệu ứng cuộn mượt mà, chuyển động vật lý và hoạt ảnh từ tính.
- Visual density (Mật độ hình ảnh): Thang điểm từ 1 đến 10. Điểm thấp phù hợp với các trang web nghệ thuật, không gian rộng rãi (air/whitespace). Điểm cao phù hợp cho các bảng điều khiển (dashboard) chuyên dụng, nơi cần hiển thị lượng lớn dữ liệu trong một khung hình mà không gây rối mắt.
Thông qua việc cung cấp các thông số này, bạn đang cung cấp cho AI một bộ quy tắc rõ ràng (Structured Context) thay vì để mô hình tự suy đoán dựa trên các lớp bộ nhớ lai (hybrid memory layers) cũ kỹ và thiếu nhất quán.
Hướng dẫn cài đặt Taste Skill vào quy trình phát triển
Việc tích hợp Taste Skill vào hệ thống quản lý mã nguồn của bạn vô cùng đơn giản. Nó được thiết kế để tương thích tốt với các môi trường làm việc cục bộ (self-hosted) và các hệ thống phát triển do người dùng hoàn toàn kiểm soát.
Cài đặt thông qua giao diện dòng lệnh (CLI)
Dự án cung cấp một công cụ CLI giúp bạn quét và kéo trực tiếp các skill mong muốn về thư mục dự án. Để bắt đầu, bạn mở terminal tại thư mục gốc của dự án web và chạy lệnh cài đặt:
npx skills add design-taste-frontendLệnh này sẽ tạo ra một thư mục chứa các tệp Markdown cấu trúc tiêu chuẩn trong dự án của bạn (thường là skills/taste-skill/SKILL.md). Tệp tin này chứa toàn bộ các quy tắc chống lại sự nhàm chán (anti-slop), các nguyên tắc về thị giác, và các tham số điều khiển giao diện mà AI cần đọc trước khi viết code. Mặc định, bộ cài sẽ tải về phiên bản Taste Skill mới nhất (hiện tại là v2 đang thử nghiệm những cải tiến vượt bậc so với v1).
Thiết lập môi trường tự quản lý với Docker
Đối với các hệ thống tự động hoá kinh doanh, nơi bạn muốn chạy các AI agent thông qua server nội bộ để đảm bảo quyền riêng tư dữ liệu, bạn có thể triển khai hệ thống agent kết hợp Taste Skill bằng Docker. Khi xây dựng các luồng làm việc giữa các agent (ví dụ n8n gọi đến một open-source LLM container), điều cực kỳ quan trọng là thiết lập mạng nội bộ chuẩn xác.
Bạn nên sử dụng tham số container_name cho việc giao tiếp giữa các dịch vụ thay vì dùng localhost. Việc dùng localhost trong môi trường Docker thường gây ra lỗi kết nối chéo giữa các container với nhau, vì localhost của container này không phải là localhost của container khác.
Dưới đây là một ví dụ về file docker-compose.yml định nghĩa kiến trúc cho một Mini Server phục vụ công việc AI nội bộ:
services:
agent-workspace:
container_name: workspace_cursor
image: node:20-alpine
working_dir: /app
volumes:
- ./project:/app
command: tail -f /dev/null
networks:
- ai_network
local-llm-api:
container_name: llm_engine
image: ollama/ollama:latest
volumes:
- ./ollama_data:/root/.ollama
ports:
- "11434:11434"
networks:
- ai_network
networks:
ai_network:
driver: bridge
Trong kiến trúc này, khi agent nằm trong workspace_cursor muốn gọi đến LLM để xử lý tệp quy tắc của Taste Skill, hệ thống sẽ sử dụng trực tiếp tên http://llm_engine:11434 thay vì http://localhost:11434. Thiết lập này giúp các dịch vụ độc lập có thể giao tiếp mượt mà, định hình nền tảng vững chắc để chạy các agent tự động hóa phức tạp.
Cách ứng dụng Taste Skill vào thực tế sinh code
Để tận dụng tối đa repo Taste Skill, bạn cần thay đổi cách viết prompt. Thay vì chỉ nói “Hãy viết cho tôi một trang chủ”, bạn cần yêu cầu agent đọc kỹ file SKILL.md và tuân thủ các thông số cụ thể. Sự kết hợp giữa quy trình chuẩn (SOP) và kỹ năng (Skills) chính là chìa khoá để mở ra sức mạnh của công cụ.
Quy trình tạo giao diện với phong cách cụ thể
Giả sử bạn đang muốn xây dựng một bảng điều khiển (dashboard) quản lý công việc và tương tác giữa con người với AI, với yêu cầu giao diện tối giản, mang hơi hướng Neo-Brutalism (đường viền dày dặn, đổ bóng rõ ràng, tông màu tương phản cao).
Bạn có thể cung cấp cho Cursor hoặc Claude Code đoạn prompt sau:
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 tổng quan quản lý công việc (Task Dashboard).
Yêu cầu phong cách: Neo-Brutalism, tập trung vào hiệu năng hiển thị thông tin thay vì các hiệu ứng bóng bẩy.
Thiết lập thông số thiết kế dựa trên Taste Skill:
- DESIGN_VARIANCE: 8 (Phá vỡ cấu trúc lưới thông thường, sử dụng border dày, thẻ thông tin có đổ bóng lệch rõ nét)
- MOTION_INTENSITY: 2 (Giữ chuyển động ở mức tối thiểu, chỉ dùng hover state cứng cáp, đổi màu nền ngay lập tức không cần transition mềm mại)
- VISUAL_DENSITY: 8 (Tối ưu không gian hiển thị, dạng cockpit, hiển thị nhiều dữ liệu trên một màn hình)
Hãy sử dụng Tailwind CSS v4 và Next.js App Router. Viết code đầy đủ, không cắt xén hoặc để lại ghi chú // TODO.
Bằng cách thiết lập thông số trực tiếp trong prompt, bạn buộc AI phải từ bỏ các mẫu thiết kế chung chung (slop) và tuân thủ nghiêm ngặt theo định hướng nghệ thuật của dự án. Agent sẽ hiểu rằng độ “Visual density” bằng 8 đồng nghĩa với việc không dùng các khoảng trắng (padding/margin) quá lớn làm lãng phí diện tích hiển thị, một đặc điểm sống còn cho các phần mềm công cụ.
Chiến lược vòng lặp kiểm duyệt với Taste Skill
Mặc dù Taste Skill trao cho AI khả năng quyết định tốt hơn về thẩm mỹ, các luồng công việc phức tạp vẫn cần sự kiểm soát của con người. Trong các quy trình tự động hóa tiếp thị hoặc xây dựng sản phẩm, bạn nên thiết kế agent sao cho chúng có điểm dừng để yêu cầu xác nhận.
Sau khi AI đọc Taste Skill và phác thảo khung giao diện (hoặc cấu trúc component), hãy yêu cầu nó in ra một bản báo cáo ngắn gọn về cách nó sẽ áp dụng các thông số trước khi thực sự viết hàng ngàn dòng code. Quy trình này giúp bạn tinh chỉnh lại các Dial kịp thời nếu AI hiểu sai ý đồ, đảm bảo chất lượng công việc luôn đi đúng hướng và tiết kiệm token xử lý.
Tối ưu hóa chất lượng mã nguồn nhờ kỹ năng cưỡng chế
Một tính năng ấn tượng khác nằm trong hệ sinh thái của dự án này là kỹ năng full-output-enforcement. Đây là kỹ năng được thiết kế để khắc phục triệt để thói quen lười biếng của các mô hình ngôn ngữ lớn. LLM thường có xu hướng bỏ lỡ các phần code dài và thay thế bằng các câu bình luận cắt xén nội dung.
Khi đưa kỹ năng này vào thư mục của bạn, nó sẽ ép agent phải đếm số lượng tính năng cần bàn giao trước khi viết, đồng thời cấm sử dụng mọi dạng bình luận rút gọn. Kết hợp với tư duy thiết kế từ Taste Skill, toàn bộ giao diện dự án của bạn sẽ được AI xuất ra dưới dạng mã nguồn hoàn chỉnh, có thể sao chép và chạy được ngay trên trình duyệt mà không cần phải nhắc nhở nhiều lần.
Taste Skill đại diện cho bước chuyển mình quan trọng trong cộng đồng kỹ thuật AI: chuyển từ việc tìm kiếm các đoạn prompt ngắn hạn sang việc xây dựng các bộ tài liệu vận hành (SOP-to-Skills) có tính hệ thống cao. Bằng việc định hình rõ ràng các thông số về thiết kế, không gian và chuyển động, nhà phát triển lấy lại quyền kiểm soát từ các mô hình học máy đóng kín, mang tiêu chuẩn thẩm mỹ lưu trữ trực tiếp dưới dạng mã nguồn.
Đối với những tổ chức và cá nhân ưu tiên tự chủ dữ liệu, thiết lập hệ thống máy chủ nội bộ và mong muốn cá nhân hóa tối đa quy trình làm việc, Taste Skill không chỉ là một công cụ tiện ích. Nó là nền tảng để biến AI agent từ một cỗ máy viết code vô hồn thành một người cộng sự thực thụ, đảm bảo chất lượng giao diện luôn nhất quán trên hàng loạt dự án đa dạng.
