Media
4 items
Description
Create HTML with Gemini AI and preview live Chrome Extension that builds complete HTML/CSS/JS websites with Gemini AI — live preview, inspect & edit elements, multi-page management, AI prompt suggestions, and multi-page deployment to Netlify. Generate HTML with AI: - Describe the UI in natural language (Vietnamese), and Gemini generates complete HTML (single-file, inline CSS/JS) - Two AI modes: Flash (fast) and Thinking (deeper reasoning) — switchable via toggle - Iterative editing — each new prompt automatically includes the current HTML, so AI changes only the requested parts while preserving CSS/structure - Conversation context — each page keeps its own chat context, so follow-up prompts understand previous context Inspect & Edit Elements: - Enable Inspect mode → hover to highlight elements → click to select - Describe changes for the selected element → AI edits only that element’s `innerHTML` - Display the CSS selector of the element being edited Device Preview: - Preview in 3 sizes: Desktop (100%), Tablet (768px), Mobile (375px) - Quick switching via toolbar on the preview Multi-page Management: - Create, rename (double-click), and delete multiple pages - Each page is an independent workspace with its own conversation context - Fast page switching, with full JavaScript support via sandbox blob URL Link Navigation & Auto Page Creation: - Click a link in preview → show modal to create a new page or navigate to an existing page - Page name is derived from the link text (supports Vietnamese diacritics) - Prompt splitting: user sees a clean prompt, internal instructions are appended automatically - Smart matching: match by page name + slug fallback (Vietnamese diacritics-safe) AI Suggestions (Prompt Suggestions): - Automatic suggestions from presets + AI-powered completion from Gemini - Ghost text displays suggestions; press Tab to accept - LRU cache (50 items) to avoid duplicate API calls - Works in both the main prompt and create-page modal History & Revert: - Every generate/edit action is saved (prompt + full HTML) - Click a history item to view older versions - Revert — the next prompt continues from the reverted version Deploy to Netlify (Multi-page): - Connect using a Netlify Personal Access Token - One site for all pages — deploy/update under the same URL - First page → `/index.html` (root), other pages → `/slug/index.html` - Automatically rewrite links between pages - Auto-recreate site if it was deleted on Netlify Other Actions: - Refresh preview / open in new tab / download HTML / copy HTML - Lock UI while generating (shake-reject effect on click) - Auto connect/reconnect to Gemini - Dynamic Island-style toast notifications