Taste Skill: thêm art direction và browser check cho coding agent
Taste Skill là agent skill mã nguồn mở giúp coding agent chọn hướng thiết kế, dùng ảnh từ nguồn mở có ghi credit và kiểm tra UI trong trình duyệt. Đây là một quy trình đáng thử để tránh các trang AI na ná nhau.
Giao cho coding agent một brief như “làm landing page cho quán cà phê”, bạn rất dễ nhận lại một hero gradient, vài card bo góc lớn và ảnh stock quen thuộc. Code có thể chạy tốt, nhưng giao diện vẫn giống một bản demo AI khác.
Taste Skill chọn cách tiếp cận khác: thay vì chỉ bảo agent “làm UI đẹp”, skill này yêu cầu agent chọn một hướng mỹ thuật, gắn nó với chất liệu riêng của sản phẩm, dùng ảnh thật từ bộ sưu tập mở và kiểm tra kết quả trong trình duyệt.
Với developer, đây không phải component library. Nó là một quy trình để biến brief sản phẩm thành các quyết định thiết kế mà coding agent có thể thực thi và tự rà soát.
Taste Skill là gì?
Taste Skill là một agent skill có tên cài đặt design-taste-frontend. README cho biết skill hoạt động với React, Vue, Svelte và HTML thuần; các quy tắc của nó tập trung vào thiết kế, không khóa vào một framework cụ thể.
Dự án mô tả skill được xây dựng từ nghiên cứu về 247 website được tuyển chọn. Mỗi lượt dựng giao diện đi qua sáu bước:
Đọc brief và xác định những gì chỉ khách hàng hoặc sản phẩm đó có.
Một script chọn ba trong số 20 hướng thiết kế đã nghiên cứu để agent chọn.
Hình thành ý tưởng trong một câu, nối chất liệu riêng của khách hàng với hướng đã chọn.
Dựng trang bằng ảnh và video thật từ các bộ sưu tập mở, kèm credit.
Kiểm tra trang trong trình duyệt thật ở ba độ rộng màn hình.
Xem screenshot, xác định ba vấn đề lớn nhất rồi sửa, tối đa ba vòng.
Khác biệt nằm ở chuỗi quyết định trung gian. Thay vì nhảy thẳng từ prompt sang JSX hoặc CSS, agent phải chọn hướng, diễn giải hướng đó qua dữ liệu riêng của sản phẩm, render trang và xem lại kết quả trực quan.
Cài Taste Skill
Lệnh cài đặt chính thức qua CLI npx skills là:
bash
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
Môi trường cần có:
Node.js 22 trở lên
Chrome, Edge hoặc Chromium
Kết nối mạng khi cần tìm ảnh
Theo README, skill không tự cài thêm thành phần và không yêu cầu API key.
Claude Code
Chạy các lệnh sau trong Claude Code:
text
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill
Skill dùng namespace taste-skill: để tránh trùng tên với skill khác. Có thể dùng /plugin update để cập nhật sau này.
Codex
bash
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill
Sau khi cài, cần bắt đầu một phiên Codex mới để skill được nạp.
Cài từ bản clone
README cũng cung cấp ./install.sh để liên kết skill từ bản clone thay vì sao chép. Script hỗ trợ --codex cho Codex và --all-agents cho cả Claude Code lẫn Codex. Khi dùng cách này, git pull sẽ cập nhật skill tại chỗ.
Đưa brief có chất liệu, không chỉ có tính từ
Taste Skill cần nhiều hơn yêu cầu “làm landing page SaaS hiện đại”. Khi giao việc cho agent, hãy cung cấp các dữ liệu mà chỉ sản phẩm của bạn có: nguồn gốc, quy trình, dữ liệu, nhóm người dùng, tài sản thương hiệu và mục tiêu của trang.
Một khung brief có thể tham khảo:
text
Thiết kế trang giới thiệu cho <tên sản phẩm>.
Điều chỉ sản phẩm này có:
<nguồn gốc, dữ liệu, quy trình hoặc câu chuyện riêng>
<đối tượng người dùng cụ thể>
<tài sản thương hiệu: ảnh, logo, nội dung, tông giọng>
Mục tiêu trang:
<hành động chính người dùng cần làm>
Yêu cầu kỹ thuật:
Dùng stack hiện có của project
Giữ nguyên <route hoặc component cần sửa>
Chạy và kiểm tra giao diện trong browser
Theo mô tả của dự án, agent sẽ chọn một hướng thiết kế, nối hướng đó với chất liệu của khách hàng rồi mới bắt đầu dựng giao diện.
Một kết quả tốt không nhất thiết phải nhiều animation hoặc màu sắc mạnh. Quan trọng hơn, giao diện cần có ý tưởng có thể giải thích được: ảnh, bố cục và nội dung cùng phục vụ một hướng rõ ràng, đồng thời vẫn hoạt động ở các kích thước màn hình khác nhau.
Dashboard và app screen có luồng riêng
Từ v2.1, Taste Skill có luồng riêng cho dashboard, trang quản trị và màn hình cài đặt.
README cho biết agent sẽ chọn một phong cách được rút ra từ các product screen thực tế, sau đó dựng app shell, dữ liệu, biểu đồ và bảng. Các quy tắc kiểm tra gồm:
Panel tiết chế
Số liệu được căn chỉnh
Màu sắc ưu tiên cho dữ liệu
Navigation thu gọn trên điện thoại
Dự án cũng nêu kiểm tra dành cho giao diện app với inspect.mjs --app.
Vì sao browser check đáng chú ý?
HTML hợp lệ, TypeScript pass hay test xanh chưa đồng nghĩa UI ổn. Margin lệch, khoảng trống bất thường, section bị dồn sang một phía hoặc tiêu đề đầu trang không rõ ràng thường chỉ lộ khi trang đã render.
Taste Skill kiểm tra “khung” của trang, gồm tiêu đề rõ ở màn hình đầu, margin đều, section không bị lệch và không có khoảng trống ngẫu nhiên. Sau đó agent xem screenshot của chính mình để sửa ba vấn đề lớn nhất, tối đa ba vòng.
Dù vậy, team vẫn nên giữ review của con người trong PR:
So sánh screenshot trước và sau thay đổi, thay vì chỉ đọc diff CSS.
Kiểm tra desktop lẫn mobile, đặc biệt với bảng, biểu đồ và navigation.
Đối chiếu copy, CTA và dữ liệu hiển thị với yêu cầu sản phẩm.
Kiểm tra agent có thay đổi component, route hoặc design system ngoài phạm vi giao việc không.
Rà soát accessibility, hành vi nghiệp vụ và trải nghiệm thực tế.
Browser check là một lớp kiểm tra trực quan hữu ích, không phải chứng nhận rằng trải nghiệm người dùng đã hoàn hảo.
Ảnh từ nguồn mở: có credit vẫn cần review
Taste Skill tìm ảnh từ các bộ sưu tập mở như Wikimedia Commons, Openverse và Met. Theo README, skill chỉ đưa ra các tệp public domain, CC0, CC BY và CC BY-SA, đồng thời đặt credit trên trang.
Điều này hữu ích cho prototype, khi placeholder khiến giao diện khó đánh giá. Tuy nhiên, với sản phẩm phát hành thật, team nên cân nhắc thay bằng tài sản sở hữu hoặc đã được cấp phép phù hợp với thương hiệu và bối cảnh sử dụng.
Repository được phát hành theo giấy phép MIT. README cũng cho biết một lượt dựng có thể mất khoảng 30–45 phút và dùng vài trăm nghìn token. Skill không yêu cầu API key, nhưng chi phí sử dụng coding agent hoặc model vẫn tùy thuộc công cụ mà team đang dùng.
Checklist trước khi thử
[ ] Máy có Node.js 22+, Chrome, Edge hoặc Chromium.
[ ] Đã cài design-taste-frontend cho agent team đang dùng.
[ ] Brief nêu rõ câu chuyện, dữ liệu hoặc tài sản riêng của sản phẩm.
[ ] Agent được yêu cầu render và kiểm tra giao diện trong browser.
[ ] Screenshot được review trong PR.
[ ] Ảnh từ nguồn mở được kiểm tra credit và thay bằng asset chính thức khi cần.
[ ] Token budget và thời gian chạy phù hợp với phạm vi công việc.
Taste Skill không biến mọi developer thành art director. Điểm đáng thử là cách nó biến một yêu cầu mơ hồ như “có gu hơn” thành quy trình cụ thể: chọn hướng, dùng reference thật, render, tự xem lại và sửa.