UI Builder với Gemini AI

Tạo HTML với Gemini AI và xem preview trực tiếp

Chrome Extension tạo website HTML/CSS/JS hoàn chỉnh bằng Gemini AI — preview trực tiếp, inspect & chỉnh sửa phần tử, quản lý đa page, gợi ý prompt AI, deploy multi-page lên Netlify. Tạo HTML bằng AI: - Mô tả UI bằng ngôn ngữ tự nhiên (tiếng Việt), Gemini sinh HTML hoàn chỉnh (single-file, inline CSS/JS) - Hai chế độ AI: Flash (nhanh) và Thinking (tư duy sâu) — chuyển đổi bằng toggle switch - Chỉnh sửa lặp lại — prompt tiếp theo tự động bao gồm HTML hiện tại, AI chỉ thay đổi phần được yêu cầu mà bảo toàn CSS/cấu trúc - Conversation context — mỗi page duy trì ngữ cảnh hội thoại riêng, các prompt tiếp theo hiểu context trước đó Inspect & Chỉnh sửa phần tử: - Bật chế độ Inspect → di chuột highlight phần tử → click chọn Mô tả thay đổi cho phần tử đã chọn → AI chỉ sửa innerHTML của phần tử đó - Hiển thị CSS selector của phần tử đang chỉnh sửa Device Preview: - Xem trước ở 3 kích thước: Desktop (100%), Tablet (768px), Mobile (375px) - Chuyển đổi nhanh bằng toolbar trên preview Quản lý đa Page: - Tạo, đổi tên (double-click), xóa nhiều page - Mỗi page là workspace độc lập với conversation context riêng - Chuyển page nhanh, JS trong page hoạt động đầy đủ nhờ sandbox blob URL Điều hướng Link & Tạo page tự động: - Click link trong preview → hiện modal tạo page mới hoặc chuyển đến page đã tồn tại - Tên page lấy từ text của link (hỗ trợ tiếng Việt có dấu) - Prompt được tách: user thấy prompt sạch, internal instructions tự động thêm phía sau - Matching thông minh: so khớp bằng tên page + slug fallback (Vietnamese diacritics safe) AI Suggestions (Gợi ý prompt): - Gợi ý tự động từ danh sách preset + AI-powered completion từ Gemini - Ghost text hiển thị gợi ý, nhấn Tab để chấp nhận - Cache LRU (50 items) tránh gọi API trùng lặp - Hoạt động cả ở prompt chính và modal tạo page Lịch sử & Revert: - Mỗi lần tạo/chỉnh sửa được lưu (prompt + full HTML) - Click mục lịch sử để xem lại phiên bản cũ - Revert — prompt tiếp theo sẽ tiếp tục từ phiên bản đã revert Deploy lên Netlify (Multi-page): - Kết nối bằng Netlify Personal Access Token - Một site duy nhất cho tất cả các page — deploy/cập nhật cùng một URL - Trang đầu tiên → /index.html (root), các trang khác → /slug/index.html - Tự động rewrite link giữa các page - Auto-recreate site nếu bị xóa trên Netlify Các thao tác khác: - Refresh preview / mở trong tab mới / tải xuống HTML / copy HTML - Khóa UI khi đang tạo (hiệu ứng shake-reject khi click) - Tự động kết nối / tái kết nối Gemini - Toast notification kiểu Dynamic Island