Site Prompt
November, 2026
Site Prompt is a skill for coding agents: Claude Code, Codex, Cursor, Gemini CLI, Grok, Windsurf, VS Code and anything else that speaks MCP. You point at any part of a website, a button, a menu, a whole section, and it gives you a prompt that rebuilds it exactly. Or it takes it apart, layer by layer, so you can see how it was made.
Every demo on this page is a faux version of the real thing, drawn in code, so you can see how it works without sitting through a recording. The site being picked from is lakr.app, another thing I make, and the values in them are the ones Site Prompt read from it.
Words lose the numbers.
When I see a component I like and describe it to an agent, what comes back is close, never the same. The things that make it look right are numbers: the 1px ring standing in for a border, four shadows stacked to fake depth, the tracking on a heading. None of them survive a description.
So Site Prompt reads them from the live page instead. The prompt carries the exact markup and every value the browser computed, and the copy is checked against a screenshot of the original before it reaches you.
Pointing, not describing.
The site opens in Chrome with a small toolbar on it. Hover anything and it tells you what it is and how big. Click what you like, add a note if you want, and pick as many things as you need. ↑ takes the thing that holds what you are hovering, ↓ goes back.
Some things are easier to take as a region. Press Area and drag over it, and everything inside comes with it.
Menus that won’t wait.
Some of the best things on a site only exist while you hover them. A menu opens under your pointer and closes the moment you move toward it.
Hold freezes the page as it is. Open the menu, press H, and it stays open wherever the pointer goes, so you can pick inside it.
How it moves.
Most of the time, what I want from a site is the way it moves. So every pick is also replayed in a Chrome of its own: the page loading, scrolling into view, hover, the pointer moving across it, leaving, press.
Where the page says how it moves, in its CSS, an element.animate call or a GSAP timeline, the prompt gets it exactly. Where it doesn’t, the motion is measured and fitted to a curve or a spring.
Taking it apart.
Sometimes I don’t want a copy. I want to know how it was made, so I can make my own.
Break it down takes a pick apart right on the page. Things that sit flat, like a nav bar, are laid out like a spec, with callouts for fills, type, radius and padding. Things that are really stacked, like the glass recorder on lakr.app with its glowing rim, lift off into layers in 3D. Each layer gets a card with what it paints, why it works, and the CSS the site wrote for it.
Into every part.
A layer is rarely one thing. The record knob on lakr.app looks like one object, but it is nine images stacked on top of each other: a ring, brushed metal, three ring lights, noise, a dome and its two lights.
Each card lists its parts as a thread you can follow down. Click a part, or double click it on the canvas, and it opens on its own, with the way back above it.
Into your own project.
When you are working on your own site, the toolbar offers to add a pick straight to it. Choose Exact to copy it pixel for pixel, or My style to keep its layout and motion in your own fonts, colours and radius. Then click where it goes in your running site.
Your agent builds it in your stack, checks it against the original in your dev server, and answers in the toolbar when it is done.
What I came away with.
Reading the page was the easy part. The work was in everything a screenshot can’t show: menus that close as soon as you look away, drawings clipped through masks, animations that only exist while you hover. Each one is something a prompt written by hand would quietly miss.
Site Prompt is free and open source. The installer finds every coding agent on your machine and adds it to each one. It needs Node 22 or newer and Chrome.
The browser only receives the built site, so Site Prompt names the stack from what the page gives away and never claims the original source. Use it to learn, for redesigns, or for your own product: if you publish a rebuild, use your own name, copy and images.
It counts installs and tool use anonymously, so I can see which agents people use it in: no URLs, no page content, no names. Set SITE_PROMPT_TELEMETRY=0 to turn it off.