Pick a component on any site and copy it as a prompt: HTML and CSS snapshot, design tokens and screenshot. Paste it into Claude and it comes back identical, in your stack.
Live example
This button was captured from heyclicky.com with two keystrokes: gradient, border, gloss and inner shadows in blend mode. On the right, what landed in the clipboard.
# Faithfully recreate this component
Recreate this component with **React + TypeScript + Tailwind CSS**
so that it is **visually identical** to the original.
- **Source:** heyclicky, https://www.heyclicky.com/
- **Element:** `a.btn.mac` · 189×36px · inside a 213px container, background #f5f5f5
- **Screenshot:** attached. It is the definitive visual reference.
## Requirements
1. Pixel-perfect fidelity: colors, fonts, spacing, borders, radii and shadows.
2. Use **all text exactly as it is**.
3. Reproduce the `:hover` and `:active` states and the transitions in the CSS.
…
## Design tokens
| Color | Usage |
|-----------|----------|
| #edf4ff | gradient |
| #a2c7ff | gradient |
| #99cbf8 | gradient |
| #221898 | border |
| Font | Size | Weight | Line height | Letter spacing |
|-------|------|--------|-------------|----------------|
| Inter | 18px | 500 | 27px | -0.54px |
**Recurring spacing:** 1 · 10 · 16 · 20px
**Radii:** 999px **Shadows:** #0000001f 0 10px 24px
## Structure
a.btn 189×36 · flex row gap 10px
div.gloss 166×11
img.ico 16×19
span.cta-desktop 130×24 "download for mac"
## HTML + CSS snapshot (source of truth)
```html
<a class="btn" href="…/HeyClicky.dmg">
<div class="gloss"></div>
<img class="ico" src="…/btn-apple.svg" alt="">
<span class="cta-desktop">download for mac</span>
</a>
```
```css
.btn {
background-image: linear-gradient(#edf4ff 0%, #d6e7ff 18%,
#a2c7ff 50%, #99cbf8 80%, #a2d2f7 100%);
border: 1.125px solid #221898;
text-shadow: #ffffffcc 0 2px 2px;
}
.btn::after { /* the burnt bottom edge */
box-shadow: #b3b3b3 0 -8px 0 4px inset;
mix-blend-mode: color-burn;
}
```How it works
No detour through Figma, no export: from the site to the prompt, right there in the browser.
- 01
Pick the component
Hit ⌥⇧H on any site. Hover and elements light up; ↑ and ↓ move to the element around it or the one inside. One click and it's yours.
- 02
It reads the result, not the source
It asks the browser for the styles actually applied after rendering, compares them against a known baseline and keeps only what matters. Then it digs the authored values out of the CSS (100%, fr, calc) so the result stays fluid.
- 03
Paste it into Claude
Screenshot first, prompt second. Snapshot, design tokens, structure and copy: the model has everything it needs to rebuild it in the stack you picked.
The prompt
Not a description in words: the exact specification of how the component is built, plus the screenshot as the visual reference.
HTML + CSS snapshot
Open it on its own and the component is already there, identical. It's the exact spec, not a description of one.
Design tokens
A palette weighted by how much each color is used, type scale, recurring spacing, radii and shadows. Ready to drop into a theme.
Real copy, real fonts
Text is copied verbatim; declared and loaded fonts are listed. Nothing invented.
States and pseudo-elements
Hover, focus, ::before and ::after make it into the prompt, the details usually lost in translation.
Screenshot attached
Even for components taller than the screen. It's the visual reference the model checks its own work against.
SVG and Shadow DOM
Icons stay vector with their colors resolved; encapsulated components are flattened and made readable.
Motion
CSS and JavaScript animations come with their keyframes, timing and easing. Scroll entrances and script-driven movement are described too.
Draggable elements
It spots what can be dragged and tries it for real: how it follows the pointer, what changes while dragging, whether it glides after release.
Ready for your stack
Each prompt says how to rebuild the motion and the drag in React with Tailwind or Framer Motion, CSS Modules, Vue or plain HTML.
Fidelity
Left: the button as heyclicky.com writes it, in their own CSS. Right: the reconstruction from the snapshot, in an empty page. Two isolated documents, so neither one can help the other.
Gradients and shadows
Reproduced from computed values, not eyeballed.
Blend modes
The gloss and the burnt inner edge survive the trip.
Vector icons
Inline SVG with colors already resolved.
Free for everyone. No sign up, no limits, nothing leaves your browser. The Chrome Web Store listing is on its way; until then you can install it by hand in a minute.
Unzip it
Double click the file you just downloaded to get the html2prompt folder.
Open extensions
Go to chrome://extensions and switch on Developer mode, top right.
Drop the folder
Drag the folder onto the page. Then hit ⌥⇧H on any site.
What it never does
- No page you visit is ever sent anywhere.
- No account, no email, no tracking, no paywall.
- It makes no network requests at all.
- The prompt goes to your clipboard, or to files you download yourself.
Where it stops
- Cross-origin iframes stay closed: that's a browser rule.
- Cross-origin stylesheets without CORS can only be read in part.
- Effects that depend on an ancestor's state aren't copied.
- Chrome doesn't allow extensions on its own internal pages.