HTML2Prompt

Pick any component on any website and copy it as a faithful prompt: HTML and CSS snapshot, design tokens and screenshot.

Pick any component on any website and turn it into a prompt that rebuilds it faithfully. HTML2Prompt reads what the browser actually rendered, not the source code. Point at a button, a card, a navbar or a whole page, and you get a prompt ready to paste into Claude or any other AI assistant, with everything needed to recreate it in your own stack. WHAT LANDS IN YOUR CLIPBOARD • An HTML + CSS snapshot that renders identical to the original when opened on its own • Design tokens: colors weighted by usage, type scale, recurring spacing, radii and shadows • The component structure, with sizes and layout • Real copy and the fonts in use, nothing invented • Hover, focus and active states, ::before and ::after pseudo-elements • Inline SVG icons with their colors resolved • A screenshot of the component, even when it is taller than the screen HOW IT WORKS 1. Press Alt+Shift+H (⌥⇧H on Mac) on any site 2. Hover to highlight elements, use ↑ and ↓ to move to the parent or child, click to confirm 3. Copy the screenshot and the prompt, paste them into Claude TARGET STACKS React + Tailwind CSS, React + CSS Modules, Vue 3, plain HTML + CSS. Choose between responsive output (authored values like 100%, fr, calc) and exact pixels. PRIVATE BY DESIGN • Free, no account, no sign up • Everything happens inside your browser • The extension makes no network requests • Page content is read locally and never leaves your browser: nothing is sent, stored or tracked • The prompt only goes to your clipboard or to files you download Website: https://html2prompt.youssbim.com