Taste Skill: Skill thiết kế website AI giúp Claude Code làm web đẹp, hết AI slop

Bạn nhận brief làm website cho một công ty nhỏ: logo, vài dòng mô tả, vài tấm ảnh văn phòng. Bạn đưa brief cho Claude Code, chờ vài phút, mở trang vừa sinh ra — và thấy hero gradient tím, tiêu đề chung chung, ba feature card giống hệt mọi landing page khác, nút “Get Started” và ảnh minh họa nhìn là biết không phải ảnh thật.

Bạn sửa prompt, yêu cầu thiết kế khác biệt hơn. Agent đổi gradient sang xanh, đổi font, xáo lại các card — trang vẫn mang mùi AI. Khách mở bản demo rồi nói: “Nhìn giống web mẫu quá, chưa thấy công ty mình ở đâu cả.” Vấn đề không phải agent viết code kém, mà là agent không có gu thẩm mỹ và không tự kiểm tra được trang mình vừa làm.

Taste Skill ra đời để lấp đúng hai lỗ hổng đó: agent skill mã nguồn mở, phiên bản 2.5.1, của Leonxlnx/taste-skill, giấy phép MIT, đạt 111.442 stars và 7.491 forks tính đến ngày 2026-11-07.

Vì sao landing page AI nào cũng giống nhau

Khách hàng nhận ra ngay trang của mình không có gì riêng — không ảnh thật, không con số hay địa chỉ chỉ công ty họ mới có.

Theo mình, AI slop là sự giống nhau vô hồn — chỉ viết prompt dài hơn là không đủ, cần quyết định thiết kế chọn lọc trước và vòng kiểm chứng sau khi build.

Taste Skill là gì?

Repo Leonxlnx/taste-skill hiện chỉ chứa một skill duy nhất: design-taste-frontend, hướng dẫn Claude Code, Codex và agent tương thích thiết kế website công ty chuyên nghiệp thay vì landing page generic. Phạm vi: website công ty, sản phẩm, dịch vụ và địa điểm. Nó làm việc với HTML thuần từ starter đi kèm, hoặc project React, Vue, Svelte, Astro, Tailwind đã có sẵn; với Next.js, chỉ static export.

Cài đúng skill này — các skill cũ đã tách sang taste-skill-classics và imagegen-skills.

Taste Skill giải quyết ba vấn đề: thiếu art direction, ảnh và UI giả (placeholder, ảnh AI, số nhà bịa), và không có kiểm chứng thị giác sau khi build. Đối tượng phù hợp là developer dùng Claude Code hoặc Codex, freelancer làm web cho khách, indie maker, và IT admin cần trang giới thiệu nội bộ nhanh. Ngược lại, nó không thay designer cho brand identity phức tạp.

Banner trên README còn giới thiệu TasteCode (tastecode.dev) dưới dạng desktop app, miễn phí và mã nguồn mở — mình chưa tải hay chạy thử nên không khuyên cài cho production.

Kiến trúc và cơ chế hoạt động

Điểm khác biệt lớn nhất: gu thẩm mỹ được mã hóa thành dữ liệu đã kiểm duyệt và script kiểm chứng, thay vì để LLM tự sáng tạo trong prompt.

Phân loại trước, thiết kế sau

Trước khi viết giao diện, agent phân loại brief vào một trong 6 kind — software, gaming, tech, product, service, place — rồi lập kế hoạch theo từng màn hình. Quán cà phê (place) cần ảnh thật, giờ mở cửa và địa chỉ thật; SaaS (software) cần UI sản phẩm thật và sơ đồ luồng. Phân loại sai kind thì palette, layout và hiệu ứng đều đi sai hướng.

Cơ chế “deal” palette, font và hero layout

Script scripts/start.mjs deal một palette và một cặp Google Fonts theo kind, lấy từ library/palettes.json và library/type.json. Song song với đó, assets/layout/deal.mjs deal một trong 11 hero layout đã kiểm chứng: split, centred, product, photo, place, collage, editorial, word, film, statement, triptych. Mỗi trang dùng một design system riêng: assets/starter.html, assets/system.css, assets/layout/layout.css — một section mỗi màn hình ở desktop 1440×900.

Ảnh thật và UI thật

Skill dùng feature card có đèn (lit), fragment UI HTML viết lại theo sản phẩm thật và SVG thật qua scripts/icons.mjs. Ảnh lấy từ Wikimedia Commons và Unsplash qua scripts/photos.mjs, ghi credit trong footer — hãy giữ lại khi bàn giao.

Hiệu ứng được giới hạn theo kind: chỉ trang tech, gaming và software mới có shader grounds, scroll scenes và procedural 3D prints, trong giới hạn 4 WebGL context, kèm fallback tĩnh cho mobile và reduced motion. Nhóm còn lại chỉ dùng ảnh và typography, không dùng WebGL.

Browser checker và finish gate

Sau khi build, trang được kiểm chứng qua HTTP trên headless Chrome bằng scripts/consistency.mjs, assets/layout/check.mjs, scripts/perf.mjs và scripts/shoot.mjs, render ở 5 viewport — 1440, 1024, 820, 768 và 390 — để bắt visual trống, shader lỗi, tụt contrast, lệch cột, text placeholder, số nhà bịa và ảnh thiếu khi mạng chậm. Sau đó scripts/gate.mjs giữ bài chưa xong tới khi không còn FAIL sửa được, tối đa 3 vòng — gate không đảm bảo “không còn lỗi nào”.

Sơ đồ luồng hoạt động

flowchart TD
    A[Brief: loại hình kinh doanh, nội dung, ảnh thật] --> B[Phân loại kind: software, gaming, tech, product, service, place]
    B --> C[Deal palette + Fonts: start.mjs]
    B --> D[Deal 1 trong 11 hero layout: deal.mjs]
    C --> E[Build: starter.html + system.css + layout.css]
    D --> E
    E --> F[Ảnh thật photos.mjs, UI thật icons.mjs]
    F --> G[Hiệu ứng theo kind]
    G --> H[Kiểm chứng headless Chrome, 5 viewport]
    H --> I{gate.mjs: còn FAIL sửa được?}
    I -- Có, chưa quá 3 vòng --> E
    I -- Hết FAIL hoặc hết 3 vòng --> J[Bàn giao trang]
    K[Node 22+, Chrome thật; không API key] -.-> H

Luồng chính là vòng lặp build → check → gate → sửa, không phải đường thẳng một chiều; gu thẩm mỹ nằm ở thư viện đã kiểm duyệt và script kiểm chứng.

Yêu cầu: Node 22+ và Chrome, Edge hoặc Chromium đã cài sẵn (CHROME_PATH nếu trình duyệt ở vị trí không chuẩn). ffmpeg chỉ là tùy chọn. Không cài thêm package nào, không cần API key, nhưng vẫn cần mạng cho Google Fonts, ảnh bổ sung và brand icons. Với Next.js, chỉ static export được hỗ trợ.

Hướng dẫn cài đặt cho Claude Code và Codex

Phần này mình chưa cài và chạy thử hands-on, chỉ đối chiếu lệnh với tài liệu chính thức, phiên bản 2.5.1, đọc ngày 2026-11-07. Trước khi cài, kiểm tra node --version từ 22 trở lên và mở được Chrome — thiếu Chrome thì checker và gate không chạy được.

Cách 1 — npx skills (thử nhanh):

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

Cách 2 — plugin cho Claude Code và Codex. Trong Claude Code:

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

Skill nằm dưới namespace taste-skill:, nâng cấp bằng /plugin update. Với Codex:

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

Mở session Codex mới sau khi cài.

Cách 3 — clone repo và dùng install.sh:

git clone https://github.com/Leonxlnx/taste-skill.git
cd taste-skill
./install.sh

Thêm --codex để cài cho Codex, hoặc --all-agents để cài cho cả hai. Cập nhật bằng git pull.

Chạy lần đầu. Từ thư mục project, chạy lệnh deal theo đúng kind của brief thật:

node scripts/start.mjs deal --page software

Thay software bằng kind của brief. Kiểm tra trang đã build bằng:

node scripts/consistency.mjs <url hoặc file> --page <kind>

Kỳ vọng: palette, font và layout đã được deal; checker chạy qua 5 viewport; gate báo PASS hoặc liệt kê FAIL cần sửa. Mình không trích log mẫu vì chưa chạy thử.

Lỗi thường gặp

Về rollback: trước khi chạy checker và gate trên project của khách, hãy commit bản đang hoạt động. Nếu gate sửa hỏng bố cục, quay lại commit đó. Với bản clone, checkout lại tag v2.5.1.

Đánh giá — ưu điểm, nhược điểm, bảo mật, vận hành

Ưu điểm. Art direction có hệ thống thay vì prompt tự do. Ảnh và UI thật giúp trang đáng tin hơn khi demo cho khách. Checker trên trình duyệt thật và finish gate bắt lỗi thị giác trước khi giao. Cài đặt nhẹ, không cần API key; repo có 111.442 stars, lần push gần nhất ngày 2026-11-07.

Nhược điểm. Tính đa dạng bị giới hạn bởi thư viện đã kiểm duyệt: 11 hero layout và palette deal sẵn có thể khiến các site cùng kind mang họ thẩm mỹ gần nhau. Skill phụ thuộc trình duyệt thật và Node 22+, khó chạy trong môi trường headless hoặc CI tối giản nếu thiếu Chrome. Gate tối đa 3 vòng nên lỗi dai dẳng sau đó vẫn cần người can thiệp.

Theo mình, trade-off lớn nhất: skill giảm phụ thuộc vào kỹ năng prompt, nhưng tăng phụ thuộc vào môi trường chạy và quyết định phân loại kind ban đầu.

Bảo mật. Không API key và không cài thêm package nên bề mặt tấn công từ credential gần như bằng 0. Tuy vậy, ảnh, font và icon tải từ mạng vẫn cần kiểm tra nguồn. Skill chạy script Node cục bộ, vì vậy chỉ chạy code từ repo chính thức hoặc release v2.5.1 đã kiểm chứng, đừng cài từ fork không rõ nguồn.

Hiệu năng và vận hành. Bài viết không đưa benchmark hay điểm Lighthouse, vì không có số liệu đo được. Chỉ nêu yếu tố theo thiết kế: cap 4 WebGL context, fallback tĩnh cho mobile, ảnh WebP qua ffmpeg tùy chọn, kiểm chứng ở 5 viewport. Cập nhật bằng git pull hoặc /plugin update; mỗi lần đổi kind, nên deal lại rồi chạy lại consistency và gate.

So sánh với Hallmark, Impeccable và cách làm không dùng skill

Taste Skill khác biệt vì nó là hệ thống sinh trang và kiểm chứng khép kín, không chỉ là bộ quy tắc hay bộ gate. Hallmark phù hợp khi cần chống slop nhanh, Impeccable khi cần gate ở CI. Đọc thêm Hallmark, Impeccable, Superpowers và CC Switch để chọn đúng công cụ.

Use case thực tế

Freelancer và agency làm website cho khách hàng. Với landing page SaaS hoặc công ty thuộc kind software hoặc tech: brief → deal → build → checker và gate trước khi demo khách.

Indie maker và full-stack developer. Với trang sản phẩm thuộc kind product, skill dùng UI thật thay mockup bịa, tiết kiệm nhiều vòng sửa thiết kế.

Website dịch vụ và địa điểm. Với kind service và place, skill dùng ảnh thật và typography, không dùng WebGL — phù hợp quán, khách sạn, cửa hàng và studio cần ảnh thật và thông tin thật.

IT admin và team nội bộ. IT admin có thể dùng skill cho trang giới thiệu dịch vụ nội bộ, trang docs hoặc landing của tool nội bộ. Giới hạn: skill làm trang giới thiệu, không thay dashboard hay admin UI phức tạp.

Bài học rút ra

1. Gu thẩm mỹ của AI không đến từ prompt dài hơn, mà từ thư viện đã kiểm duyệt theo loại hình kinh doanh.
2. Ảnh và UI thật là ranh giới rõ nhất giữa “web chuyên nghiệp” và “AI slop”.
3. Kiểm chứng phải chạy trên trình duyệt thật ở nhiều viewport; review bằng mắt không bắt được lỗi lệch cột, tụt contrast hay shader hỏng.
4. Finish gate chỉ có giá trị khi có giới hạn vòng lặp — tối đa 3 vòng, sau đó lỗi còn lại cần người can thiệp.
5. Một skill tốt vẫn cần người quyết định brief và kind ban đầu — phân loại sai thì mọi thứ đi sai hướng.
6. Đừng cài skill từ fork không rõ nguồn — script Node chạy cục bộ nên nguồn repo phải là Leonxlnx/taste-skill hoặc release v2.5.1 đã kiểm chứng.

Kết luận

Nên dùng nếu bạn dùng Claude Code hoặc Codex và muốn giao website cho khách mà không còn mùi AI; freelancer hoặc indie maker cần landing page đẹp nhanh; hoặc team cần chuẩn hóa chất lượng giao diện mà không có designer. Vòng deal → build → check → gate giúp bạn giao trang có kiểm chứng thay vì chỉ có cảm giác “nhìn ổn”.

Không nên dùng nếu dự án cần brand identity riêng sâu, design system đã có sẵn, hoặc chỉ cần một trang tĩnh cực đơn giản mà chi phí chuẩn bị Node 22 và Chrome lớn hơn lợi ích.

Bước tiếp theo: chọn kind đúng với brief thật, cài bằng một trong ba cách trên, chạy node scripts/start.mjs deal --page <kind>, rồi chạy node scripts/consistency.mjs và gate trước khi demo cho khách.

Phạm vi kiểm chứng

Ngày kiểm tra: 2026-11-07. Nguồn: README và GitHub API của Leonxlnx/taste-skill, release v2.5.1, cùng ghi nhận bên thứ ba. Đã kiểm chứng: phiên bản 2.5.1, stars và forks, lệnh cài (npx skills, plugin Claude Code/Codex, install.sh), yêu cầu Node 22+ và Chrome, ffmpeg tùy chọn, 6 kinds, 11 hero layout, checker 5 viewport, gate tối đa 3 vòng, không cần API key. Mặc định so với opt-in: WebGL chỉ mặc định cho tech, gaming và software; ảnh Wikimedia đi kèm chạy offline là mặc định; ffmpeg là opt-in; TasteCode chưa kiểm chứng độc lập. Các con số 11 layout, 6 kinds, 5 viewport, tối đa 3 vòng gate và cap 4 WebGL context là số liệu cấu hình, không phải benchmark. Chưa kiểm chứng: chưa cài và chạy thử hands-on; chất lượng trang ở mức “figma.com / x.ai level” là claim của tác giả; mức tăng stars và nghiên cứu 247 gallery sites là ghi nhận bên thứ ba.

Tài liệu tham khảo

• Taste Skill — repo chính thức: https://github.com/Leonxlnx/taste-skill
• Taste Skill — website chính thức: https://tasteskill.dev
• Taste Skill v2.5.1 — release: https://github.com/Leonxlnx/taste-skill/releases/tag/v2.5.1
• TasteCode — desktop app: https://tastecode.dev