Free Browser Extension

Pick any element.
Generate AI prompts.

HTMLPicker lets you pick any web page element to extract HTML, CSS, screenshots, colors, fonts, and layout signals — then generate AI implementation prompts for Cursor, Copilot, Claude Code, and Codex.

#06b6d4
font: Inter 16px
padding: 12px 24px
radius: 8px
#1e293b
.btn-primary
box-shadow: 0 1px...
transition: 0.2s
AI Prompt →

Everything you need to
reverse-engineer any design

One click to extract colors, CSS, fonts, HTML, screenshots, and component styles — then generate AI prompts to recreate any web page style.

Element Picker

Click any element on any web page. Instantly see its HTML, CSS selector, computed styles, colors, fonts, and spacing — all in one panel.

Color Extraction

Pick any color from any element. Get HEX, RGB, and HSL values with one-click copy. Scan the whole page to extract the complete color palette.

CSS Inspector

See computed styles, generated CSS selectors, and clean CSS code for any element. Copy CSS with one click — no DevTools digging needed.

Screenshot Capture

Capture visible viewport or full-page scrolling screenshots. Element-level screenshots included. All saved as high-quality PNG.

Design Export

Export colors, typography, spacing, border radius, and shadows as structured design data in JSON or Markdown format — ready for your design system or AI workflow.

AI Prompt Generator

Reverse-engineer any page's design style into detailed AI implementation prompts. Generate prompts for Cursor, Copilot, Claude Code, Codex, v0, and Lovable.

Three steps to
AI-ready design data

No setup required. Install, pick, and export — it's that simple.

1

Pick an Element

Click the Pick button in the toolbar, then hover and click any element on any web page. HTMLPicker instantly extracts all design information.

2

Inspect & Analyze

View colors, CSS, HTML, fonts, spacing, and screenshots in the sidebar. Scan the whole page palette or let AI analyze the design style.

3

Export & Build

Copy CSS, export design data, or generate AI implementation prompts. Feed the extracted data directly into Cursor, Copilot, Claude Code, or Codex.

Why HTMLPicker beats
the alternatives

Feature ColorZilla CSS Peeper HTMLPicker
Color Picker
CSS Inspector
Page Palette Analysis
Screenshot Capture
Design Token Export
AI Prompt Generation
Style Reverse Engineering
Live Style Modification
Free to Use Paid

Works on every major browser

HTMLPicker supports Chrome, Firefox, and Edge with full feature parity across all platforms.

🌐
Google Chrome
Chrome 114+ with Side Panel support
🦊
Mozilla Firefox
Firefox 54+ with native sidebar
🔷
Microsoft Edge
Edge 114+ with Side Panel support
18
Languages Supported
3
Browser Platforms
0
Data Collected
AI Prompts Generated

Ready to pick
any design?

Install HTMLPicker for free and start extracting design data from any web page in seconds.