Taste-Skill: AI Của Bạn Không Thiếu Tài, Thiếu Gu

TL;DR

• Pain: AI sinh ra Inter, tím, ba card đều - đây là bias thống kê, không thiếu kỹ năng
• Gain: Một lệnh cài, agent tự thêm gu vào mọi lần sinh code
• Target: Dev vibecode bằng Cursor, Claude Code, Copilot, Windsurf
• Killer Feature: 3-dial system tinh chỉnh từ dashboard nội bộ đến landing page sang
• Verdict: 8.096 sao, không có license - học tốt, production thì cân nhắc

Mặc Đồng Phục

Buổi chiều đó cậu đồng nghiệp mở demo và trông rất hý hửng. Build cái landing page trong hai tiếng bằng AI, code chạy được, responsive, không lỗi console. Kỹ thuật ổn hoàn toàn.

Nhưng tôi cứ có cảm giác mình đã thấy cái này ở đâu rồi.

Font Inter. Nút tím phát sáng. Hero section căn giữa, H1 cỡ 72px. Ba card feature bằng nhau, padding đều tăm tắp. Avatar SVG hình trứng. Số liệu ghi “99.99% uptime”.

Tôi kéo tab sang landing page của startup khác - cũng AI code - y chang. Kéo sang cái thứ ba, thứ tư. Mỗi trang trông như nhân bản vô tính của trang còn lại: khác về nội dung, nhưng mặc cùng một bộ đồng phục vô hình mà chẳng ai đặt may.

Cậu đồng nghiệp hỏi tôi nghĩ sao. Tôi nhìn lại màn hình và không biết bắt đầu từ đâu.

Lỗi Của Phân Phối Xác Suất

Đây không phải lỗi kỹ thuật. Đây là bài toán thống kê.

LLM hội tụ về trung bình cộng của những gì đã thấy trong training data. Inter là font xuất hiện nhiều nhất trên các codebase và tutorial - AI mặc định Inter. Màu tím là màu phổ biến nhất trên các thiết kế “modern” trong training data - AI ra tím. Ba card bằng nhau là layout xuất hiện nhiều nhất trên hero section - AI ra ba card.

Model không lười. Model đang làm đúng nhiệm vụ: tìm điểm có xác suất cao nhất. Như bếp nấu theo khẩu vị trung bình của cả triệu người - ăn được, nhưng không ai nhớ tên quán.

Taste-Skill giải quyết chỗ này không bằng cách fine-tune hay thêm wrapper phức tạp. Chỉ là một file SKILL.md mà AI coding agent đọc tự động khi bắt đầu session. File này ghi rõ: font nào dùng, layout nào cấm, pattern nào là “AI tell” điển hình. Agent đọc và áp dụng vào mọi lần sinh code sau đó, không cần nhắc lại trong prompt. Đây là cùng cơ chế với CLAUDE.md hay .cursorrules nhưng được chuẩn hóa hơn qua CLI npx skills.

Cơ chế thực sự nằm ở ba cái núm vặn bên trong file.

Ba Cái Núm Vặn

Cài đặt mất một lệnh:

npx skills add https://github.com/Leonxlnx/taste-skill

Lệnh này tải SKILL.md về project và đăng ký với agent đang dùng. Hoạt động với Cursor, Claude Code, Antigravity, Windsurf, Copilot, Codex. Bên trong file có ba biến toàn cục có thể override trực tiếp trong prompt chat:

DESIGN_VARIANCE: 8    # 1 = đối xứng hoàn hảo, 10 = masonry chaos
MOTION_INTENSITY: 6   # 1 = tĩnh hoàn toàn, 10 = Framer Motion spring physics
VISUAL_DENSITY: 4     # 1 = gallery thoáng, 10 = buồng lái máy bay

DESIGN_VARIANCE kiểm soát mức độ táo bạo của layout. Giá trị 8 là asymmetric grid, header lệch trái, padding bất đối xứng với padding-left: clamp(2rem, 15vw, 20vw). Từ mức 4 trở lên, mọi layout bất đối xứng trên md: bắt buộc fallback về single-column trên mobile để tránh horizontal scroll.

MOTION_INTENSITY kiểm soát animation. Từ mức 8 trở lên, magnetic hover phải dùng useMotionValue/useTransform của Framer Motion ngoài render cycle - không dùng useState vì gây performance collapse trên mobile.

VISUAL_DENSITY kiểm soát mật độ thông tin. Từ mức 7 trở lên, bỏ card box, thay bằng border-t và divide-y. Tất cả số chuyển sang font-mono.

Ví dụ kết hợp thực tế:

Use case	DESIGN_VARIANCE	MOTION_INTENSITY	VISUAL_DENSITY
Landing page sang trọng	9	7	2
Dashboard analytics nội bộ	3	2	9
Portfolio developer	8	5	3
Tool internal	4	2	7

Bạn nói thẳng trong chat: DESIGN_VARIANCE: 9, MOTION_INTENSITY: 4, VISUAL_DENSITY: 2, làm landing page cho fintech startup và agent áp dụng ngay. Nhưng ba cái núm vặn này chưa phải phần hay nhất của repo.

Danh Sách Đỏ

Phần hay nhất là bộ Anti-patterns - một bộ nhận dạng pháp y của AI slop, mỗi entry có lý do kỹ thuật rõ ràng.

Hạng mục	AI mặc định	Taste-Skill thay bằng
Font	Inter	Geist, Outfit, Cabinet Grotesk
Hero layout	Căn giữa 100%	Split Screen hoặc Asymmetric
Màu nút	Tím/xanh phát sáng	Zinc neutral + một accent duy nhất
Card	Card box cho mọi thứ	border-t, divide-y, negative space
Số liệu	99.99%, 50%	Số “bẩn”: 47.2%, +1 (312) 847-1928
Avatar	SVG hình trứng	picsum.photos hoặc style sáng tạo
Hero height	h-screen	min-h-[100dvh] (iOS Safari không jump)
Z-index	z-50 vô tội vạ	Chỉ cho navbar, modal, overlay

Nhìn vào cột bên trái là nhìn vào hành vi thống kê của LLM: outer neon glow bị cấm vì là “AI tell” nhận ra xa nhất; #000000 thuần túy bị thay bằng Zinc-950 vì designer thực sự không ai dùng pure black.

Trước/sau cài taste-skill trông như thế này:

// Trước  -  AI thuần thống kê
<section className="flex flex-col items-center py-24 bg-violet-600">
  <h1 className="text-7xl font-bold bg-gradient-to-r from-white to-violet-200 bg-clip-text text-transparent">
    Unleash Your Potential
  </h1>
  <button className="mt-8 px-6 py-3 bg-violet-400 rounded-full shadow-[0_0_40px_rgba(124,58,237,0.8)]">
    Get Started
  </button>
</section>

// Sau  -  DESIGN_VARIANCE: 8, VISUAL_DENSITY: 3
<section className="grid grid-cols-[2fr_1fr] min-h-[100dvh] pl-[clamp(2rem,15vw,20vw)]">
  <h1 className="text-5xl font-semibold tracking-tight text-zinc-950">
    Ship faster. Actually.
  </h1>
  <button className="mt-6 px-5 py-2.5 bg-zinc-900 text-white rounded-sm hover:bg-zinc-700 transition-colors duration-150">
    Start building
  </button>
</section>

💡 Anh em có thể chỉ đọc phần Anti-patterns mà không cài gì hết. Một lần đọc đủ để viết prompt tốt hơn ngay từ hôm nay, bất kể dùng agent nào.

Danh sách này không chỉ là “cấm và thay” - đây còn là tài liệu ngầm về lý do tại sao designer thực sự làm những gì họ làm. Nhưng tất cả chỉ phát huy được khi bạn chọn đúng skill cho đúng ngữ cảnh.

Bảy Skills

Taste-Skill là bộ 7 skills chuyên biệt, mỗi cái cho một tình huống khác nhau:

1. taste-skill - Skill chính. Toàn bộ hệ thống typography, màu sắc, layout, 3-dial. Cài mặc định cho mọi project React/Next.js mới.
2. redesign-skill - Audit trước, fix sau. Cho project đang chạy cần facelift mà không rewrite.
3. soft-skill - Whitespace lớn, font premium, spring animation mượt. Cho landing page sản phẩm cao cấp.
4. output-skill - Ngăn AI viết // TODO và bỏ dở code giữa chừng. Không liên quan đến thiết kế.
5. minimalist-skill - Monochrome, sắc nét, không màu phùng phình. Kiểu Notion hay Linear.
6. brutalist-skill ⚠️ Beta - Typography kiểu in ấn Swiss, terminal CRT aesthetics. Không cho enterprise.
7. stitch-skill - Dành cho Google Stitch. Export thêm DESIGN.md dùng như reference cho cả team.

output-skill hoạt động độc lập với phần còn lại - cài riêng cho project backend cũng được. brutalist-skill đang beta, output chưa nhất quán.

Giới Hạn Thực Tế

SKILL.md là hướng dẫn, không phải constraint cứng. Agent vẫn có thể bỏ qua quy tắc nếu context phức tạp hoặc prompt không đủ rõ. Hiệu quả thực tế phụ thuộc vào agent bạn đang dùng: không phải agent nào cũng đọc và tuân thủ SKILL.md như nhau - những agent không hỗ trợ cơ chế này sẽ bỏ qua file hoàn toàn.

Bộ Anti-patterns tốt, nhưng không phải design system đầy đủ. Không có token màu sắc, không có component spec, không có accessibility guidelines. Nếu cần hệ thống hoàn chỉnh hơn, taste-skill là điểm xuất phát tốt để học pattern - rồi tự viết SKILL.md của riêng mình theo ngữ cảnh project.

Ba cái dial chỉ tồn tại trong taste-skill. Sáu file còn lại có quy tắc cố định không điều chỉnh được. v2 Beta đang trong waitlist trên trang chủ, chưa rõ sẽ thay đổi gì.

⚠️ Taste-Skill không có license. Repo chưa khai báo điều khoản sử dụng. Dùng cho personal project và học tập thì ổn, nhưng cân nhắc kỹ trước khi đưa vào workflow production thương mại.

Bộ Đồng Phục Tháo Ra Rồi

Tôi quay lại project của cậu đồng nghiệp. Không thay một dòng logic, không đụng vào API call nào. Chỉ cài taste-skill và nhờ agent regenerate phần layout.

Lần này không có Inter nữa. Không có nút tím. Hero section lệch trái, ảnh tỉ lệ 16:9 nằm cạnh text block với padding bất đối xứng. Số liệu là 47.2% thay vì 99.99%. Avatar dùng picsum.photos thay vì SVG trứng hình học.

8.096 người star repo này không phải vì AI của họ kém code. Mà vì họ đã nhận ra rằng AI giỏi tối ưu xác suất - nhưng gu thẩm mỹ nằm ở chỗ biết lúc nào cần thoát khỏi đường trung bình.

Leonxlnx/taste-skill · không có license · 8.096 sao · tasteskill.dev