Teardown 09
It measures the look, then leaves the pictures behind
“A Safari extension for Mac that measures any page's design (color roles, type scale, spacing, corner radii, layout) and exports it as one precise prompt for Claude Code, Cursor, or Codex.”
10 screens · about 3 min
start ▶I keep describing sites I like to my AI. Badly.
Fig. 1: The real home page: paste a site, get its design.
See a site I like, take its look.
“whenever you open a website and you like that website you can basically what you do can do is that you can create a prompt out of it and then send it to your LLM to create a website similar to this particular website.”
Hand-thrown cups and kettles, made in small batches.
Shop the collectionFig. 2: Inspect: every colour with its role, the type scale, spacing and corners.
Measured, not guessed. Nice.
“measures the designs of any page. which is basically with their roles as well their type scale spacing corners and layout”
Hand-thrown cups and kettles, made in small batches.
Shop the collectionFig. 3: Assets: it found every picture, the logo and the icons.
It even grabbed the images.
“it even captures the layout as well the one thing it also captures is the asset”
Hand-thrown cups and kettles, made in small batches.
Shop the collectionThe prompt rebuilds this page in your coding agent. DESIGN.md is the site as a direction to apply to anything new.
◆ MORE TOOLS ◆
Fig. 4: Generate: Copy prompt or Copy DESIGN.md. The images stay behind.
Copy prompt. And the images?
“while translating it to the uh, plot code or anything it's just a copy prompt”
Hand-thrown cups and kettles, made in small batches.
Shop the collectionFig. 5: My agent's build: same colours and type, grey boxes for pictures.
Same vibe. Wrong pictures.
“it will create very much similar uh, it might hallucinate in terms of what it is going to create and unless you provide the assets which are required”
Hand-thrown cups and kettles.
Shop the collectionFig. 6: Settings: no field for my own key, no model to pick.
Whose model reads this? Can I pick?
“it runs on Claude and there was no given option to put your own API key to scan the particular website.”
Pricing
$0
$19.99 one-time
No account · no subscription
Fig. 7: Pricing: Pro is $19.99, once. The scans go on forever.
Pay once, scan forever. Who pays for the model?
“they are asking for one time charge which will only think of that if the user removes the access or use a very dumb model it might give not the right information or right connection between colors and their meaning”
Hand-thrown cups and kettles, made in small batches.
Shop the collectionThe prompt rebuilds this page in your coding agent. DESIGN.md is the site as a direction to apply to anything new.
◆ MORE TOOLS ◆
Hand-thrown cups and kettles.
Shop the collectionThe prompt rebuilds this page in your coding agent. DESIGN.md is the site as a direction to apply to anything new.
Fig. 8: Before: a prompt only. After: the prompt and the pictures, together.
The look and the pictures, together.
“while copying prompt you can have another op option to download assets as well which you can send it to the LLM”
› Build my shop page in the style of my latest Siteprint scan.
● siteprint get_design fernway.example
└ prompt.md, DESIGN.md, theme.css
● siteprint get_assets fernway.example
└ 6 images, logo.svg, 4 icons
● Using the real pictures: hero.jpg, kettle.jpg, cups.jpg
● Writing app/page.tsx …
No copy. No paste.
Fig. 9: Sketch: my agent pulls the design and the assets over MCP. No paste.
No copy, no paste. Better.
“they also can connect to the MCP which I think is a better idea where you can just connect the MCP and it can directly uh, get all the prompt and data from the websites rather than the Claude itself checking out the website and redesigning it.”
B-
Our grade
Right look. Hand over the rest.
“A useful idea that gets the look right but stops short of a faithful handoff.”