SnapToCode

About

🎯 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