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

StyleSeed — Engine thiết kế UI

Một điểm vào duy nhất điều phối 22 workflow để dựng UI, tạo design token, review và kiểm chứng kết quả render.

Thiết kế · UITrung cấp★ 967⑂ 89Điểm AI 9/10Cập nhật lần cuối: 1 thg 10, 2026

Làm được gì

  • Đọc mục tiêu của bạn và chọn đúng một workflow phù hợp (build, setup, tokens, review, verify, a11y... tổng 22 loại).
  • Ưu tiên đọc registry .styleseed/project.json để giữ nguyên các quyết định thiết kế đã được duyệt của dự án.
  • Các yêu cầu audit, score, status được xử lý chỉ đọc, không tự ý sửa code.
  • Bao phủ toàn bộ công việc UI: token màu, khoảng cách/mật độ, animation, microcopy, trạng thái loading/empty/error, kiểm tra accessibility.

Phù hợp với ai

  • Lập trình viên frontend và người quản lý design system muốn giữ chất lượng UI nhất quán
  • Dev solo hay team nhỏ thường bị lệch spacing, màu sắc giữa các trang
  • Người muốn dựng UI theo mẫu từ screenshot, URL hoặc export Figma

Ví dụ sử dụng

  1. "Dựng lại trang dashboard" → workflow build tạo màn hình theo rule của dự án
  2. "Màn hình này có gì sai?" → workflow audit chỉ phê bình UX, không sửa file
  3. "Đổi màu thương hiệu, tạo lại token" → workflow tokens sinh palette semantic mới
  4. "Kiểm tra khoảng cách thực tế theo pixel" → workflow verify soi output đã render

· · · 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/bitjaru/styleseed/HEAD/engine/.claude/skills/styleseed/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 engine/.claude/skills/styleseed từ repo GitHub bitjaru/styleseed vào ~/.claude/skills/styleseed/ 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/bitjaru/styleseed.git /tmp/styleseed && cp -r /tmp/styleseed/engine/.claude/skills/styleseed ~/.claude/skills/styleseed

⚠ Đâ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/bitjaru/styleseed.git /tmp/styleseed
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy toàn bộ skill (kèm workflow và script): cp -r /tmp/styleseed/engine/.claude/skills/styleseed ~/.claude/skills/styleseed
  5. Kiểm tra: ls ~/.claude/skills/styleseed/workflows phải thấy các thư mục ss-build, ss-tokens... Nếu thiếu, skill sẽ không chạy.
  6. Khởi động lại Claude Code, rồi yêu cầu kiểu "StyleSeed build trang đăng nhập".
  7. Với dự án mới, chạy "StyleSeed setup" trước để chốt nền tảng thiết kế.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT