AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

ss-dial — Núm điều chỉnh trục thiết kế

Kỹ năng điều chỉnh đúng một trục thiết kế (dày đặc hơn, đậm hơn, góc nhọn hơn...) theo các bậc cố định, kèm guardrail và kiểm tra lại.

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

Có tác dụng gì

  • Di chuyển 7 trục thiết kế theo bậc định trước: mật độ (compact→comfortable→spacious), độ tương phản phân cấp (subtle→dramatic), bán kính góc (sharp↔soft↔pill), độ nổi (flat→lifted), màu (độ bão hòa/nhiệt độ), độ đậm font, năng lượng chuyển động.
  • Không "tăng mãi": khi đã ở cuối thang, nó báo lại và dừng thay vì tự bịa giá trị.
  • Guardrail cho từng trục: không dùng drop shadow ở dark mode, luôn chỉ một màu accent, body ≤ 500 weight, số liệu/tiền không animate, tôn trọng prefers-reduced-motion.
  • Sau khi đổi, ghi giá trị vào registry (hoặc lock legacy), recompile rồi chạy lại gate và báo trục: cũ → mới, phạm vi và lỗi còn lại.
  • Từ mô tả cảm xúc ("premium", "editorial") được chuyển sang /ss-restyle vì đó là tổ hợp nhiều trục.

Phù hợp với ai

  • Người duy trì design system trong dự án dùng engine styleseed (.styleseed/project.json, bundles, manifests).
  • Ai từng sửa token bằng tay rồi làm vỡ grid hoặc vô tình thêm màu accent thứ hai.
  • Frontend/design engineer muốn thay đổi giao diện một cách nhất quán, có dấu vết.

Ví dụ sử dụng

  1. /ss-dial density denser — giảm một bậc mật độ cho artifact được chỉ định, vẫn giữ kích thước vùng nhấn tối thiểu.
  2. /ss-dial radius sharper — thay toàn bộ bảng mapping bán kính như một khối để 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 accent, dẫn xuất lại tint theo công thức alpha 10–14%, kiểm tra tương phản ≥ 4.5:1.

· · · 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 AI 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.
  2. Clone repo: git clone https://github.com/bitjaru/styleseed.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r styleseed/engine/.claude/skills/ss-dial ~/.claude/skills/
  5. Skill này tham chiếu tài liệu của ss-update và ss-resolve, nên nên copy cả bộ: cp -r styleseed/engine/.claude/skills/* ~/.claude/skills/
  6. Khởi động lại Claude Code và gọi trong dự án đã có .styleseed/, ví dụ /ss-dial density denser.
  7. Nếu chưa có registry styleseed, hãy hoàn tất thiết lập styleseed trước khi dùng.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT