Claude Code Design Skill: 15 Skills Cho Frontend & UI/UX (2026)

Mình đã dùng Claude Code là gì để viết code từ khá sớm, nhưng phải thành thật mà nói: output mặc định về UI trông không được đẹp. Button thì vuông, màu sắc thì tối giản kiểu Bootstrap 2015, font thì system-ui thôi. Đó không phải lỗi của Claude, đó là thiếu context về design. Và skills chính là phần context đó.

Năm 2026, cộng đồng đã xây dựng một hệ sinh thái design skills khá lớn cho Claude Code, với hàng chục repos trên GitHub. Bài này mình tổng hợp 15 skills quan trọng nhất, kèm link GitHub thực sự (không phải chỉ nhắc tên), lệnh cài đặt, và góc nhìn thực tế từ người dùng hàng ngày.

Vì Sao Claude Code Cần Design Skills?

Theo Stack Overflow Developer Survey 2025, 84% developer đang dùng AI tools trong công việc, tăng từ 76% năm trước. Nhưng con số đó không nói lên chất lượng output. Mình gặp rất nhiều UI do AI tạo ra trông giống nhau đến mức nhàm: card trắng, shadow nhạt, button xanh lam mặc định. Cộng đồng gọi đây là “AI slop”.

Nguyên nhân không phải Claude thiếu khả năng. Claude biết CSS, biết design principles, biết color theory. Vấn đề là thiếu context cụ thể: bộ màu nào, font nào, animation style nào, spacing system nào. Skills trong Claude Code chính xác là để điền vào khoảng trống này. Mỗi skill là một file SKILL.md chứa hàng trăm quy tắc design được nạp vào context window trước khi Claude bắt đầu viết code.

Mình đã thử cùng một prompt “tạo landing page cho SaaS app” với và không có skills. Kết quả chênh nhau rõ rệt. Phiên bản có frontend-design dùng Inter/Geist, gradient tinh tế, micro-animation đẹp. Phiên bản không có skill trông như template free trên ThemeForest năm 2018.

frontend-design: Tại Sao Là Skill #1?

frontend-design đạt 277K lượt cài đặt trên Claude Plugin Registry Q1/2026, nhiều hơn tổng số 5 design skills tiếp theo cộng lại. Con số đó không phải ngẫu nhiên. Đây là skill được Anthropic maintain trực tiếp, cập nhật thường xuyên theo các xu hướng design mới nhất.

File SKILL.md của skill này có khoảng 400 token, tập trung vào 4 nguyên tắc cốt lõi. Thứ nhất: “bold aesthetics over safe defaults”, nghĩa là Claude sẽ chủ động chọn màu sắc có cá tính thay vì màu an toàn. Thứ hai: cấm hoàn toàn các font generic như Arial, Times New Roman, system-ui nếu không có lý do cụ thể. Thứ ba: animation bằng CSS thuần, không cần JavaScript cho micro-interactions đơn giản. Thứ tư: spacing system dựa trên bội số của 4px.

Để tự tạo skill tương tự hoặc mở rộng từ frontend-design, bạn chỉ cần fork repo và chỉnh file SKILL.md theo design system của team mình. Cài đặt bằng lệnh sau:

npx skills add anthropics/claude-code -- skill frontend-design

Hoặc cài qua Claude Plugin Marketplace tại claude.com/plugins/frontend-design. Sau khi cài, tất cả các lần bạn yêu cầu Claude tạo UI, skill sẽ tự động inject context design vào đầu conversation.

6 Skills Từ Vercel Labs Có Gì?

Vercel Labs agent-skills đạt 24.4K stars trên GitHub và đây là bộ skills mình dùng nhiều thứ hai sau frontend-design. Lý do đơn giản: Vercel là công ty đứng sau Next.js, React Server Components, và Turbopack. Họ hiểu React và production web development hơn hầu hết các team khác.

Bộ này gồm 6 skills, mỗi cái có mục đích riêng biệt. react-best-practices chứa 69 rules về React patterns, hooks, và performance. web-design-guidelines là skill nặng nhất với 100+ rules về visual design, spacing, typography và responsive layout. Cài cả bộ bằng một lệnh duy nhất:

npx skills add vercel-labs/agent-skills

composition-patterns dạy Claude cách tổ chức component tree đúng chuẩn, tránh prop drilling và over-engineering. react-native-guidelines có 16 rules chuyên cho mobile, hữu ích nếu bạn dùng Expo. react-view-transitions cover View Transitions API mới của trình duyệt. Và vercel-deploy giúp Claude hiểu cách deploy đúng lên Vercel, bao gồm environment variables và edge functions.

UI/UX Pro Max: 67 Styles Và 161 Palettes?

UI/UX Pro Max đạt 58K stars trên GitHub tính đến Q1/2026, khiến mình khá ngạc nhiên vì đây là community project, không phải từ công ty lớn nào. Con số đó nói lên một điều: nhiều developer đang cần đúng thứ mà skill này cung cấp, một thư viện design options thực sự rộng và có hệ thống.

Cụ thể, skill này có 67 UI styles khác nhau, từ glassmorphism, neumorphism, brutalism, đến flat 3.0 và đủ loại dark/light variants. 161 color palettes được tổ chức theo mood và use case, không phải chỉ là màu ngẫu nhiên. 57 font pairings được chọn lọc kỹ. 25 chart types với guidance về khi nào dùng loại nào. Và 99 UX best practices trải rộng trên 15 tech stacks.

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

Mình thường dùng skill này khi client brief không rõ ràng về style. Thay vì hỏi lại nhiều lần, mình prompt Claude với “dùng UI/UX Pro Max, chọn palette phù hợp với fintech, dark mode preferred”. Kết quả nhất quán và professional hơn rõ rệt so với để Claude tự quyết.

3 Official Skills Từ Anthropic Làm Gì?

Anthropic skills repo chính thức đạt 110K stars và chứa ba skills design đặc biệt mà không repo community nào thay thế được. Đây không phải skills về CSS hay component, mà là skills về tạo artifacts hình ảnh thực sự, một loại output khác hẳn.

web-artifacts-builder là skill quan trọng nhất cho web developer. Nó dạy Claude cách tạo React components đầy đủ với Tailwind CSS và shadcn/ui, output trực tiếp dưới dạng artifact có thể preview ngay trong Claude. Không cần copy-paste sang IDE, bạn thấy kết quả ngay lập tức.

canvas-design khác hoàn toàn: skill này cho phép Claude tạo PNG và PDF visual, bao gồm diagram, poster, infographic và social media assets. Mình đã dùng nó để tạo thumbnail cho một số bài blog. Chất lượng output phụ thuộc nhiều vào prompt, nhưng baseline tốt hơn hẳn so với không có skill. Nếu bạn cần sinh ảnh chất lượng cao hơn nữa, Banana Claude tích hợp Gemini image generation trực tiếp vào Claude Code, cho kết quả photorealistic mà canvas-design không làm được.

algorithmic-art là skill thú vị nhất trong bộ ba, dùng p5.js để tạo generative art. Nếu bạn cần background animation, particle effects, hoặc data visualization sáng tạo cho trang web, đây là thứ cần cài. Context window sẽ được nạp các pattern về noise functions, color harmonics và animation loops của p5.js.

Community Skills Nào Đáng Cài?

Ngoài các repo lớn, cộng đồng đã xây dựng nhiều skills chuyên biệt rất hữu ích. Mình đánh giá bốn repos community đáng chú ý nhất dựa trên stars GitHub, tần suất cập nhật, và thực tế đã dùng qua. Nếu bạn đang xây dựng workflow phức tạp hơn, cũng nên tìm hiểu thêm về MCP servers để kết hợp với skills cho pipeline mạnh hơn.

jezweb Claude Skills (681 Stars)

jezweb/claude-skills chứa 63+ skills, trong đó 7 skills liên quan trực tiếp đến design. Bộ này đặc biệt ở chỗ có cả workflow skills, không chỉ style guide. design-loop cho phép Claude tự đánh giá output design và iterate. design-review dạy Claude cách critique UI theo UX principles. Còn tailwind-theme-builder, shadcn-ui, landing-page, design-system, và color-palette cover các use case phổ biến nhất cho web developer.

Bencium UX Designer (138 Stars)

bencium/bencium-claude-code-design-skill là repo nhỏ nhất trong danh sách nhưng có quality cao nhất về accessibility. Mỗi trong 6 design skills của bộ này chứa 28K+ characters tham chiếu UX, bao gồm WCAG 2.1 và WCAG 2.2 đầy đủ. Nếu bạn làm sản phẩm cần accessibility compliance cho thị trường EU hoặc Mỹ, đây là thứ cần cài trước tiên.

AccessLint (20 Stars)

accesslint/claude-marketplace chứa 4 skills chuyên về accessibility audit. contrast-checker kiểm tra tỷ lệ tương phản màu sắc theo WCAG. refactor đề xuất cải thiện code về accessibility. use-of-color đảm bảo thông tin không chỉ truyền tải qua màu. reviewer audit tổng thể. Stars ít nhưng đây là bộ tools nghiêm túc nhất về accessibility trong toàn bộ Claude skills ecosystem hiện tại.

frontend-slides (12.7K Stars)

zarazhangrui/frontend-slides là trường hợp đặc biệt: không phải skill theo nghĩa thông thường mà là framework tạo presentation HTML không cần dependency nào cả. 12 themes có sẵn, hỗ trợ convert từ PowerPoint. Mình dùng nó để tạo technical slides cho team mà không cần rời khỏi terminal. Với 12.7K stars, đây là một trong những repos ít-biết-nhưng-đáng-dùng nhất.

Figma MCP Kết Nối Design-to-Code Thế Nào?

Figma MCP không phải một skill theo đúng nghĩa, nhưng là mắt xích quan trọng trong workflow design-to-code. Kết hợp Figma MCP với các design skills ở trên, bạn có một pipeline hoàn chỉnh: designer làm trong Figma, Claude Code đọc file và generate code theo đúng design intent. Đây là điểm khác biệt lớn so với workflow copy-paste token thủ công trước đây.

Cài Figma MCP bằng cách thêm vào .claude/mcp.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

Workflow thực tế mình hay dùng: mở Figma file, copy link frame cần implement, paste vào Claude với prompt “implement this Figma frame as React + Tailwind, follow web-design-guidelines skill”. Claude sẽ phân tích màu sắc, spacing, và component hierarchy từ Figma rồi generate code khớp với design. Kết quả không hoàn hảo 100% nhưng đỡ được 70-80% công việc pixel-pushing thủ công.

Bảng So Sánh 15 Skills

Cài Đặt Và Combo Skills Thế Nào?

Không phải lúc nào cũng cần cài tất cả 15 skills. Tùy vào loại dự án, mình hay dùng ba combo khác nhau. Nếu bạn đang quản lý nhiều skills và muốn tự động hóa việc tạo SKILL.md mới theo design system của công ty, Skill Forge là tool đáng thử thêm.

Combo 1: Web App Developer

Phù hợp cho SaaS, dashboard, web application. Bộ này cân bằng giữa visual quality và code quality, hai thứ thường bị đánh đổi nhau khi dùng AI.

# Cài frontend-design từ Anthropic
npx skills add anthropics/claude-code -- skill frontend-design

# Cài toàn bộ Vercel Labs skills (6 skills)
npx skills add vercel-labs/agent-skills

# Cài web-artifacts-builder từ Anthropic
npx skills add anthropics/skills -- skill web-artifacts-builder

Combo 2: UI/UX Heavy Projects

Dành cho landing page, marketing site, hoặc bất kỳ project nào mà visual impression là priority. UI/UX Pro Max cộng với accessibility checkers tạo ra output vừa đẹp vừa inclusive.

# UI/UX Pro Max (67 styles, 161 palettes)
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

# Bencium UX Designer (WCAG 2.1/2.2)
npx skills add bencium/bencium-claude-code-design-skill

# AccessLint accessibility suite (4 skills)
npx skills add accesslint/claude-marketplace

Combo 3: Design System Builder

Khi bạn cần xây dựng design system có hệ thống cho cả team, jezweb bundle với design-system skill là điểm bắt đầu tốt nhất. Kết hợp với canvas-design để tạo documentation visual đẹp.

# jezweb full bundle (63+ skills bao gồm design-system)
npx skills add jezweb/claude-skills

# canvas-design để tạo visual documentation
npx skills add anthropics/skills -- skill canvas-design

Câu Hỏi Thường Gặp

Design skills có làm chậm Claude Code không?

Có, nhưng không đáng kể. Mỗi skill inject thêm khoảng 400-1000 tokens vào context window. Với Claude Sonnet 4, context dài hơn làm tăng thời gian phản hồi khoảng 0.5-1 giây mỗi skill. Nếu cài 5-6 skills cùng lúc, tổng overhead khoảng 5-8K tokens. Đổi lại, chất lượng output tốt hơn và bạn ít phải iteration hơn, nên tổng thời gian làm việc thực ra ngắn hơn.

Có thể dùng skills trên Claude.ai web không, hay chỉ trên CLI?

Skills được thiết kế chủ yếu cho Claude Code (CLI), nhưng một số skills có plugin version hoạt động trên Claude.ai web qua Plugin Marketplace. frontend-design là ví dụ điển hình, với plugin tại claude.com/plugins/frontend-design. Community skills như jezweb hay Bencium hiện chỉ hoạt động qua CLI. Kiểm tra README của từng repo để biết chính xác trước khi cài.

Nên bắt đầu từ skill nào nếu chưa dùng bao giờ?

Bắt đầu với frontend-design từ Anthropic. Đây là skill được maintain tốt nhất, có documentation rõ ràng nhất, và hiệu quả ngay cả với người mới. Sau khi quen với cách skills hoạt động, thêm web-design-guidelines từ Vercel Labs. Hai skills này đã cover 80% nhu cầu design thông thường. Đọc thêm tổng quan về skills cho developer nếu muốn hiểu rộng hơn.

Skills có conflict với nhau không khi cài nhiều bộ cùng lúc?

Conflict xảy ra khi hai skills đưa ra hướng dẫn trái ngược nhau, ví dụ một skill bảo dùng RGB, skill kia bảo dùng HSL. Claude thường ưu tiên skill được load sau cùng trong context. Để tránh conflict, đọc SKILL.md của từng skill trước khi cài combo. Thực tế mình dùng Combo 1 (frontend-design + Vercel Labs + web-artifacts-builder) chưa gặp conflict nào nghiêm trọng.

Tự viết design skill riêng có khó không?

Không khó nếu bạn đã có design system sẵn. Một SKILL.md tốt chỉ cần 300-600 tokens, chứa: bộ màu hex cụ thể, font stack, spacing scale, và 10-15 quy tắc component. Quan trọng là viết dưới dạng instruction rõ ràng (“Always use”, “Never use”) thay vì description mơ hồ. Bài hướng dẫn về tạo skill có hướng dẫn từng bước.

Figma MCP có cần trả phí không?

Figma MCP dùng Figma REST API, vốn miễn phí cho tất cả Figma tiers kể cả Starter (free). Bạn chỉ cần tạo Personal Access Token trong Figma Settings. MCP server chạy locally, không có chi phí server. Chi phí duy nhất là token Claude Code cho mỗi request, giống các task khác.

Skills có hoạt động với tất cả các plan Claude Code không?

Có, skills hoạt động với tất cả plans, từ Pro, Max, đến Team và Enterprise. Plan Max cho phép context window lớn hơn, nghĩa là bạn cài nhiều skills cùng lúc mà ít lo về context overflow. Với plan Pro, nên giới hạn ở 3-4 skills active cùng lúc để tối ưu performance và chi phí token.

Kết Luận

Qua bài này, mình muốn nhấn mạnh một điều: design skills không phải “nice to have” nữa. Khi 84% developer đang dùng AI tools (Stack Overflow 2025), chất lượng output UI sẽ là thứ phân biệt sản phẩm của bạn với phần còn lại. Skills là cách đơn giản nhất để nâng bar đó lên mà không cần thêm thời gian thiết kế thủ công.

Nếu phải chọn chỉ một skill để bắt đầu ngay hôm nay, đó là frontend-design. 277K developer đã chọn nó không phải ngẫu nhiên. Cài trong 30 giây, thấy kết quả khác biệt ngay ở prompt tiếp theo.

Khi đã quen, thêm Vercel Labs bundle cho React projects, UI/UX Pro Max cho visual-heavy work, và Bencium UX Designer nếu accessibility là yêu cầu. Ba combo mình gợi ý ở phần trên đã được test thực tế và chạy tốt cùng nhau mà không conflict.

Đọc thêm lộ trình 6 levels Claude Code để biết bạn đang ở đâu và nên học gì tiếp theo.

Bạn đang dùng design skill nào chưa? Hay có skill nào mình bỏ sót trong bài này? Comment bên dưới, mình sẽ cập nhật bảng so sánh nếu có thêm repos đáng chú ý từ cộng đồng.