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

ss-build — Dựng màn hình theo StyleSeed

Skill bắt buộc chốt bộ quy tắc StyleSeed trước, rồi mới dựng UI và cho qua cổng chấm điểm code lẫn kiểm tra pixel trước khi báo cáo.

Thiết kế · UINâng cao★ 909⑂ 82Điểm AI 6/10Cập nhật lần cuối: 22 thg 8, 2026

Làm được gì

  • Ưu tiên registry .styleseed (project.json, artifacts/index.json) và chỉ đọc bundle/manifest của artifact tương ứng, không dùng bundle legacy toàn cục.
  • Nếu chưa có STYLESEED.md thì chạy /ss-setup; nếu có ảnh tham chiếu lạ thì chạy /ss-reference trước.
  • Bắt tuyên bố "bộ quy tắc hiệu lực" trên một dòng trước khi viết code, giải quyết xung đột theo thứ tự thẩm quyền.
  • Vòng lặp cổng: /ss-score tối đa ~3 lượt cho đến khi đạt ≥80, sau đó /ss-verify kiểm tra pixel theo từng viewport/trạng thái.
  • Báo cáo cuối kèm bằng chứng: bộ quy tắc, điểm số, trạng thái kiểm tra thị giác, các sửa đổi quan trọng.

Phù hợp với ai

  • Đội đã dùng hoặc đang cân nhắc hệ thống thiết kế StyleSeed.
  • Lập trình viên frontend mệt mỏi vì UI do AI sinh ra mỗi lần một phong cách.
  • Người phụ trách design system muốn ép checklist trạng thái loading/empty/error/focus và accessibility.

Ví dụ sử dụng

  • "Dựng màn hình dashboard cho console vận hành" → tuyên bố operations-console × SaaS × dashboard × enterprise-workbench × swiss × locked brand tokens rồi build và qua cổng điểm.
  • Thêm trang cấu hình mới khi brand token đã bị khóa, nhưng khóa không được phép bỏ qua tiêu chí accessibility.
  • Môi trường không có renderer: skill nói rõ đã bỏ qua cổng pixel thay vì ngầm coi là đạt.

· · · 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/ss-build/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/ss-build từ repo GitHub bitjaru/styleseed vào ~/.claude/skills/ss-build/ 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 && mkdir -p ~/.claude/skills && cp -r /tmp/styleseed/engine/.claude/skills/ss-build ~/.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 kho: git clone https://github.com/bitjaru/styleseed.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép: cp -r styleseed/engine/.claude/skills/ss-build ~/.claude/skills/
  5. Sao chép thêm các skill/command đi kèm: ss-setup, ss-resolve, ss-score, ss-verify.
  6. Khởi động lại Claude Code, chạy /ss-setup tại thư mục dự án để tạo STYLESEED.md.
  7. Gọi /ss-build mô tả màn hình cần dựng.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT