Oil UI — Quy trình thiết kế & review giao diện

Làm được gì

• Xác định "ngôi sao Bắc Đẩu" cho thiết kế dựa trên loại sản phẩm, nội dung màn hình đầu và thương hiệu, thay vì dùng template mặc định của model.
• Tạo trang so sánh nhiều phong cách cạnh nhau (có generator) để người dùng tự chọn hướng.
• Chia kiến thức thị giác thành các tài liệu tham chiếu (typography, màu sắc, hình ảnh, motion, scroll narrative, game feel) và chỉ đọc phần cần thiết.
• Bắt buộc thu thập bằng chứng thật: chạy ở viewport mục tiêu, chụp các trạng thái, quay video hiệu ứng, kiểm tra xuống dòng tiếng Việt/Trung ở màn hẹp.
• Có giao thức review độc lập (người review không biết code, chấm thang 10) và checklist bàn giao: hướng đã chọn, cái gì chưa làm, bằng chứng nằm ở đâu.

Phù hợp với ai

• Lập trình viên frontend muốn có quy trình thiết kế bài bản thay vì "làm cho đẹp".
• Người làm landing page, trang thương hiệu, trang sự kiện cần hiệu ứng cuộn và motion chỉn chu.
• Nhóm cần review UI/UX định kỳ với bằng chứng ảnh chụp rõ ràng.

Ví dụ sử dụng

1. "Thiết kế 3 hướng cho hero section của app fintech" → thẻ hướng thiết kế + trang so sánh song song.
2. "Tái hiện chính xác giao diện trong ảnh này" → lấy ảnh làm chuẩn thị giác, không tự sáng tạo phong cách mới.
3. "Review trang thanh toán hiện tại" → chỉ đọc, chẩn đoán vấn đề thị giác kèm ảnh bằng chứng và đề xuấ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/oil-oil/oil-ui/HEAD/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục SKILL.m từ repo GitHub oil-oil/oil-ui vào ~/.claude/skills/oil-ui/ 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.