Quy trình Thiết kế (Design)
Skill thiết kế tổng hợp với 6 chế độ: viết copy UX, tài liệu design system, phê bình thiết kế, kiểm tra khả năng truy cập, handoff cho dev và tổng hợp nghiên cứu người dùng.
Skill này làm gì
Trước tiên phân loại yêu cầu vào một trong 6 chế độ, rồi nạp tài liệu tham chiếu tương ứng để làm việc.
- UX-COPY: viết nhãn nút, thông báo lỗi, trạng thái trống, copy onboarding — kèm lý do, 2–3 phương án và ghi chú bản địa hoá
- DESIGN-SYSTEM: audit component, kiến trúc design token, viết tài liệu và mở rộng hệ thống
- CRITIQUE: phê bình theo 4 bước (Mô tả → Phân tích → Diễn giải → Đánh giá) cộng 10 heuristic Nielsen
- ACCESSIBILITY: audit WCAG 2.1 AA (tỉ lệ tương phản 4.5:1, điều hướng bàn phím, ARIA) với báo cáo phân mức nghiêm trọng
- HANDOFF: spec kỹ thuật gồm layout, token, mọi trạng thái, tương tác, edge case
- RESEARCH: tổng hợp phỏng vấn/khảo sát/ticket bằng affinity mapping và ma trận ưu tiên
Còn có bảng phòng ngừa các lỗi đặc trưng của LLM: copy chung chung, gợi ý vi phạm accessibility, thiếu edge case, bịa trích dẫn nghiên cứu.
Phù hợp với ai
- Product designer, UX writer, người phụ trách design system
- Lập trình viên frontend hoặc founder phải tự làm UI mà không có designer
- Đội nhóm muốn chuẩn hoá tài liệu handoff và kiểm tra accessibility
Ví dụ sử dụng
- "Viết thông báo lỗi khi thanh toán thất bại" → cấu trúc Chuyện gì xảy ra + Vì sao + Cách khắc phục, kèm 2–3 biến thể theo tông giọng
- "Kiểm tra accessibility cho mockup dashboard này" → liệt kê lỗi theo tiêu chí WCAG, bảng tỉ lệ tương phản, sơ đồ điều hướng bàn phím, danh sách sửa theo ưu tiên
- "Tổng hợp 12 ghi chú usability test" → các theme kèm tần suất (8/12 người), trích dẫn, bảng insight → cơ hội, và câu hỏi cho vòng nghiên cứu tiếp
· · · 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/notque/vexjoy-agent/HEAD/skills/business/design/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/business/design từ repo GitHub notque/vexjoy-agent vào ~/.claude/skills/notque-design/ 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/notque/vexjoy-agent.git /tmp/vexjoy-agent && mkdir -p ~/.claude/skills/design && cp -r /tmp/vexjoy-agent/skills/business/design/* ~/.claude/skills/design/⚠ Đâ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/notque/vexjoy-agent.git - Tạo thư mục skill:
mkdir -p ~/.claude/skills/design - Copy toàn bộ file skill và thư mục tham chiếu:
cp -r vexjoy-agent/skills/business/design/* ~/.claude/skills/design/ - Kiểm tra trong
~/.claude/skills/design/có cảSKILL.mdvà thư mụcreferences/(thiếu references là mất phần hướng dẫn chi tiết). - Khởi động lại Claude Code và thử: "review accessibility cho màn hình này" hoặc "viết UX copy cho nút xác nhận".