StyleSeed — Trung tâm workflow thiết kế UI
Một điểm vào duy nhất để xây, kiểm tra và tinh chỉnh UI mà vẫn giữ nguyên các lựa chọn thiết kế đã duyệt của dự án.
Làm được gì
StyleSeed nhận yêu cầu về UI rồi chọn đúng một trong 22 workflow nội bộ (build, setup, studio, reference, audit, review, score, verify, dial, restyle, tokens, motion, page, component, pattern, a11y, lint, flow, copy, feedback, update, resolve) để thực hiện.
- Luôn đọc
.styleseed/project.jsonvà registry artifact trước, nhờ đó không ghi đè token, khoảng cách hay phong cách đã được phê duyệt. - Các yêu cầu audit, chấm điểm, verify hoặc xem trạng thái được xử lý chỉ đọc, không tự ý sửa code.
- Registry thiếu hoặc không hợp lệ bị coi là lỗi, không âm thầm quay về bundle cũ toàn cục.
Dành cho ai
- Lập trình viên frontend / người làm design system cần giữ màu, spacing, typography nhất quán.
- Nhóm thường xuyên thấy mỗi màn hình mới lại lệch style.
- Người muốn quản lý cả accessibility, microcopy và các trạng thái loading/empty/error một cách có hệ thống.
Ví dụ sử dụng
- "Dựng màn hình dashboard mới" → chuyển sang workflow build, tuân thủ design lock của dự án.
- "Theo ảnh chụp này để chỉnh tông màu" → workflow reference dùng screenshot/URL/Figma export làm nguồn tham chiếu.
- "Kiểm tra lỗi accessibility của trang này" → workflow a11y audit rồi chỉ sửa những gì bạn yêu cầu.
- "Chỉ cho tôi biết trạng thái cài đặt và bundle" → dùng công cụ chỉ đọc của resolve để báo cá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/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)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
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 skills/styleseed từ repo GitHub bitjaru/styleseed vào ~/.claude/skills/bitjaru-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 && mkdir -p ~/.claude/skills && cp -r /tmp/styleseed/skills/styleseed ~/.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.
- Mở Terminal.
- Tải repo:
git clone https://github.com/bitjaru/styleseed.git - Tạo thư mục skill:
mkdir -p ~/.claude/skills - Copy skill:
cp -r styleseed/skills/styleseed ~/.claude/skills/ - Kiểm tra
~/.claude/skills/styleseed/có cảSKILL.mdvà thư mụcworkflows/(thiếu workflow thì skill không chạy). - Khởi động lại Claude Code, rồi chạy "StyleSeed setup" trong dự án để tạo registry
.styleseed. - Sau đó chỉ cần nói tự nhiên, ví dụ: "StyleSeed build giúp tôi trang đăng nhập".