HTMLPicker

Pick any element to extract CSS, colors, and fonts. Generate AI implementation prompts for Cursor, Copilot, Claude Code, and Codex.

HTMLPicker picks any element on a webpage to extract its CSS, colors, fonts, and layout signals — then generates AI implementation prompts for Cursor, Copilot, Claude Code, and Codex. 🔑 Key Features • Element Picker — Click any element to inspect colors (HEX/RGB/HSL), fonts, computed CSS, selector, and HTML • AI Prompt Generator — Reverse-engineer design styles into implementation prompts for Cursor, Copilot, Claude Code, and Codex • Page Palette — One-click whole-page color scheme extraction with frequency analysis • Screenshot Capture — Visible area and full-page scrolling capture • Design Export — Export colors, fonts, spacing as JSON, CSS, Markdown, or AI context packs • Live Style Modification — Modify colors and fonts in real-time on any page • DOM Navigation — Browse parent/child/sibling elements with visual hierarchy • Dark & Light Themes — Adapts to system theme automatically • Dual UI — Popup for quick access, Sidebar for detailed workspace 📋 How It Works • Click the HTMLPicker icon to open the sidebar or popup • Click "Pick" then hover and click any element on the page • See all design info: colors, fonts, CSS, HTML, selector, box model • Use AI to reverse-engineer the page's professional design style • Export everything as AI prompts or structured design context 🎯 Perfect For • Frontend developers inspecting CSS and extracting design values • Vibe coders generating AI prompts for Cursor, Copilot, Claude Code, and Codex • Designers communicating visual systems to AI/dev teams • Product managers capturing design specs without DevTools 🌐 Multi-Language Support Available in 18 languages: English, 简体中文, 繁體中文, 日本語, 한국어, Deutsch, Français, Español, Português, Italiano, Русский, Nederlands, Polski, Türkçe, العربية, ไทย, Tiếng Việt, Bahasa Indonesia 🔒 Privacy First HTMLPicker collects zero personal data. All processing happens locally in your browser. No accounts required. No tracking. The optional AI analysis feature sends compressed design evidence to your own API key (BYOK) only when you explicitly trigger it. 💡 Support Development HTMLPicker is free to use. If you find it helpful, consider supporting its development at htmlpicker.com/donate/