SnapToCode

Screenshot any UI → get Tailwind HTML instantly

🎯 WHAT IS SNAPTOCODE? SnapToCode is the fastest way to turn any UI you see on the web into clean, production-ready HTML code. Just select a region on any webpage, and get Tailwind CSS (or plain CSS / Bootstrap) code generated by AI vision — all without leaving your browser. ⚡ HOW IT WORKS 1. Click the extension icon or press Ctrl+Shift+S 2. Drag to select any region on the current page 3. Get code instantly — production-ready Tailwind HTML appears in the side panel 4. Copy and use — paste the code directly into your project 🚀 KEY FEATURES - Region Selection: Click and drag to capture any part of any webpage - AI-Powered: Choose from Claude, GPT-4o, Gemini, or local Ollama models - Multiple Frameworks: Generate Tailwind CSS, plain CSS, or Bootstrap code - Style Presets: Choose from Modern, Minimal, Dark, or Glassmorphism styles - Syntax Highlighting: Beautiful code display with one-click copy - CodePen Export: Open your generated code directly in CodePen with one click to preview and edit - Capture History: Save and revisit past captures - Custom Instructions: Add extra guidance for the AI (e.g., "use rounded corners") - Keyboard Shortcut: Ctrl+Shift+S to start capturing instantly - Dark Theme: Beautiful dark UI that's easy on the eyes 🔒 PRIVACY FIRST - No backend: all processing happens client-side - BYOK (Bring Your Own Key): you use your own API key (Anthropic, OpenAI, Google, or local Ollama) - Your API key never leaves your browser: stored securely in chrome.storage.local - No analytics, no tracking, no data collection 💡 PERFECT FOR - Frontend developers looking for quick UI prototypes - Designers who want to turn inspiration into code - Teams that need to quickly replicate UI patterns - Anyone learning web development by example 🛠️ REQUIREMENTS - An API key from Anthropic, OpenAI, or Google (or a local Ollama install) - Chrome 120 or later 📋 PERMISSIONS EXPLAINED - activeTab: to capture the current tab's visible content - scripting: to inject the selection overlay on the page - storage: to save your API key and capture history locally - sidePanel: to show the code output in Chrome's side panel