Launching today
Siteprint
Measure any website's design, then hand it to your AI
26 followers
Measure any website's design, then hand it to your AI
26 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. $9.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 $9.99 with no account.
Any feedback helps, cheers!
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.
"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.