---
title: "Taste-Skill: AI Của Bạn Không Thiếu Tài, Thiếu Gu"
description: "Một bộ SKILL.md giúp AI coding agent thoát khỏi vòng lặp Inter-tím-3cards. Không huấn luyện lại model, chỉ ghi đè bias thống kê một lần."
pubDate: "2026-04-12"
lang: "vi"
slug: "taste-skill-giving-ai-good-taste"
url: "https://hoangyell.com/vi/taste-skill-giving-ai-good-taste/"
author: "HoangYell"
translation_en: "https://hoangyell.com/taste-skill-giving-ai-good-taste/"
categories: ["AI & Agents"]
tags: ["ai", "frontend", "design", "skill", "vibecoding", "ai-agents"]
heroImage: "https://raw.githubusercontent.com/yellcamap/img/refs/heads/main/photo-1517686469429-8bdb88b9f907.webp"
---
## TL;DR
*Kiến trúc ràng buộc thiết kế của Taste Skill:*
```markdy
scene width=1100 height=560
theme: light=doodle dark=nebula
layout auto
user User1 "Prompt: 'Lam landing page'"
service RawAI "LLM mac dinh"
module SlopUI "Output ram ro (Font Inter, gradient tim, 3 the deu nhau)"
user User2 "Prompt: 'Lam landing page'"
module TasteSkill "taste-skill / SKILL.md (Luat cam font, luoi bat doi xung)"
service AwareAI "Agent co nhan thuc (Claude / Cursor)"
module ModernUI "Giao dien tinh gon (Chuan Linear/Apple, icon vector 100%)"
group default_flow "1. Luong Agent mac dinh (Thiet ke pho thong)":
User1
RawAI
SlopUI
group taste_flow "2. Kiem soat boi taste-skill (SKILL.md)":
User2
TasteSkill
AwareAI
ModernUI
edge e1: User1 -> RawAI: "Prompt thong thuong"
edge e2: RawAI -> SlopUI: "Sinh code theo trung vi thong ke"
edge e3: User2 -> TasteSkill: "Workspace nap luat tu SKILL.md"
edge e4: TasteSkill -> AwareAI: "Truyen rang buoc tham my"
edge e5: AwareAI -> ModernUI: "Sinh component Responsive co gu tham my cao"
beat taste "Kiem soat chat luong tham my cua code AI" {
show $nodes stagger=50ms
glow ModernUI "Khong mau me rem ra, typography co y do, 100% vector icon"
}
player:
playback:
loop true
controls:
speed true
speeds "0.25"
fullscreen true
gif true
theme true
interaction:
zoom true
pan true
click_to_play true
double_click_to_reset true
keyboard false
chrome:
badge true
progress none
```
- **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](https://tasteskill.dev) 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:
```bash
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:
```jsx
// Trước - AI thuần thống kê
Unleash Your Potential
```
```jsx
// Sau - DESIGN_VARIANCE: 8, VISUAL_DENSITY: 3
Ship faster. Actually.
```
> 💡 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](https://github.com/Leonxlnx/taste-skill) · không có license · 8.096 sao · [tasteskill.dev](https://tasteskill.dev)