TL;DR

Mỗi khi nhờ Cursor hay Claude Code tạo landing page, bạn gần như luôn nhận được: hero section căn giữa, 3 cột feature grid, bảng pricing, gradient tím-xanh, và font Inter. Không sai - chỉ là quá nhàm. Taste Skill sinh ra để fix đúng chỗ đó.

Đây là bundle các file SKILL.md portable mà AI coding agent tự load vào context, áp dụng ~800 dòng design rules opinionated vào mỗi lần generate frontend. Kết quả: layout asymmetric, typography có cá tính, motion đúng chỗ - thay vì template SaaS nhai đi nhai lại.

Vấn đề: "AI Slop" trong frontend

LLM có statistical bias. Khi hỏi Claude hoặc GPT-4o về SaaS landing page, chúng lấy từ phần trung bình của training data - tức là mọi thứ trông như nhau. Cộng đồng gọi đây là "vibe coding slop".

Đầu 2026, X/Twitter tràn ngập screenshot chế nhạo UI do AI tạo ra: nút xanh y hệt nhau, icon Lucide lặp lại, bento grid chỗ nào cũng xuất hiện. Đây là lúc Taste Skill ra đời - 19/02/2026 - và chỉ sau vài tháng đã đạt 17,600 GitHub stars và 1,500 forks.

Taste Skill - The Anti-Slop Frontend Framework for AI Agents

Cơ chế: ~800 dòng rules inject vào agent

Taste Skill không phải component library, không phải CLI tool theo nghĩa truyền thống. Nó là bundle SKILL.md portable - file instruction mà các AI coding agent (Cursor, Claude Code, Codex, Gemini CLI...) tự detect và load vào system context.

Mỗi lần agent generate frontend, bộ rules này ghi đè bias mặc định của LLM. Một số rules tiêu biểu:

  • Ban font Inter cho "premium" vibes - dùng Geist, Outfit, Cabinet Grotesk, hoặc Satoshi thay thế

  • Ban aesthetic tím-xanh AI: không purple glow, không neon gradient - accent color saturation < 80%

  • Ban centered hero section khi layout variance cao - bắt buộc split-screen hoặc asymmetric whitespace

  • Ban h-screen cho full-height hero - phải dùng min-h-[100dvh] (ngăn iOS Safari layout jump)

  • Ban animate width/height - chỉ animate transform và opacity (hardware-accelerated)

  • Bắt buộc body text max-w-[65ch] - đúng chuẩn reading measure

  • Bắt buộc tactile click: -translate-y-[1px] hoặc scale-[0.98] trên :active

Ba dial điều chỉnh & các variant

Điểm sáng nhất của Taste Skill là hệ thống 3 dial số nguyên (1-10) trong SKILL.md, cho phép team định nghĩa aesthetic của mình:

  • DESIGN_VARIANCE: 1 = symmetry/clean, 10 = chaos/asymmetric

  • MOTION_INTENSITY: 1 = simple hover, 10 = scroll-triggered magnetic

  • VISUAL_DENSITY: 1 = spacious luxury, 10 = dense cockpit/dashboard

Ngoài skill core, repo còn bundle nhiều variant chuyên biệt:

  • gpt-tasteskill: Variant chặt hơn cho GPT/Codex, layout variance cao hơn

  • redesign-skill: Audit 6 category cho project hiện có, tìm pattern generic và fix

  • soft-skill: UI calm, polished - contrast nhẹ, whitespace nhiều, spring motion

  • minimalist-skill: Editorial product UI theo phong cách Notion/Linear

  • brutalist-skill: Swiss typography, raw structure, contrast sắc (beta)

  • output-skill: Không liên quan visual - chặn agent lazy: ban comment placeholder, ban code bị cắt ngang

  • image-to-code-skill: Pipeline generate design reference trước, rồi implement theo

Floria - landing page example built with Taste Skill, dark botanical aesthetic

Ai nên dùng - và ai không nên

Taste Skill phù hợp nhất với:

  • Solo dev và small team làm SaaS landing page, dashboard, hoặc marketing site với AI agent

  • Designer muốn AI output không "embarrass" trước client

  • Team đang standardize trên React + Next.js + Tailwind + Framer Motion

Ngược lại, không nên dùng nếu:

  • Project đã có strict design system (Material, Fluent, Ant Design) - Taste Skill sẽ conflict với design tokens

  • Stack chính là Vue, Svelte, hoặc SolidJS - design rules vẫn apply nhưng code examples React-first, cần translation

  • Bạn thực sự muốn centered hero và purple gradient

Floria bottom section - Taste Skill showcase với typography và layout không generic

So sánh với shadcn/ui, v0, và component libraries

Taste Skill không cạnh tranh với shadcn/ui hay Aceternity UI - chúng bổ sung nhau:

  • shadcn/ui: Cho bạn components (primitives, accessible). Taste Skill dạy AI cách sắp xếp chúng không generic

  • v0.dev: Hosted AI generator với Vercel house style, tốt cho rapid prototype nhưng kém portable

  • Official Agent Skills (vercel-labs): Framework-specific baseline - pair với Taste Skill để thêm visual taste

Nói ngắn: dùng shadcn cho primitives + Taste Skill để AI không sắp xếp chúng như mọi SaaS page khác. Chúng là judgment layer, không phải component kit.

Giới hạn cần biết

Taste Skill không hoàn hảo. Các điểm cần lưu ý:

  • React/Next.js bias trong code examples: Rules design agnostic, nhưng code snippets assume RSC, 'use client', Tailwind v3/v4, Framer Motion

  • Không có automated test: Không có visual regression tool để verify agent có follow rules không - vẫn phải review thủ công

  • 3 dial system under-documented: Thiếu gallery visual so sánh các combination dial (DESIGN_VARIANCE: 8 vs 6 trông khác nhau thế nào?)

  • Opinions rất mạnh: Inter bị ban, centered hero bị ban - muốn dùng lại phải fork hoặc edit SKILL.md

Cài đặt & phía trước: v2 open beta

Cài đặt trong 1 lệnh:

npx skills add Leonxlnx/taste-skill

Sau khi cài, agent tự auto-activate khi gặp frontend task. Không cần config thêm. Để verify đã load, hỏi agent: "What are your current DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY values?" - nếu trả về số là OK.

Muốn dùng variant cụ thể:

npx skills add Leonxlnx/taste-skill --skill full-output-enforcement

Taste Skill v1 hoàn toàn miễn phí, MIT License. v2 đang open beta - dự kiến sẽ là paid product, nhưng v1 vẫn free mãi mãi. Nếu muốn thử v2 sớm, download files từ beta portal trên tasteskill.dev và drop vào project.

via GitHub - Leonxlnx/taste-skill · tasteskill.dev