Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Trình tạo code UI (design-code)

Sinh code component UI hoàn chỉnh, dùng design token và đạt chuẩn accessibility cho hầu hết framework, từ React+Tailwind đến SwiftUI, Flutter.

Thiết kế · UITrung cấp★ 806⑂ 85Điểm AI 8/10Cập nhật lần cuối: 26 thg 8, 2026

Làm được gì

  • Chọn adapter phù hợp với framework bạn yêu cầu (React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Lit, React Native, Flutter, Jetpack Compose, CSS thuần, CSS-in-JS) rồi sinh code component/màn hình.
  • Không hardcode màu, kích thước, radius, font — mọi giá trị phải trỏ về một theme token duy nhất của dự án.
  • Bao gồm sẵn 8 trạng thái (Default/Hover/Focus/Active/Disabled/Loading/Error/Selected), dark mode, mobile-first và prefers-reduced-motion.
  • Áp dụng ARIA pattern, primitive Modal/Button dùng chung có focus trap và trả focus khi đóng, UX xác nhận cho hành động xoá.
  • Trước khi kết luận "xong", bắt buộc chạy các script kiểm tra (lint_hardcodes.py, contrast.py, verify_states.mjs, taste_audit.mjs) và báo cáo kết quả thật.

Phù hợp với ai

  • Lập trình viên frontend, đội xây dựng design system hoặc thư viện UI.
  • Người mệt mỏi vì code UI do AI sinh ra mỗi lần một bảng màu khác và thiếu accessibility.
  • Nhóm cần giữ cùng một hệ token xuyên suốt nhiều trang/màn hình.

Ví dụ sử dụng

  1. "Tạo modal xác nhận thanh toán bằng Next.js + Tailwind" → file hoàn chỉnh dựa trên primitive Modal, có role="dialog", Escape, trả focus.
  2. "Màn hình xoá tài khoản" → luồng destructive với nút xác nhận ghi rõ "Delete account" và bước type-to-confirm.
  3. "Chuyển component Button này sang SwiftUI" → map token theo adapter SwiftUI và dựng lại style cho từng trạng thái.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/plugin87/ux-ui-agent-skills/HEAD/.claude/skills/design-code/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục .claude/skills/design-code từ repo GitHub plugin87/ux-ui-agent-skills vào ~/.claude/skills/design-code/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/plugin87/ux-ui-agent-skills.git && mkdir -p ~/.claude/skills && cp -r ux-ui-agent-skills/.claude/skills/* ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở terminal.
  2. Clone repo: git clone https://github.com/plugin87/ux-ui-agent-skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy toàn bộ skill (skill này phụ thuộc các file frameworks/, tokens/, scripts/ nên đừng chỉ copy một thư mục): cp -r ux-ui-agent-skills/.claude/skills/* ~/.claude/skills/
  5. Kiểm tra Node.js và Python 3 đã có để chạy script kiểm tra: node -v && python3 -V
  6. Khởi động lại Claude Code, sau đó yêu cầu kèm tên framework, ví dụ: "Viết component Button accessible bằng React + Tailwind".
Xem mã nguồn trên GitHub ↗