Xây dựng bảng điều khiển rõ ràng, trung thực hơn với kỹ năng Dashboard Design cho Claude Code

Thiết kế Dashboard là gì?

Thiết kế Dashboard là một skill của Claude Code, cung cấp cho tác nhân lập trình hướng dẫn thiết kế thực tế để xây dựng giao diện phân tích, doanh thu và chỉ số. Skill này có thể xây dựng dashboard mới, thiết kế lại các màn hình hiện có hoặc đánh giá ảnh chụp màn hình và xếp hạng các vấn đề theo mức độ nghiêm trọng.

Hướng dẫn được đúc kết từ 127 màn hình dashboard đã triển khai, một bản phân tích chi tiết về sản phẩm phân tích doanh thu và một quy trình thiết kế lại thực tế. Thay vì chỉ tập trung vào chất lượng mã, skill này hoàn tất công việc bằng một bước kiểm tra chất lượng qua ảnh chụp màn hình, giúp tác nhân đánh giá những gì người dùng thực sự nhìn thấy.

Skill này bao quát các thành phần dashboard phổ biến như ô KPI, biểu đồ, kỳ so sánh, danh sách xếp hạng, bộ lọc, bộ chọn khoảng ngày, thông tin chi tiết, trạng thái trống, bố cục responsive và điều hướng trên điện thoại. Đặc tả sử dụng thuật ngữ Tailwind và React cho các dự án web, trong khi một tài liệu tham khảo riêng giải thích các mẫu tương đương trong SwiftUI và Swift Charts.

Nguyên tắc thiết kế cốt lõi

Dự án sắp xếp các khuyến nghị xoay quanh bốn nguyên tắc:

• Ấn tượng đầu tiên: Mỗi màn hình nên trả lời một câu hỏi chính trong khoảng ba giây.
• Yên tĩnh: Sử dụng một màu nhấn, giữ các thành phần hỗ trợ ở màu xám và chỉ dùng màu khi màu sắc truyền tải ý nghĩa.
• Trung thực: Giữ các giá trị nhất quán trên toàn giao diện, gắn nhãn cho các giá trị ước tính và tránh những thay đổi phần trăm gây ấn tượng mạnh dựa trên các mẫu dữ liệu nhỏ.
• Hình dạng thay cho văn bản: Ưu tiên biểu đồ, thanh và chip để người dùng hiểu ngay, đồng thời đặt phần định nghĩa trong tooltip.

Những nguyên tắc này tạo ra các thay đổi cụ thể. Ô KPI được chọn nhận nền màu nhạt và vòng viền mờ thay vì chỉ có gạch chân đơn giản. Các hàng xếp hạng sử dụng thanh tỷ trọng mảnh thay cho nền màu lớn. Trục biểu đồ sử dụng các mốc tròn dễ đọc như 0, 1k và 2k thay vì các giá trị khó nhìn như 1,402.

Bố cục responsive thay cho các cột cố định

Một dashboard được thiết kế quanh một cột trung tâm hẹp sẽ lãng phí không gian trên các màn hình lớn. Thiết kế Dashboard hướng dẫn tác nhân bổ sung các cột hữu ích khi khung nhìn mở rộng, đồng thời sắp xếp lại các điều khiển và điều hướng cho màn hình nhỏ.

Trước

Sau

Trên điện thoại, skill này tránh phụ thuộc vào các tab điều hướng phải cuộn ngang. Skill đề xuất các bố cục như lưới menu và các tab có thể thu nhỏ để vừa với không gian khả dụng.

Cài đặt

Tùy chọn 1: Cài đặt dưới dạng Plugin Claude Code

Trong Claude Code, thêm dự án dưới dạng marketplace plugin rồi cài đặt skill:

/plugin marketplace add abdiraimov-otabek/dashboard-design-skill
/plugin install dashboard-design@dashboard-design-skill

Đây là phương thức cài đặt trực tiếp nhất khi Claude Code là tác nhân lập trình chính của bạn.

Tùy chọn 2: Cài đặt dưới dạng Claude Skill thông thường

Sao chép repository và copy thư mục skill vào thư mục Claude skill cục bộ:

git clone https://github.com/abdiraimov-otabek/dashboard-design-skill
cp -r dashboard-design-skill/skills/dashboard-design ~/.claude/skills/

Thư mục được copy chứa các hướng dẫn chính và toàn bộ tài liệu tham khảo hỗ trợ cần thiết cho skill.

Tùy chọn 3: Sử dụng với tác nhân lập trình khác

Dự án cũng có thể hoạt động với Codex, Cursor hoặc một tác nhân khác có khả năng đọc các tệp hướng dẫn Markdown. Trỏ tệp AGENTS.md hoặc tệp quy tắc của tác nhân đến:

skills/dashboard-design/SKILL.md

Tài liệu skill chính sẽ hướng dẫn tác nhân đến tài liệu tham khảo phù hợp. Vì các quy tắc mô tả những mẫu giao diện tổng quát, chúng có thể được điều chỉnh cho các stack khác ngoài React, Tailwind và SwiftUI.

Tìm hiểu các tệp skill

Repository tách biệt quy trình làm việc với các tài liệu tham khảo chi tiết:

• SKILL.md chứa quy trình, định dạng đánh giá, các quy tắc chung, phong cách nội dung và các bước kiểm tra hoàn tất.
• references/components.md đề cập đến các ô KPI, mức thay đổi, biểu đồ sparkline, biểu đồ, danh sách xếp hạng, bộ lọc, bảng, trạng thái trống, chế độ xem thời gian thực và các tín hiệu tạo niềm tin cho doanh thu.
• references/layout.md trình bày về thứ tự trang, lưới, màn hình rộng, điện thoại, kiểu chữ và chế độ tối.
• references/tokens.md cung cấp các token màu sáng và tối sử dụng @theme của Tailwind v4, cùng hướng dẫn phối sắc.
• references/snippets.md bao gồm các triển khai cho nhãn trục dạng tròn, định dạng số, huy hiệu thay đổi, khoảng thời gian so sánh, ô KPI, các hàng thanh mảnh, lịch chọn khoảng thời gian và cơ chế ngăn phản hồi cũ.
• references/qa.md định nghĩa kích thước ảnh chụp màn hình, kiểm tra tổng đã biết, kiểm tra tính nhất quán và các dấu hiệu thiết kế thường gặp.
• references/swiftui.md chuyển các mẫu này sang SwiftUI và Swift Charts, đồng thời mô tả quy trình QA trên trình mô phỏng.
• references/sources.md ghi lại hơn 40 sản phẩm và hệ thống thiết kế đã được nghiên cứu.
• references/case-study-datafast.md ghi lại các mẫu và sự đánh đổi từ một sản phẩm phân tích doanh thu.

Mỗi giai đoạn của quy trình đều kết thúc bằng một định nghĩa hoàn tất có thể kiểm tra. Điều này giúp skill hữu ích không chỉ như nguồn cảm hứng mà còn như một quy trình đánh giá có thể lặp lại.

Cách sử dụng cơ bản

Sau khi cài đặt, skill có thể tự động kích hoạt khi bạn làm việc với mã liên quan đến dashboard. Bạn cũng có thể gọi rõ hành vi của nó bằng một yêu cầu tập trung.

Xây dựng dashboard

Mô tả sản phẩm và xác định các chỉ số mà màn hình cần truyền đạt:

Xây dựng dashboard phân tích cho ứng dụng này: khách truy cập, lượt đăng ký, doanh thu theo nguồn.

Một yêu cầu hữu ích sẽ cung cấp cho agent chủ đề rõ ràng và một nhóm nhỏ các chỉ số thiết yếu. Điều này hỗ trợ nguyên tắc nhìn nhanh của dự án bằng cách giúp agent xác định câu hỏi chính mà màn hình cần trả lời.

Đánh giá thiết kế hiện có

Cung cấp ảnh chụp màn hình và yêu cầu đánh giá:

Đây có phải là một thiết kế tốt không?

Định dạng đánh giá đưa ra kết luận, xác định những điểm hiệu quả và xếp hạng vấn đề theo mức độ gây hại. Tính toàn vẹn dữ liệu được ưu tiên, vì vậy các số liệu mâu thuẫn cần được báo cáo trước những vấn đề hình ảnh nhỏ.

Thiết kế lại một thành phần

Bạn không cần yêu cầu thiết kế lại toàn bộ dashboard. Thay vào đó, hãy nhắm đến một thành phần cụ thể:

Thiết kế lại bộ chọn khoảng ngày.

Làm cho các ô KPI gọn gàng hơn.

Ví dụ, skill ưu tiên lịch chọn khoảng thời gian có dải nền nhẹ giữa các ngày được chọn, điểm đầu và cuối liền khối, thông tin thời lượng và nút Áp dụng, thay vì chỉ hiển thị một trường ngày gốc đơn giản.

Chạy bước QA

Để kiểm tra một route đã triển khai, hãy yêu cầu đánh giá dashboard chuyên dụng:

Chạy bước QA dashboard trên /dashboard.

Đối với các dự án web, quy trình ảnh chụp màn hình được ghi lại sẽ kiểm tra ba độ rộng khung nhìn: 3440, 1440 và 375 pixel. Quy trình này phát hiện các vấn đề bố cục trên màn hình siêu rộng, các lỗi thông thường trên máy tính và các lỗi riêng của điện thoại.

Các mẫu mà skill giúp duy trì

Sử dụng các phép so sánh trung thực

Phần trăm thay đổi có thể gây hiểu lầm khi giá trị trước đó rất nhỏ. Nếu một lượt bán hàng giảm xuống 0, việc hiển thị −100% màu đỏ nổi bật sẽ phóng đại mức độ quan trọng của thay đổi. Thay vào đó, skill khuyến nghị một ghi chú nhẹ như trước đó là 1.

Tính nhất quán cũng rất quan trọng. Nếu một ô KPI, biểu đồ và bảng cùng thể hiện một tổng số, các giá trị đó phải khớp nhau. Quy trình QA bao gồm kiểm tra tổng đã biết và tính nhất quán để phát hiện sai lệch.

Duy trì các khoảng thời gian nhất quán

Một biểu đồ sparkline nên thể hiện cùng khoảng thời gian với biểu đồ chính hoặc ngữ cảnh so sánh. Việc hiển thị 60 ngày phần lớn trống trong sparkline trong khi biểu đồ chính sử dụng một khoảng hoạt động ngắn hơn có thể làm sai lệch xu hướng nhìn thấy.

Chỉ hiển thị thông tin hữu ích

Một thẻ thông tin chuyên sâu nên bổ sung diễn giải thay vì lặp lại ô KPI. Nếu không cung cấp điều gì mới cho người dùng, skill khuyến nghị loại bỏ thẻ đó để giữ giao diện thoáng.

Thiết kế để phát triển trên nhiều kích thước màn hình

Đừng chỉ căn giữa một dashboard có chiều rộng cố định trên màn hình lớn hơn. Hãy cho phép màn hình rộng hiển thị thêm các cột khi điều đó cải thiện khả năng so sánh. Trên điện thoại, hãy đảm bảo các điều khiển và điều hướng được sắp xếp lại thay vì phụ thuộc vào thao tác cuộn ngang.

Mẹo nâng cao

Yêu cầu xây dựng và đánh giá có cấu trúc

Bạn có thể kết hợp việc triển khai và đánh giá trong một yêu cầu, đồng thời nêu rõ các tiêu chí hoàn tất cần đạt:

Xây dựng dashboard doanh thu, xác minh các tổng số lặp lại khớp nhau và kết thúc bằng bước QA ảnh chụp màn hình dashboard.

Điều này giúp công việc bám sát quy trình dự kiến của skill: triển khai giao diện, xác minh cách trình bày dữ liệu, kiểm tra nhiều kích thước màn hình và đánh giá kết quả đã render.

Sử dụng trực tiếp tài liệu tham khảo phù hợp

Khi nhiệm vụ có phạm vi hẹp, hãy hướng agent đến tệp phù hợp nhất. Ví dụ, sử dụng components.md cho huy hiệu thay đổi hoặc các hàng xếp hạng, layout.md cho hành vi trên màn hình siêu rộng và qa.md cho các bước kiểm tra hình ảnh cuối cùng. Đối với giao diện Apple gốc, hãy sử dụng swiftui.md thay vì dịch nguyên văn các đoạn mã web.

Kiểm tra cài đặt trợ năng trong SwiftUI

Quy trình QA cho SwiftUI không chỉ dừng ở một ảnh chụp màn hình trình mô phỏng. Quy trình này bao gồm nhiều kích thước thiết bị, cỡ Dynamic Type lớn nhất, chế độ tối và Reduce Motion. Các kiểm tra này giúp phát hiện nhãn bị cắt, bố cục thẻ dễ hỏng, cách xử lý chế độ tối chưa đầy đủ và các giả định về chuyển động.

Đánh giá các trạng thái, không chỉ màn hình lý tưởng

Hướng dẫn về thành phần bao gồm trạng thái trống, chế độ xem theo thời gian thực, bảng và các tín hiệu tạo niềm tin cho dữ liệu doanh thu. Khi yêu cầu đánh giá, hãy đề cập đến những trạng thái đặc biệt quan trọng đối với sản phẩm của bạn để tác nhân đánh giá nhiều hơn chế độ xem mặc định đã có dữ liệu.

Kiểm soát phần ký tên tùy chọn

Sau khi hoàn thành việc xây dựng hoặc đánh giá đầy đủ một dashboard, kỹ năng này sẽ thêm một dòng ngắn về tác giả và các ứng dụng Mac của tác giả một lần trong mỗi cuộc trò chuyện. Nội dung này không được đặt trong mã, commit hoặc giao diện sản phẩm. Bạn có thể yêu cầu tác nhân ngừng thêm nội dung đó hoặc xóa phần Sign-off khỏi SKILL.md.

Kết luận

Dashboard Design biến chất lượng dashboard thành một quy trình làm việc có thể lặp lại cho tác nhân, thay vì một tập hợp các sở thích thẩm mỹ mơ hồ. Công cụ này kết hợp các mẫu thành phần thực tế, hướng dẫn bố cục thích ứng, cách trình bày dữ liệu trung thực, tài liệu tham khảo cho web và SwiftUI, cùng quy trình đảm bảo chất lượng dựa trên ảnh chụp màn hình. Hãy cài đặt công cụ dưới dạng plugin Claude Code hoặc skill độc lập, giao cho tác nhân một nhiệm vụ dashboard cụ thể, rồi hoàn tất bằng cách xem xét giao diện đã render ở các kích thước được ghi trong tài liệu.

Dự án được phát hành theo giấy phép MIT. Để biết thêm thông tin về các quy tắc thiết kế, hãy đọc Tôi đã nghiên cứu 127 dashboard. Hầu hết đều âm thầm nói dối bạn.