Mỗi phương pháp gắn với một tình huống cụ thể, kèm hướng dẫn từng bước để bạn có thể áp dụng ngay.
1. 🟣 Tình huống: Chỉ có mô tả văn bản → sinh Component/React/Vue/Tailwind hoàn chỉnh
Công cụ: ChatGPT-4o / Claude 3.5 / Grok / Cursor Chat
Các bước
Bước 1. Viết prompt rõ ràng theo cấu trúc:
“Tạo component React + Tailwind cho [mô tả chi tiết]. Yêu cầu: responsive, dark mode, accessibility (ARIA), dùng shadcn/ui nếu phù hợp. Trả về code đầy đủ + giải thích ngắn.”
Bước 2. Paste prompt vào AI → nhận code.
Bước 3. Copy code vào project và chạy thử.
Bước 4. Nếu chưa đúng, reply tiếp:
“Sửa lại phần [cụ thể], thêm hover effect, tối ưu mobile.”
Bước 5. Lặp lại 2–3 lần đến khi đạt.
Bước 6. Thêm TypeScript types và unit test nếu cần bằng cách yêu cầu AI.
2. 🟠 Tình huống: Có ảnh Mockup / Screenshot / Figma Export → chuyển thành code
Công cụ: v0.dev (Vercel), Galileo AI, Locofy hoặc Claude/GPT với Vision
Các bước
Bước 1. Upload ảnh mockup lên v0.dev hoặc Claude/GPT (bật Vision).
Bước 2. Sử dụng prompt:
“Chuyển ảnh này thành React + Tailwind component chính xác nhất có thể. Giữ đúng layout, màu sắc, spacing. Responsive.”
Bước 3. AI sinh code → preview trực tiếp trên v0.
Bước 4. Điều chỉnh bằng chat:
“Thay đổi button thành primary color #3B82F6, thêm animation fade-in.”
Bước 5. Export code và paste vào project.
Bước 6. So sánh pixel với ảnh gốc, yêu cầu AI sửa lệch 1–2px nếu cần.
3. 🟡 Tình huống: Đã có code cũ / Legacy UI → Refactor + hiện đại hóa
Công cụ: Cursor AI (Agent mode) hoặc GitHub Copilot Chat
Các bước
Bước 1. Mở file component cũ trong Cursor.
Bước 2. Chọn code → nhấn Ctrl+K (hoặc Cmd+K) → nhập:
“Refactor toàn bộ sang Tailwind + modern React hooks, giữ nguyên chức năng, thêm responsive và dark mode.”
Bước 3. AI sửa trực tiếp trong editor.
Bước 4. Review diff và accept từng phần.
Bước 5. Tiếp tục yêu cầu:
“Tách thành các component nhỏ hơn, thêm PropTypes/TypeScript.”
Bước 6. Chạy lint + test và yêu cầu AI fix các lỗi còn lại.
4. 🟢 Tình huống: Cần thiết kế hệ thống Design System / Component Library nhất quán
Công cụ: Claude / ChatGPT + Figma AI hoặc Storybook + AI
Các bước
Bước 1. Sử dụng prompt:
“Thiết kế Design System cho app [tên]. Bao gồm: color palette, typography, spacing scale, button variants, input, card, modal. Xuất ra Tailwind config + React components.”
Bước 2. AI trả về tokens + components.
Bước 3. Tạo file tailwind.config.js và folder components theo đúng cấu trúc AI đưa.
Bước 4. Yêu cầu AI sinh Storybook stories cho từng component.
Bước 5. Kiểm tra tính nhất quán:
“Kiểm tra tất cả component đều dùng token từ design system, không hard-code màu.”
Bước 6. Export ra package nội bộ nếu cần.
5. 🔵 Tình huống: Cần animation / Micro-interaction / Transition mượt
Công cụ: Claude / GPT + Framer Motion / GSAP knowledge
Các bước
Bước 1. Mô tả animation:
“Thêm animation khi card xuất hiện: fade + slide up, duration 0.4s, stagger children. Dùng Framer Motion.”
Bước 2. AI sinh code kèm import và variants.
Bước 3. Paste vào component và test trên browser.
Bước 4. Tinh chỉnh:
“Làm chậm hơn một chút, thêm spring physics, chỉ chạy khi in-view.”
Bước 5. Yêu cầu AI tối ưu performance (will-change, layout animation).
Bước 6. Thêm reduced-motion support bằng media query.
6. 🟣 Tình huống: Xây dựng toàn bộ trang / Multi-page từ Wireframe thô
Công cụ: v0.dev + Cursor hoặc Uizard + export code
Các bước
Bước 1. Vẽ wireframe đơn giản (hoặc mô tả text) → đưa vào v0.dev.
Bước 2. Sử dụng prompt:
“Tạo full landing page từ wireframe này: Hero, Features, Pricing, FAQ, Footer. React + Tailwind + shadcn.”
Bước 3. AI sinh nhiều section → ghép lại thành page.
Bước 4. Mở project trong Cursor, dùng Agent:
“Tích hợp tất cả section thành 1 page, thêm routing nếu cần, tối ưu SEO meta.”
Bước 5. Test responsive trên nhiều breakpoint.
Bước 6. Yêu cầu AI thêm loading state, error boundary và skeleton.
7. 🔴 Tình huống: Tối ưu UX nâng cao — Accessibility, Performance, A/B Test
Công cụ: Claude 3.5 / GPT-4o + Lighthouse knowledge
Các bước
Bước 1. Paste code hiện tại + prompt:
“Audit accessibility (WCAG 2.2 AA), performance và UX. Đưa ra danh sách vấn đề + code sửa cụ thể.”
Bước 2. AI liệt kê lỗi như: thiếu alt, contrast, focus trap…
Bước 3. Yêu cầu:
“Áp dụng tất cả fix, giữ nguyên design.”
Bước 4. Thêm:
“Thêm data-testid cho testing, skeleton loading và biến thể A/B cho CTA button.”
Bước 5. Chạy Lighthouse thực tế → copy điểm thấp đưa lại cho AI để tối ưu tiếp.
Bước 6. Cuối cùng yêu cầu AI viết checklist UX để bạn tự kiểm tra sau này.
💡 Mẹo chung để làm chủ
Luôn viết prompt theo cấu trúc: Vai trò + Mục tiêu + Ràng buộc kỹ thuật + Định dạng output.
Làm việc theo vòng lặp ngắn: Generate → Test → Refine.
Kết hợp nhiều tool: v0 để prototype nhanh → Cursor để tích hợp & refactor → Claude để audit sâu.
Lưu các prompt tốt thành template để dùng lại.
🚀 Bạn có thể bắt đầu ngay với phương pháp 1 hoặc 2 tùy tình huống hiện tại của dự án. Nếu cần prompt mẫu chi tiết cho bất kỳ phương pháp nào, cứ nói tôi viết sẵn.
