Gemini Canvas là gì?
Gemini Canvas là không gian làm việc tích hợp trong Google Gemini, cho phép người dùng vừa trò chuyện với AI vừa xem trước hoặc chỉnh sửa mã nguồn theo thời gian thực. Với Canvas, việc tạo một website hiện đại chỉ cần mô tả bằng ngôn ngữ tự nhiên, không nhất thiết phải có nhiều kinh nghiệm lập trình.
Bước 1. Mở không gian làm việc Canvas
- Truy cập gemini.google.com.
- Chọn mô hình AI muốn sử dụng (ví dụ: Gemini Flash hoặc Gemini Pro).
- Nhấn biểu tượng + trong ô nhập Prompt và chọn Canvas.
Sau khi mở Canvas, màn hình sẽ được chia thành hai khu vực:
- Bên trái: cửa sổ trò chuyện với AI.
- Bên phải: cửa sổ xem trước (Preview) hoặc mã nguồn (Code) được cập nhật theo thời gian thực.
Bước 2. Nắm vững 5 nguyên tắc của "Vibe Coding"
Để AI tạo ra giao diện đúng mong muốn, hãy áp dụng các nguyên tắc sau:
- Mô tả phong cách trước: Nêu rõ phong cách thiết kế, màu sắc và cảm giác tổng thể trước khi yêu cầu tính năng.
- Bắt đầu đơn giản: Xây dựng bố cục cơ bản của một trang (Single-page) trước khi mở rộng.
- Sử dụng tài liệu tham chiếu: Có thể tải lên wireframe hoặc hình ảnh giao diện yêu thích để AI tham khảo.
- Mô tả chi tiết: Cung cấp mã màu (Hex), phông chữ, độ bo góc, khoảng cách hoặc các thông số thiết kế cụ thể.
- Thêm từng tính năng: Phát triển theo từng bước giúp giảm lỗi và dễ chỉnh sửa hơn.
Bước 3. Sử dụng Prompt khởi đầu
Bạn có thể sử dụng mẫu Prompt sau và thay đổi theo nhu cầu:
«Hãy đóng vai một lập trình viên web cấp cao. Xây dựng một ứng dụng web hiện đại, chỉ gồm một trang (single-page) cho [TÊN DOANH NGHIỆP/DỰ ÁN].
- Phong cách: Tối giản, sạch sẽ và ấm áp. Sử dụng nền trắng ngà (#FAF9F6), điểm nhấn xanh lá xô thơm (#8A9A86), các góc bo tròn.
- Bố cục: Bao gồm Header có logo, khu vực Hero với tiêu đề và tagline, ba thẻ (Card) giới thiệu [TÍNH NĂNG/DỊCH VỤ], cùng biểu mẫu liên hệ ở cuối trang.
- Nút CTA: Hiển thị nổi bật với nội dung "[Bắt đầu ngay]".
Hãy bảo đảm website hiển thị tốt trên mọi thiết bị (Responsive), hoạt động mượt mà và có các hiệu ứng tương tác hiện đại.»
Bước 4. Xem trước website theo thời gian thực
Sau khi gửi Prompt, Gemini sẽ tự động sinh mã nguồn và hiển thị kết quả ngay trong Canvas.
- Preview: Xem và tương tác trực tiếp với website.
- Code: Xem toàn bộ mã HTML, CSS và JavaScript được AI tạo ra.
Bước 5. Chỉnh sửa chính xác bằng tính năng "Select & Ask"
Nếu muốn thay đổi một thành phần cụ thể mà không cần chỉnh sửa mã nguồn:
- Chọn biểu tượng Select & Ask ở góc dưới bên phải cửa sổ Preview.
- Nhấp vào thành phần cần chỉnh sửa (nút bấm, tiêu đề, hình ảnh...).
- Nhập yêu cầu, ví dụ:
«"Đổi nút này sang màu xanh điện (Electric Blue) và tăng khoảng đệm (Padding)."»
Gemini sẽ tự động cập nhật đúng thành phần được chọn.
Bước 6. Bổ sung tính năng và sửa lỗi bằng ngôn ngữ tự nhiên
Nên phát triển website từng bước thay vì yêu cầu quá nhiều chức năng cùng lúc.
Ví dụ:
- Thêm nút chuyển đổi chế độ tối (Dark Mode).
- Thêm hiệu ứng cuộn mượt (Smooth Scroll) cho menu.
- Bổ sung biểu mẫu đăng ký hoặc thư viện hình ảnh.
Nếu phát sinh lỗi, chỉ cần mô tả bằng ngôn ngữ tự nhiên, chẳng hạn:
«"Nút Add to Cart không hoạt động. Hãy kiểm tra và sửa trình xử lý sự kiện."»
Gemini sẽ tự phân tích nguyên nhân và cập nhật mã nguồn.
Bước 7. Chia sẻ hoặc triển khai website
Khi hoàn thành, bạn có thể:
- Chia sẻ trực tiếp: Chọn Share → Create Link để tạo liên kết, cho phép người khác xem và tương tác ngay trên trình duyệt.
- Triển khai lên tên miền riêng: Tải mã nguồn bằng nút Download, sau đó đưa lên các nền tảng như Vercel hoặc GitHub Pages để xuất bản website.
Kết luận
Gemini Canvas giúp đơn giản hóa quá trình phát triển website bằng AI. Chỉ với các Prompt được mô tả rõ ràng, người dùng có thể xây dựng giao diện, chỉnh sửa thành phần, bổ sung tính năng và sửa lỗi bằng ngôn ngữ tự nhiên, rút ngắn đáng kể thời gian phát triển và giảm yêu cầu về kỹ năng lập trình truyền thống.
