Hướng Dẫn Sử Dụng AI Tạo UI

So Sánh Các Công Cụ AI

Chọn công cụ phù hợp cho từng bước

Bước	Công Cụ Chính	Lựa Chọn Khác	Ưu Điểm	Thời Gian
1 Phân Tích Yêu Cầu	ChatGPT 4	Claude 3 Gemini Pro	Hiểu context tốt Tạo requirement chi tiết	5-15 phút
2 Tạo Sơ Đồ	Mermaid + ChatGPT	Figma + AI Draw.io PlantUML	Tự động hóa Dễ chỉnh sửa	10-20 phút
3 Tạo Prompt	ChatGPT + Template	Prompt Engineering Tools Custom Templates	Chuẩn hóa Tái sử dụng	15-30 phút
4 Tạo UI	UXPilot	v0.dev Cursor AI GitHub Copilot	Code sạch Responsive	5-15 phút

Pro Tip

Luôn bắt đầu với wireframe đơn giản

Tiết Kiệm Thời Gian

Sử dụng template có sẵn

Collaboration

Chia sẻ Mermaid diagram với team

Mobile First

Luôn thiết kế cho mobile trước

Mô Tả Yêu Cầu với ChatGPT

Cách thực hiện:

Mô tả chi tiết chức năng cần tạo
Nêu rõ đối tượng người dùng
Liệt kê các tính năng chính
Đề cập yêu cầu về UX/UI

Ví dụ prompt:

# Yêu cầu tạo UI đặt lịch khám bệnh

**Mục đích:** Tạo form đặt lịch khám bệnh online
**Người dùng:** Bệnh nhân muốn đặt lịch khám
**Tính năng chính:**
- Nhập số điện thoại
- Chọn phòng khám
- Chọn ngày giờ khám
- Xác nhận đặt lịch

**Yêu cầu UX:** 
- Workflow từng bước rõ ràng
- Mobile-friendly
- Hiển thị thông tin khách hàng

Tạo Sơ Đồ Mermaid - Kiểm Tra Hiểu Biết AI

🎯 Mục Tiêu Chính

Kiểm tra xem AI đã hiểu đúng yêu cầu của bạn chưa thông qua việc tạo sơ đồ trực quan

Xác minh AI hiểu đúng user flow
Phát hiện thiếu sót hoặc hiểu lầm
Điều chỉnh yêu cầu trước khi tạo UI

Prompt Kiểm Tra Hiểu Biết:

"Để tôi kiểm tra xem bạn đã hiểu đúng yêu cầu chưa, hãy tạo sơ đồ Mermaid sequenceDiagram mô tả từng bước tương tác người dùng với hệ thống đặt lịch khám bệnh này"

Tại sao cần kiểm tra?

• AI có thể hiểu sai workflow
• Thiếu các bước quan trọng
• Thứ tự các bước không đúng
• Bỏ qua validation hoặc error handling

Visualize & Verify:

MermaidChart.com

Paste code vào đây để xem sơ đồ trực quan

Ví dụ Output từ AI:

sequenceDiagram
    participant U as User
    participant UI as Interface  
    participant S as System
    participant DB as Database
    
    Note over U,DB: Bước 1: Xác thực
    U->>UI: Nhập số điện thoại
    UI->>UI: Validate format
    UI->>S: Kiểm tra thông tin
    S->>DB: Query customer data
    DB-->>S: Return customer info
    S-->>UI: Customer found/not found
    
    alt Customer exists
        UI->>U: Hiển thị thông tin khách
        Note over U,UI: Bước 2: Chọn phòng khám
        U->>UI: Chọn phòng khám
        Note over U,UI: Bước 3: Chọn thời gian
        U->>UI: Chọn ngày giờ
        Note over U,UI: Bước 4: Xác nhận
        U->>UI: Xác nhận đặt lịch
        UI->>S: Tạo appointment
        S->>DB: Save appointment
        DB-->>S: Confirm saved
        S-->>UI: Booking success
        UI->>U: Hiển thị mã đặt lịch
    else Customer not found
        UI->>U: Thông báo cần đăng ký
    end

Kiểm tra những gì?

✅ Có đủ 4 bước chính không?
✅ Có xử lý trường hợp lỗi không?
✅ Thứ tự logic có đúng không?
✅ Có validation input không?
✅ Có confirmation step không?

Các Bước Kiểm Tra:

1. Tạo Diagram

AI tạo Mermaid code

2. Visualize

Xem sơ đồ trên MermaidChart

3. Verify

So sánh với yêu cầu gốc

Tạo Prompt Chuẩn cho UXPilot

Yêu cầu ChatGPT:

"Dựa trên yêu cầu ban đầu và sơ đồ Mermaid, hãy tạo một prompt chi tiết cho AI UXPilot để tạo UI. Kết hợp thêm JSON để mô tả chi tiết các thành phần UI."

Template Prompt:

Tạo UI form đặt lịch khám bệnh với:

**Workflow:** 4 bước theo sequenceDiagram
**Framework:** HTML + Tailwind CSS
**Responsive:** Mobile-first design
**Components:** 
- Progress indicator
- Form validation
- Step-by-step navigation
- Success confirmation

**Chi tiết JSON:** [xem bên phải]

JSON Chi Tiết:

{
  "steps": [
    {
      "id": 1,
      "title": "Nhập SĐT",
      "components": ["input", "button", "validation"]
    },
    {
      "id": 2, 
      "title": "Chọn phòng khám",
      "components": ["cards", "selection"]
    }
  ],
  "colors": {
    "primary": "#3B82F6",
    "success": "#10B981"
  }
}

Sử Dụng UXPilot Tạo UI

Copy Prompt

Sao chép prompt đã tạo từ bước 3

Paste vào UXPilot

Dán prompt vào AI UXPilot

Nhận UI

AI sẽ tạo UI hoàn chỉnh

Tips để có kết quả tốt nhất:

Prompt càng chi tiết càng tốt
Kèm theo JSON specifications
Đề cập framework cụ thể

Yêu cầu responsive design
Chỉ định color scheme
Mô tả user interactions

AI UI Workflow Guide

Chọn Quy Trình Phù Hợp

Cơ Bản

Chuẩn

Nâng Cao