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

ss-dial — Chỉnh một trục thiết kế

Biến các yêu cầu kiểu "dày hơn", "đậm hơn", "bo góc sắc hơn" thành một bước dịch chuyển chính xác trên đúng một trục thiết kế, áp dụng đồng bộ toàn dự án.

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

Làm được gì

  • Di chuyển đúng một trong 7 trục: Mật độ, Độ tương phản phân cấp, Bo góc, Độ nổi/bóng, Màu (bão hòa & nhiệt độ), Độ đậm font, Năng lượng chuyển động — mỗi lần đúng một nấc.
  • Mỗi nấc có bảng token cụ thể (ví dụ airy = space-y-10 / p-8 / gap-8) và được áp dụng cho mọi file dùng token đó, không chỉ component đang mở.
  • Guardrail luôn thắng dial: giữ lưới 8px, vùng chạm ≥ 44px, chỉ một màu nhấn duy nhất, không dùng drop shadow ở chế độ tối, độ mờ bóng ≤ 8%.
  • Sau khi đổi, ghi vị trí mới vào STYLESEED.md rồi chạy lại cổng chất lượng /ss-score đến khi ≥ 80 điểm; nếu điểm tụt thì sửa hoặc hoàn tác.
  • Có chặn biên: nếu đã ở dense hay sharp thì dừng và báo, không "tăng mãi".

Phù hợp với ai

  • Đội frontend/design system đã dùng bộ styleseed (STYLESEED.md, /ss-build, /ss-score).
  • Dự án Tailwind hay gặp cảnh mỗi component chỉnh một kiểu khiến giao diện mất nhất quán.
  • Người muốn quản trị giao diện theo trục có thể đo lường thay vì theo cảm tính.

Ví dụ sử dụng

  1. /ss-dial density denser → từ comfortable sang compact: space-y-6→4, p-6→4, gap-6→4 trên toàn UI, nhưng dừng lại nếu nút bấm sắp nhỏ hơn 44px.
  2. /ss-dial radius sharper → đổi nguyên bảng ánh xạ bo góc (nút, input, card, panel trong) sang sharp, tránh kiểu "card vuông + nút viên thuốc".
  3. /ss-dial color more-muted → giảm 10–15% độ bão hòa HSL của màu nhấn và tính lại các tint 10–14% alpha cho cả light lẫn dark, tuyệt đối không thêm màu thứ hai.

Lưu ý: các từ mang tính "mood" (premium, editorial, playful) là tổ hợp nhiều trục — hãy dùng /ss-restyle.

· · · 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-dial/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-dial từ repo GitHub bitjaru/styleseed vào ~/.claude/skills/ss-dial/ 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/ss-dial ~/.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 và vào thư mục làm việc của bạn.
  2. Tải mã nguồn: git clone https://github.com/bitjaru/styleseed.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Chép riêng skill này: cp -r styleseed/engine/.claude/skills/ss-dial ~/.claude/skills/
    • Vì skill phụ thuộc /ss-build, /ss-score, /ss-restyle, nên chép cả bộ: cp -r styleseed/engine/.claude/skills/* ~/.claude/skills/
  5. Khởi động lại Claude Code và kiểm tra /ss-dial đã xuất hiện.
  6. Nếu dự án chưa có file khóa STYLESEED.md, chạy /ss-setup hoặc /ss-build trước.
  7. Gọi theo cú pháp "trục + hướng", ví dụ /ss-dial weight bolder.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT