frontend-design

Một file hướng dẫn giúp agent chọn màu, font và bố cục riêng cho từng trang, thay cho kiểu giao diện mặc định ai cũng thấy.

SkillNhómUI và thiết kếanthropics/skills · ★ 184,7K · đọc 29/10/2026Đã đọc mã và tổng hợp ·

Ưu, nhược và chỗ chưa rõ

frontend-design: ưu, nhược và chỗ chưa rõ, mỗi dòng kèm nguồn
ƯuSkill chỉ là một file chữ 9.461 byte, không có script, không có hook và không gọi mạng, nên cài vào không chạy thêm mã nào trên máy bạn.Thư mục skill tại commit ca45fc4
ƯuLần chạy của mình (dựng một trang HTML, 1 lần mỗi bên): trang có skill không còn chữ in hoa nào (bản không skill có 17 chỗ), tự viết 85 dòng CSS thay vì 106, và chi phí ngang nhau (0,406 USD so với 0,414 USD).Lần chạy của mình, 2026-10-29
NhượcLần chạy của mình: agent chấm mù chọn trang không dùng skill. Trang có skill để viền focus bàn phím màu vàng trên nền vàng, nên người dùng bàn phím không thấy mình đang ở nút nào.Lần chạy của mình, 2026-10-29
NhượcMột người dùng chạy skill với Claude Opus 5.5 trên 7 đề bài, mỗi đề 3 lần: 10 trên 21 trang có nút bo tròn hình viên thuốc, đúng kiểu mặc định mà skill muốn tránh. Issue còn mở.Issue #1808
NhượcLệnh cài example-skills chép cả thư mục skills/ của repo, nên bạn nhận khoảng 17 skill thay vì một. Lỗi báo từ 2025-12-30, bản sửa (PR #551) vẫn chờ duyệt.Issue #189
Chưa rõSkill viết cho trang làm từ đầu và khuyên tự chọn bảng màu, font riêng. Khi dự án đã có design system (Material, Fluent, Spectrum…), skill chưa nói rõ phải làm gì; một PR bổ sung phần này vẫn đang mở.Issue #1562
Chưa rõREADME chỉ ghi cách cài qua plugin marketplace. Cách này luôn lấy bản mới nhất của repo, nên bạn không ghim được đúng commit mình đã đọc.README, mục Claude Code

Khi nên dùng

  • Bạn dựng một trang mới chưa có hướng thiết kế và muốn agent tự chọn màu, font có chủ ý thay cho kiểu mặc định.

Khi không nên dùng

  • Dự án đã có design system hoặc token màu cố định, hoặc bạn cần chắc chắn về focus bàn phím mà không có công cụ chụp màn hình để agent tự kiểm tra.

Cách cài

Claude Code
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
Theo tài liệu của tác giả

Nó chạm vào những gì

File đọc và ghi
Chỉ có 2 file: SKILL.md (9.461 byte, toàn chữ hướng dẫn) và LICENSE.txt. Skill không tự đọc hay ghi file nào; file do agent viết theo yêu cầu của bạn.
Gọi mạng
Không gọi mạng. SKILL.md không có lệnh hay địa chỉ web nào.
Script lúc cài
Không có script, không có hook.
Tiến trình
Không bật tiến trình nào.

Đọc từ: frontend-design, SKILL.md

Mục này chạy mã trên máy bạn với quyền của tài khoản bạn. Theo tài liệu Claude Code, hook và MCP server chạy ngoài sandbox. Đọc phần trên và file của tác giả trước khi cài. Tài liệu bảo mật plugin

UI và thiết kế

Cả nhóm →