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

ss-build — Quy trình dựng giao diện theo StyleSeed

Skill dựng màn hình theo phương pháp StyleSeed: chốt bộ quy tắc trước khi viết code, rồi bắt buộc qua cổng điểm code và cổng kiểm tra pixel trước khi trình bày kết quả.

Thiết kế · UINâng cao★ 968⑂ 89Điểm AI 7/10Cập nhật lần cuối: 29 thg 9, 2026

Làm được gì

  • Ưu tiên registry: nếu có .styleseed/project.json và artifacts/index.json, skill giải quyết artifact ID rồi chỉ đọc bundle/manifest tương ứng, không được quay về bundle legacy.
  • Buộc khai báo bộ quy tắc hiệu lực bằng một dòng trước khi code, ví dụ operations-console × SaaS × dashboard × swiss × locked brand tokens.
  • Áp dụng hợp đồng của grammar (bố cục, mật độ, chữ, màu, trạng thái, responsive, motion) và hình thái của brand recipe.
  • Vòng lặp cổng code với /ss-score: tối đa 3 lượt sửa, dừng sớm khi đạt ≥80; kịch bản chức năng thất bại/bị bỏ qua sẽ chặn hoàn thành.
  • Vòng lặp cổng pixel với /ss-verify trên mọi viewport; nếu không có renderer thì phải nói rõ là đã bỏ qua, không được ngụ ý đã pass.

Phù hợp với ai

  • Đội frontend/sản phẩm đang dùng engine thiết kế StyleSeed.
  • Nhóm muốn ép AI đi qua cổng chất lượng (điểm số + ảnh chụp) thay vì chấp nhận UI ngẫu hứng.
  • Tổ chức cần giữ nguyên design token và brand lock trong mọi màn hình.

Ví dụ sử dụng

  1. "Dựng màn hình dashboard cho console vận hành" → giải quyết artifact, khai báo rule set, code, chấm /ss-score, kiểm tra /ss-verify, rồi báo cáo kèm bằng chứng.
  2. Rebuild trang cài đặt → định nghĩa trước kết quả cần đạt ("lưu rồi reload vẫn còn", "lưu lỗi vẫn giữ bản nháp") và chạy test thật để chứng minh.
  3. Dự án legacy chưa có STYLESEED.md → chạy /ss-setup trước khi viết bất kỳ code UI nào.

· · · 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 && mkdir -p ~/.claude/skills && cp -r styleseed/engine/.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/bitjaru/styleseed.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy toàn bộ skill của engine: cp -r styleseed/engine/.claude/skills/* ~/.claude/skills/
    • ss-build tham chiếu tương đối tới ss-setup, ss-resolve, ss-score, ss-verify, ss-update, nên hãy copy cả thư mục thay vì một file.
  5. Khởi động lại Claude Code, vào thư mục dự án và gọi /ss-build màn hình dashboard.
  6. Nếu là dự án mới, chạy /ss-setup trước để tạo .styleseed/ hoặc STYLESEED.md.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT