Draw UI — Tạo bản thiết kế UI & dựng lại giao diện

Làm được gì

• Xác định phạm vi trước: mục tiêu trang, quy mô (component / một màn hình / trang cuộn / landing page đầy đủ), thiết bị mục tiêu và hình thức bàn giao.
• Chia thành ba lộ trình rõ ràng: ① thiết kế mới & thử nghiệm phong cách ② dựng lại từ ảnh chụp màn hình & hiệu chỉnh thị giác ③ triển khai code sau khi đã chốt thiết kế.
• Phân tách rạch ròi: bố cục, chữ, control, icon, biểu đồ do code đảm nhiệm; ảnh chụp, minh họa gốc, hình ảnh thương hiệu dùng asset riêng.
• Phân biệt ảnh tham khảo dùng để "học phong cách" hay "dựng lại chính xác", tránh sao chép nguyên khối marketing không liên quan.
• Khi bàn giao có kèm hình/file chạy được, ghi chú triển khai ngắn gọn và danh sách hạng mục chưa được kiểm chứng.

Phù hợp với ai

• Lập trình viên solo, startup cần landing page hoặc màn hình quản trị mà không có designer
• Frontend dev phải dựng lại pixel-perfect từ file thiết kế hoặc ảnh chụp màn hình sang HTML/CSS, Vue/React hay mini program
• Product/PM muốn có checklist nghiệm thu chất lượng cho ảnh UI do AI tạo ra

Ví dụ sử dụng

1. "Thiết kế landing page cho sản phẩm SaaS, từ navbar đến footer" → sinh theo từng đoạn rồi ghép thành ảnh preview toàn trang
2. "Chuyển ảnh chụp màn hình app này thành component trong dự án Vue của tôi" → đo đạc, hiệu chỉnh rồi tái sử dụng component/font có sẵn
3. "Lấy cảm hứng phong cách từ trang này để vẽ dashboard cho dịch vụ của tôi" → chỉ trích xuất khoảng trắng, tương phản chữ, tỉ lệ và sắp xếp lại nội dung theo nghiệp vụ

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/draw-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 AI Skill Mart.
Copy thư mục SKILL.m từ repo GitHub oil-oil/draw-ui vào ~/.claude/skills/draw-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.