Agent skill là gì? 7 skill giúp AI làm giao diện có gu hơn

Nhờ AI dựng một trang web, bạn thường nhận về thứ chạy được ngay. Nhưng nhìn kỹ, nó giống hệt cả trăm trang khác: thẻ bo góc, bóng đổ xám, gradient làm nền, chữ nào cũng đậm vừa phải. Muốn AI có “gu” hơn, cách đang được giới lập trình dùng nhiều nhất là cài thêm agent skill. Vậy agent skill là gì, và skill nào giúp AI viết giao diện bớt nhàm?

Bài này giải thích skill từ gốc: nó là tệp gì, agent đọc nó ra sao, vì sao giao diện AI làm hay giống nhau. Sau đó là 7 công cụ thiết kế đã được kiểm tra trực tiếp trên kho mã nguồn, cách cài, rủi ro bảo mật cần biết và cách tự viết skill cho nhóm của bạn.

Câu trả lời ngắn: Agent skill là một thư mục chứa tệp SKILL.md, ghi tên, mô tả và hướng dẫn để AI agent (Claude Code, Codex, Cursor…) làm một việc cụ thể theo cách bạn muốn. Agent chỉ đọc phần mô tả lúc khởi động, khi gặp việc phù hợp mới mở hướng dẫn đầy đủ. Với thiết kế, skill đóng vai cuốn sổ tay nghề giúp AI chọn màu, chữ, chuyển động có chủ đích.

Tóm tắt nhanh

• Agent skill là thư mục có tệp SKILL.md, do Anthropic phát triển và mở thành chuẩn chung ngày 18/12/2025.
• Agent chỉ nạp tên và mô tả của skill trước, đọc hướng dẫn đầy đủ khi cần, nên cài nhiều skill vẫn không tốn bộ nhớ ngữ cảnh.
• Giao diện AI làm na ná nhau vì không có chỉ dẫn, mô hình chọn lối “an toàn” nhất.
• 7 công cụ đáng thử: frontend-design, oklch-skill, bộ skill của Emil Kowalski, Transitions.dev, Hue, UI/UX Pro Max và định dạng DESIGN.md.
• Skill có thể chứa mã độc: một nghiên cứu năm 2026 tìm thấy 157 skill độc hại trong gần 100.000 skill được quét.

Trong bài này:

1. Agent skill là gì?
2. Skill hoạt động thế nào bên trong agent
3. Vì sao giao diện do AI làm trông giống nhau
4. 7 skill và công cụ thiết kế đáng thử
5. Chọn skill theo nhu cầu
6. Cách cài agent skill
7. Rủi ro bảo mật khi cài skill của người lạ
8. Tự viết skill thiết kế cho nhóm
9. Hiểu lầm phổ biến
10. Bắt đầu trong 6 bước
11. Câu hỏi thường gặp

Agent skill là gì?

AI agent (tác tử AI) là AI không chỉ trả lời mà còn tự làm việc: mở tệp, chạy lệnh, sửa mã. Claude Code, Codex hay Cursor là các agent lập trình phổ biến. Chúng giỏi viết mã chạy được, nhưng không tự biết quy trình riêng của bạn, thương hiệu của công ty bạn hay “gu” thiết kế mà bạn thích.

Agent skill là cách đóng gói những hiểu biết đó. Theo đặc tả trên trang chuẩn Agent Skills, mỗi skill là một thư mục. Bên trong bắt buộc có tệp SKILL.md, mở đầu bằng phần siêu dữ liệu ghi tối thiểu tên (name) và mô tả (description), tiếp theo là hướng dẫn bằng chữ thường. Ngoài ra có thể kèm thư mục scripts/ (mã chạy được), references/ (tài liệu tra cứu) và assets/ (mẫu, font, hình ảnh).

Hãy hình dung agent là một thợ mới vào nghề rất nhanh tay. Skill là cuốn sổ tay nghề bạn để sẵn trong ngăn kéo: “khi làm việc X thì theo các bước này, dùng công cụ kia, tránh lỗi nọ”. Thợ không cần thuộc lòng cả tủ sổ, chỉ cần biết cuốn nào nói về việc gì.

Anthropic ra mắt Skills cho Claude vào tháng 10/2025, rồi ngày 18/12/2025 mở định dạng này thành chuẩn mở, theo bài tường thuật của The New Stack. Nhờ vậy, cùng một skill có thể chạy trên nhiều agent khác nhau chứ không bị khoá vào một sản phẩm.

Skill hoạt động thế nào bên trong agent

Điểm hay của skill nằm ở cơ chế progressive disclosure, tạm dịch là “mở dần từng lớp”. Đặc tả chia việc nạp skill thành 3 chặng:

• Khám phá: lúc khởi động, agent chỉ đọc tên và mô tả của từng skill, vừa đủ để biết skill nào dùng cho việc gì.
• Kích hoạt: khi yêu cầu của bạn khớp với mô tả, agent mới đọc toàn bộ SKILL.md.
• Thực thi: agent làm theo hướng dẫn, chạy script hoặc mở tài liệu đi kèm khi thật sự cần.

Vì sao điều này quan trọng? Mỗi mô hình AI chỉ “nhìn” được một lượng chữ giới hạn trong một lần làm việc, gọi là cửa sổ ngữ cảnh. Nếu nhét hết mọi hướng dẫn vào ngay từ đầu, cửa sổ đầy nhanh và AI dễ “quên” phần quan trọng. Cơ chế mở dần cho phép bạn cài hàng chục skill mà mỗi lần agent chỉ thật sự đọc một vài cái.

Hệ quả thực tế: phần mô tả là thứ quyết định skill có được dùng hay không. Mô tả mơ hồ thì agent bỏ qua; mô tả quá rộng thì skill bật cả khi không nên. Đây cũng là lý do skill khác với việc dán một đoạn lời nhắc dài vào đầu mỗi cuộc trò chuyện.

Vì sao giao diện do AI làm trông giống nhau

Mô hình ngôn ngữ học từ hàng triệu trang web. Khi bạn chỉ nói “làm trang giới thiệu sản phẩm”, nó chọn những lựa chọn phổ biến nhất, tức an toàn nhất. Kết quả đúng về kỹ thuật nhưng thiếu cá tính, giống một bữa cơm hộp đủ chất mà chẳng ai nhớ.

Chính Anthropic đã liệt kê những “dấu vân tay” này trong skill frontend-design thuộc kho skill chính thức của hãng. Danh sách nên tránh gồm: thẻ bo góc đồng nhất với bóng đổ xám giống nhau, gradient chỉ để trang trí, nhãn viết hoa giãn chữ phía trên mọi tiêu đề, mũi tên “→” cuối mọi nút, hiệu ứng trượt-mờ cho từng mục khi cuộn và hover trên mọi thẻ.

Ngược lại, skill khuyên chọn hướng thẩm mỹ theo đúng lĩnh vực của sản phẩm, dùng một hoặc hai họ font, lập bảng 4–6 màu có tên, giữ dòng chữ dưới 80 ký tự và chỉ dùng một chuyển động thật sự đáng nhớ. Nói cách khác, “gu” không phải phép màu mà là những quy tắc có thể viết ra. Một khi đã viết ra được, agent làm theo được.

7 skill và công cụ thiết kế đáng thử

Danh sách dưới đây được đối chiếu trực tiếp với kho mã nguồn và trang chính thức của từng dự án vào tháng 11/2026. Mỗi công cụ lo một phần khác nhau, từ màu, chữ đến chuyển động và hệ thiết kế cả dự án.

1. frontend-design (Anthropic)

Điểm khởi đầu hợp lý nhất. Skill này không gắn với phong cách nào, mà dạy agent lập kế hoạch thiết kế ngắn trước khi viết mã, đối chiếu với yêu cầu và loại bỏ các lựa chọn mặc định. Nó cũng nhắc những thứ người mới hay quên: giao diện co giãn theo màn hình, dùng được bằng bàn phím, tôn trọng thiết lập giảm chuyển động của người dùng. Lưu ý từ chính kho: các skill mẫu dùng cho mục đích minh hoạ và giáo dục, cần thử kỹ trước khi dùng cho việc quan trọng.

2. oklch-skill: màu sắc đều và dễ kiểm soát

OKLCH là không gian màu nằm trong chuẩn CSS Color Level 4 của W3C, cho phép chỉnh độ sáng mà màu không bị lệch sắc như HSL cũ. Skill của Jakub Krehel (giấy phép MIT) giúp agent chuyển đổi màu, tạo bảng màu, kiểm tra độ tương phản, kéo màu về dải hiển thị được và tạo màu dự phòng cho trình duyệt cũ. Cài bằng lệnh npx skills add jakubkrehel/oklch-skill.

3. Bộ skill của Emil Kowalski: chuyển động có nghề

Emil Kowalski, tác giả thư viện thông báo Sonner, gom kinh nghiệm thành 17 skill trong kho emilkowalski/skills (MIT), từ tạo, rà soát đến gỡ bớt animation thừa. Các con số trong bài Agents with Taste rất đáng nhớ: nút nhấn thu về 0,97 thay vì nhảy mạnh, phần tử xuất hiện từ 0,95 chứ không phải từ 0, vùng chạm tối thiểu 44 px, chữ thân bài khoảng 65 ký tự mỗi dòng.

4. Transitions.dev: hiệu ứng chuyển cảnh sẵn dùng

Bộ sưu tập các chuyển cảnh giao diện thường gặp như thẻ đổi kích thước, số nhảy vào, huy hiệu thông báo, mở đóng hộp thoại, đổi biểu tượng, dấu tích thành công hay rung khi lỗi. Bảng trong README liệt kê 12 hiệu ứng cơ bản; một phần nâng cao (gói Pro) cần đăng nhập. Cài skill bằng npx skills add Jakubantalik/transitions.dev. Bộ hiệu ứng được dùng cho dự án cá nhân lẫn thương mại, chỉ cấm đóng gói lại thành thư viện cạnh tranh.

5. Hue: học ngôn ngữ của một thương hiệu

Hue (MIT) dành cho Claude Code và Codex. Bạn đưa một địa chỉ web, tên thương hiệu hoặc ảnh chụp màn hình, nó sinh ra cả bộ màu, kiểu chữ, khoảng cách, thành phần giao diện, chế độ sáng tối và gợi ý biểu tượng. Kho có sẵn 17 mẫu (16 thương hiệu hư cấu, 1 thật), mỗi mẫu gồm tệp mô tả YAML và một trang đích HTML để xem thử. Mỗi bộ được sinh ra đều qua script kiểm tra cú pháp và độ tương phản theo chuẩn WCAG.

6. UI/UX Pro Max: kho tra cứu lớn nhất

Đây là công cụ nặng nhất trong danh sách và cũng được chú ý nhất, kho GitHub có khoảng 146 nghìn sao. Theo README, nó chứa 192 bảng màu, 74 cặp font, 119 hướng dẫn UX và hỗ trợ 22 nền tảng như React, Next.js, Vue, Flutter hay SwiftUI. Cài bằng npm install -g ui-ux-pro-max-cli, rồi chạy uipro init –ai claude trong thư mục dự án. Danh sách agent hỗ trợ dài, gồm Claude Code, Cursor, Windsurf, Codex CLI, Gemini CLI và GitHub Copilot.

7. DESIGN.md: một tệp cho cả hệ thiết kế

Không hẳn là skill, DESIGN.md là định dạng tệp do Google Stitch công bố ngày 21/4/2026, sau đó mở mã đặc tả tại kho google-labs-code/design.md (Apache-2.0, vẫn ở giai đoạn alpha). Tệp gồm hai lớp: giá trị máy đọc được (màu, cỡ chữ, khoảng cách) và phần chữ giải thích vì sao chọn như vậy. Đặt nó ở gốc dự án là agent có “luật nhà” để theo. Công cụ dòng lệnh đi kèm còn kiểm tra độ tương phản WCAG AA và xuất sang Tailwind.

Không muốn tự viết? Refero Styles (đang Beta) có hơn 2.000 hệ thiết kế lấy từ website thật, kèm tệp DESIGN.md chép về dùng ngay.

Chọn skill theo nhu cầu

Cài cả 7 cùng lúc không phải ý hay. Các skill có thể đưa ra lời khuyên chồng chéo, ví dụ một bên thích tối giản kiểu Thuỵ Sĩ, bên kia thích nhiều chuyển động. Cách an toàn là xác định giao diện của bạn đang “đuối” ở đâu rồi chọn đúng thuốc:

• Mới bắt đầu, chưa biết vấn đề nằm đâu: frontend-design.
• Màu nhìn bệt, chế độ tối lệch tông: oklch-skill.
• Giao diện “đứng im”, bật tắt đột ngột: Transitions.dev hoặc bộ của Emil Kowalski.
• Cần bám thương hiệu có sẵn: Hue hoặc một DESIGN.md từ Refero Styles.
• Muốn kho tham khảo lớn để agent tự tra: UI/UX Pro Max.
• Cả nhóm cùng làm một sản phẩm: một tệp DESIGN.md chung trong kho mã.

Ai thích bố cục báo in, lưới chặt và nhiều khoảng trắng có thể thử thêm skill phong cách Thuỵ Sĩ (npx skills add zeke/swiss-design-skill), dùng lưới 12 cột và đơn vị cơ sở 8 px.

Cách cài agent skill

Có 4 cách phổ biến, tuỳ agent bạn dùng:

1. Lệnh npx skills: công cụ dòng lệnh mã nguồn mở của Vercel Labs, cần Node.js 22.20 trở lên. Lệnh npx skills add <chủ-kho>/<tên-kho> tự nhận agent đã cài trên máy (Claude Code, Codex, Cursor, OpenCode và hàng chục agent khác) rồi hỏi bạn cài vào đâu. Mặc định skill nằm trong dự án hiện tại; thêm cờ -g để dùng cho mọi dự án. Các lệnh list, update, remove giúp quản lý về sau.
2. Chợ plugin trong Claude Code: gõ /plugin marketplace add anthropics/skills để thêm kho skill của Anthropic, rồi chọn gói cần cài.
3. git clone: chép cả thư mục skill vào nơi agent tìm skill, ví dụ Hue hướng dẫn chép vào ~/.claude/skills/hue cho Claude Code.
4. Chép tệp tay: với DESIGN.md hoặc một SKILL.md đơn giản, chỉ cần đặt tệp vào đúng chỗ trong dự án.

Một chi tiết ít người để ý: công cụ npx skills thu thập dữ liệu sử dụng ẩn danh. Muốn tắt, đặt biến môi trường DISABLE_TELEMETRY=1 hoặc DO_NOT_TRACK=1. Theo README, hai biến này cũng tắt luôn bước kiểm tra bảo mật tự động, nên hãy cân nhắc.

Người dùng ở Việt Nam cài và dùng được như mọi nơi, vì skill chỉ là tệp văn bản và mã nguồn mở. Phần lớn skill viết bằng tiếng Anh; SKILL.md là văn bản thường nên bạn hoàn toàn có thể tự viết hướng dẫn bằng tiếng Việt.

Rủi ro bảo mật khi cài skill của người lạ

Skill không chỉ là lời khuyên. Nó có thể kèm script mà agent chạy trên máy bạn, với quyền truy cập tệp và dòng lệnh. Nói thẳng, cài một skill lạ giống chạy mã của người lạ.

Nghiên cứu “Do Not Mention This to the User”, được chấp nhận tại hội nghị USENIX Security 2026 (bản công bố trên arXiv), đã quét 98.380 skill từ hai kho lớn. Nhóm tác giả xác nhận 157 skill độc hại, chứa 632 lỗ hổng thuộc 13 kỹ thuật tấn công. Kiểu phổ biến là trộm thông tin đăng nhập qua mã chạy từ xa, hoặc giấu chỉ dẫn trong tài liệu để điều khiển agent. Hơn một nửa số ca đến từ cùng một tác nhân, giả mạo thương hiệu hàng loạt. Kho đã gỡ cả 157 skill sau khi được báo.

Kiểu tấn công giấu lệnh trong văn bản này chính là prompt injection, mối nguy chung của mọi AI agent. Vài thói quen tự vệ:

• Đọc SKILL.md và mọi script trước khi cài, đặc biệt các lệnh tải tệp, gửi dữ liệu ra ngoài hay đọc thư mục khoá bí mật.
• Ưu tiên kho có tác giả rõ ràng, nhiều người dùng, lịch sử cập nhật minh bạch; cẩn thận với tên na ná thương hiệu lớn.
• Cài theo dự án thay vì toàn cục khi chỉ thử nghiệm.
• Không để agent tự duyệt mọi lệnh khi đang dùng skill mới.

Tự viết skill thiết kế cho nhóm

Skill hữu ích nhất thường là skill bạn tự viết, vì chỉ bạn biết thương hiệu của mình. Anthropic có sẵn skill skill-creator để hỏi đáp và dựng khung SKILL.md giúp bạn. Dù dùng công cụ nào, một skill thiết kế tốt nên có:

• Mô tả nói rõ khi nào dùng, ví dụ “dùng khi dựng hoặc sửa giao diện web của thương hiệu X”.
• Màu, font, khoảng cách kèm lý do: màu này dùng cho nút chính, màu kia chỉ cho cảnh báo.
• Danh sách điều cấm: không gradient trang trí, không mũi tên cuối nút, không bo góc quá 12 px (số liệu minh hoạ).
• Một trang mẫu để agent nhìn thấy đích đến.

Với sản phẩm cho người Việt, thêm một dòng mà skill nước ngoài thường bỏ qua: font phải đủ dấu tiếng Việt. Nhiều font đẹp chỉ có bảng chữ Latin cơ bản, gặp chữ “ữ”, “ặ” là vỡ hoặc tự thay bằng font khác. Hãy ghi rõ trong skill: chỉ chọn font có bộ ký tự tiếng Việt và thử với một câu dài có đủ dấu trước khi duyệt.

Hiểu lầm phổ biến

“Cài càng nhiều skill thiết kế, giao diện càng đẹp.” Không hẳn. Lời khuyên chồng chéo khiến agent chọn lẫn lộn. Một hai skill phù hợp tốt hơn mười skill ngẫu nhiên.

“Skill là phần mềm phải mua.” Phần lớn skill trong bài là tệp văn bản mã nguồn mở, cài miễn phí. Có một số phần nâng cao cần đăng nhập hoặc trả phí, như gói Pro của Transitions.dev.

“Có skill rồi thì khỏi cần người duyệt.” Skill nâng mặt bằng chứ không thay mắt người. Agent vẫn có thể hiểu sai, và giao diện vẫn cần được xem trên điện thoại thật.

Bắt đầu trong 6 bước

1. Chụp lại giao diện hiện tại

Nhờ agent dựng một trang như bình thường, chưa cài skill gì. Lưu ảnh chụp làm mốc so sánh.

2. Gọi tên vấn đề

Màu bệt, chữ nhạt nhẽo, thiếu chuyển động hay lệch thương hiệu? Chọn một vấn đề lớn nhất.

3. Cài đúng một skill

Chọn skill theo bảng ở trên, cài trong phạm vi dự án. Đọc SKILL.md trước khi cài.

4. Yêu cầu lại đúng việc cũ

Dùng cùng câu lệnh như bước 1, có thể nhắc tên skill để agent kích hoạt chắc chắn.

5. So sánh hai bản

Xem trên cả máy tính và điện thoại. Ghi lại điều tốt hơn và điều chưa ổn.

6. Ghi điều chưa ổn vào skill riêng

Những điều bạn phải sửa tay nhiều lần chính là nội dung cho skill của chính bạn.

Câu hỏi thường gặp

Agent skill khác gì với prompt?

Prompt là lời bạn gõ cho một lần làm việc. Skill là hướng dẫn đóng gói sẵn, nằm trong thư mục, agent tự tìm và mở khi việc khớp mô tả. Skill còn có thể kèm script và tài liệu, dùng lại được qua nhiều dự án và chia sẻ cho cả nhóm.

Skill có dùng được với Codex hay Cursor không?

Agent Skills là chuẩn mở, nhiều công cụ đã hỗ trợ. Công cụ npx skills nhận diện Claude Code, Codex, Cursor, OpenCode và hàng chục agent khác. Mức hỗ trợ cụ thể khác nhau theo từng sản phẩm, nên hãy xem tài liệu của agent bạn dùng.

Không biết lập trình có dùng skill được không?

Được, nhưng bạn cần một agent chạy được trên máy hoặc trên web và chấp nhận gõ vài lệnh. Cách nhẹ nhất là chép một tệp DESIGN.md vào dự án. Nếu chỉ muốn tạo ứng dụng nhỏ bằng lời mô tả, có thể xem thêm bài tạo app bằng AI không cần code.

Skill có làm agent chạy chậm hoặc tốn token hơn không?

Ít. Lúc khởi động agent chỉ đọc tên và mô tả của skill. Hướng dẫn đầy đủ chỉ được nạp khi cần, nên chi phí chủ yếu phát sinh ở lần dùng thật. Skill có tài liệu tham chiếu rất dài sẽ tốn nhiều hơn khi được mở.

Làm sao biết một skill an toàn?

Không có cách chắc chắn tuyệt đối. Hãy đọc toàn bộ SKILL.md và script, kiểm tra tác giả, số người dùng, lịch sử cập nhật và giấy phép. Thấy lệnh tải tệp lạ, gửi dữ liệu ra ngoài hoặc đọc thư mục khoá bí mật thì đừng cài.

Kết luận

Agent skill biến những điều trước đây nằm trong đầu nhà thiết kế thành quy tắc mà AI làm theo được. Với giao diện, đó là khác biệt giữa một trang “đúng nhưng nhạt” và một trang có chủ đích. Hãy bắt đầu nhỏ: một skill, một vấn đề, một lần so sánh. Và luôn đọc kỹ trước khi cài, vì skill cũng là mã.

Bạn đã thử skill nào cho agent của mình chưa, kết quả ra sao? Chia sẻ ở phần bình luận nhé. Theo dõi Nhật Phúc để đọc thêm các bài giải thích AI và công cụ lập trình dễ hiểu.