Siteprint
Measure any website's design, then hand it to your AI
102 followers
Measure any website's design, then hand it to your AI
102 followers
Siteprint is a Safari extension for Mac that measures the design of any page: colours with their roles, type scale, spacing, corners and layout. Extract it as one exact prompt for Claude Code, Cursor or Codex. Runs on your Mac. $19.99 once.
Hi everyone, I'm the maker of Siteprint.
I'll be upfront: tools that generate design prompts and pull colors, fonts from a website aren't new, and Chrome has dozens of them. But I spend my day in Safari, and I wanted one that feels at home there instead of switching browsers. So I built it as a proper Safari extension.
Being a Safari extension also brings a built-in upgrade: Apple Intelligence. On a Mac that has it, the on-device model reviews each scan, names its colors and type styles, describes the feel and what to keep or avoid, and answers your questions about the design. On a Mac without it, everything measured works just the same.
What you get is a prompt written for agents, not a list of colors. Every color comes with its role, the type scale with exact sizes and weights, plus corners, spacing and a blueprint of each section. Paste it into Claude Code, Cursor, Codex or any other AI tool and it builds from real measurements instead of a guess.
Inspect is free and measures a site's colors, type, spacing and layout, and your Library keeps the designs you like for later. Pro adds the prompt and DESIGN.md, ready-made themes, lets your agent read your scans directly via MCP, and mixes two sites into a new style with Compose.
It's a one-time $19.99 with no account.
Any feedback helps, cheers!
Colors with roles fixes half of it for me. The other half was components: Claude Code kept inventing a new card for every screen until I banned new components and made it reuse the ones already in the repo.
Does a Siteprint scan pick up repeated components like buttons and cards?
@abdullah_javaid3 Partly. Scan measures the main buttons, cards and chips (fill, radius, padding, type, border), and the prompt tells the agent to build shared primitives. It doesn't count repeats or say "reuse, don't invent" yet. Your ban rule is a great idea, so I'm adding it to the prompt in next update.
Giving every colour a role instead of a hex list is the right call, that's the bit agents get wrong when you hand them raw tokens. What I'd want to know is whether a scan captures the dark variant, because that's where handoff falls apart for us, you measure the light theme and the agent invents a dark one that matches nothing. One-time $9.99 with no account is a refreshing pricing page as well.
@asadmalik901 Thanks! Right now a scan captures whichever theme the page is showing, and the prompt says if it's light or dark. So for a site with both, switch it to dark (or set your Mac to dark mode if the site follows it) and scan again. Pairing both themes into one prompt is a great idea though, so it's going on the list.
@fpapic The toggle workaround gets me there for now, thanks. Pairing matters because two scans means two prompts to reconcile by hand, and usually the only real difference between them is the variable values. The thing I'd check if you build it is whether the roles stay stable across both, a colour that's background in light and surface in dark is exactly where the agent starts guessing again.
"every color comes with its role" is the useful part, way more than a raw hex dump. curious what happens with the edge cases though - a one-off accent color used in a single badge somewhere on the page. does it get flagged as an outlier/exception in the prompt, or does it get listed alongside the real system colors with equal weight? asking because that's exactly the kind of thing that turns into a hallucinated design token if an agent just reads a flat list and treats everything as equally intentional
@galdayan Great question. Colors are weighted by how much of the page they paint, not listed flat. If an accent only shows up in a badge or a status dot and never on a button, the prompt calls it a trace accent for small details only, and tells the agent not to use it for buttons, links or large areas. With several accents it says which one leads and that the others are rarer. Colors that only appear in images are listed separately, so they don't turn into tokens.
@fpapic that "trace accent, don't use for buttons or large areas" distinction is smarter than I expected - most tools would've just bucketed it in with everything else. does the agent actually respect that instruction reliably though, or have you seen cases where it still grabs the trace accent for something bigger because it's technically "in the palette" and the model doesn't weight the usage note as strongly as the color value itself