Các công cụ Vibe Code

Pixel Perfect: Từ Ảnh đến Code

Đây là phần "Magic" nhất của Vibe Coding. Biến ý tưởng hình ảnh thành code chạy được.

Kỹ thuật "Image-to-Code"

Replit Agent (và các model Vision như GPT-4o) có khả năng nhìn.

1. Chụp ảnh: Screenshot một giao diện bạn thích (trên Dribbble, hoặc vẽ tay trên giấy, hoặc design Figma).
2. Upload & Prompt: Drag ảnh vào khung chat.
   • Prompt: "Hãy code lại giao diện Dashboard này sử dụng Tailwind CSS và các component Shadcn/UI. Chú ý: Sidebar bên trái có màu tối, Card ở giữa có đổ bóng nhẹ (shadow-sm)."

Xử lý Interactive (Tương tác)

UI tĩnh thì dễ. UI động mới khó. Sau khi Agent tạo ra giao diện đẹp, hãy thổi hồn vào nó.

• Prompt: "Tại component @CourseCard.tsx, hãy thêm hiệu ứng: Khi hover vào, card sẽ hơi nổi lên (scale-105) và hiện nút 'Học ngay'. Sử dụng framer-motion cho mượt mà."

Thái độ với Design System

Để app trông chuyên nghiệp (không giống bài tập sinh viên), bạn cần sự nhất quán (Consistency).

• Define Colors: Bảo Agent định nghĩa màu trong tailwind.config.ts ngay từ đầu.
  • Prompt: "Hãy update config Tailwind. Thêm màu brand chính là #0F172A (Navy) và màu accent là #14B8A6 (Teal)."
• Reusable Components: Đừng để Agent hardcode button ở mọi nơi.
  • Prompt: "Hãy refactor nút bấm này thành component @components/ui/PrimaryButton.tsx để tái sử dụng."

Human Touch (Sự tinh chỉnh của con người)

AI làm tốt 90%. 10% còn lại là ở mắt thẩm mỹ của bạn.

• Padding/Margin thường bị AI làm hơi ẩu (lúc thì p-4, lúc thì p-6). Hãy soi kỹ và bảo nó chỉnh lại cho thẳng hàng (Alignment).
• Typography: AI hay dùng font mặc định. Hãy yêu cầu nó config font (ví dụ: Inter hoặc Geist Sans) để app nhìn "xịn" hơn hẳn.

🎨 Pro Tip: Đừng cố mô tả margin/padding bằng lời ("Dịch sang phải 1 tí"). Hãy dùng code ("Sửa ml-2 thành ml-4"). Học Tailwind class name là khoản đầu tư siêu hời cho Vibe Coder.