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

Thiết kế Dashboard dữ liệu

Kỹ năng dựng màn hình dày đặc số liệu (analytics console, terminal giao dịch) bằng biểu đồ SVG nội tuyến lấy màu từ design token, kèm hợp đồng accessibility.

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

Làm được gì

  • Đưa ra trình tự bố cục theo dải (band) thay vì lưới thẻ bằng nhau: chỉ số chủ đạo + biểu đồ riêng → vài số thứ cấp → ba dạng biểu đồ khác nhau → bảng sắp xếp được và feed → dòng footer kết trang.
  • Hướng dẫn hình học cho 14 loại biểu đồ (nến OHLC, volume, depth, stacked area, waterfall, scatter, ma trận tương quan, donut, gauge, sparkline, heatmap, order book…) bằng SVG nội tuyến, không cần thư viện biểu đồ.
  • Quy định hợp đồng accessibility từng loại biểu đồ: role="img", aria-label/<title>+<desc>, không mã hóa ý nghĩa chỉ bằng màu, caption/scope/aria-sort cho bảng.
  • Liệt kê các bẫy chỉ lộ ra khi đo: màu biểu đồ dùng làm màu chữ chỉ đạt 2.65:1 ở dark mode, auto-fit âm thầm bỏ một cột, panel bị kéo giãn để lại khoảng trống viền, .sr-only làm phình chiều rộng cuộn…
  • Cung cấp vòng lặp chạy các script kiểm tra (đo render, states, axe, responsive, interactive) rồi bắt buộc chụp màn hình xem bằng mắt ở cả hai theme.

Dành cho ai

  • Lập trình viên front-end làm console phân tích, terminal giao dịch, màn hình giám sát.
  • Người muốn tự vẽ biểu đồ bằng SVG thuần, tránh phụ thuộc runtime.
  • Người phụ trách design system cần đạt WCAG AA thật sự ở cả light và dark mode.

Ví dụ sử dụng

  1. "Dựng dashboard doanh thu tháng" → chỉ số doanh thu lớn gấp 3 lần body kèm biểu đồ, dưới là donut theo kênh + bar xếp hạng + sparkline, cuối là bảng chi tiết sắp xếp được.
  2. "Tôi cần màn hình terminal giao dịch" → biểu đồ nến + volume cùng thang x + đường trung bình động, bên cạnh là depth chart và order book.
  3. "Ma trận tương quan của tôi trông sai" → kiểm tra tính đối xứng và đường chéo bằng 1, sinh lại tọa độ bằng script tất định thay vì gõ tay.

· · · 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/plugin87/ux-ui-agent-skills/HEAD/.claude/skills/data-dashboard/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 .claude/skills/data-dashboard từ repo GitHub plugin87/ux-ui-agent-skills vào ~/.claude/skills/data-dashboard/ 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/plugin87/ux-ui-agent-skills.git && cp -r ux-ui-agent-skills/.claude/skills/data-dashboard ~/.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.
  2. Clone toàn bộ repo (skill đọc tokens, scripts, examples ở thư mục gốc nên chỉ chép riêng thư mục skill sẽ không chạy): 
    git clone https://github.com/plugin87/ux-ui-agent-skills.git
  3. Nếu chỉ muốn dùng skill, chép thư mục vào Claude: 
    cp -r ux-ui-agent-skills/.claude/skills/data-dashboard ~/.claude/skills/
  4. Để có đủ bộ kit, chạy lệnh khởi tạo trong repo: 
    cd ux-ui-agent-skills && npx ux-ui-agent-skills init
  5. Cài Node.js 18 trở lên vì các script gate chạy bằng Node và trình duyệt headless.
  6. Khởi động lại Claude Code, rồi yêu cầu kiểu "tạo dashboard phân tích". Nếu Claude báo KIT_MISSING, hãy xem lại bước 2–4.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT