Measure design tokens
Reads a website in Safari and identifies colors along with their roles, rather than presenting only a list of sampled swatches.
Siteprint
Siteprint is a Safari extension for Mac that measures a website’s colors, typography, spacing, layout, and other design properties. It helps developers and designers turn a reference site into a concrete prompt, DESIGN.md export, or coding-agent workflow.
A measured handoff from a website to a coding agent
Siteprint is a Safari extension for Mac that measures the design of a website you are viewing. It records the page’s color palette and color roles, type scale, spacing, corners, shadows, and a blueprint of its sections, giving a coding workflow concrete design values to work from.
The free version supports inspection, token export, and a Library for saved scans. Pro turns a scan into one prompt or a DESIGN.md file, adds themes and Compose for combining two saved sites, and lets supported coding agents read scans directly. Siteprint does not build the site itself; the connected coding agent uses the measured output to create a new page.
What Siteprint does
Inspect the page structure
Shows the palette, typography, and a blueprint of the page’s sections so the reference design can be examined before export.
Generate a coding brief
Copies the measured values into one prompt for a coding agent, with a DESIGN.md export available in Pro.
Export design direction
Exports themes and tokens for use in a new interface, preserving concrete values such as type sizes, weights, radii, and spacing.
Compose two references
Combines two saved site scans into a new style instead of treating either reference as a page to copy directly.
Share scans with coding agents
Connects to Claude Code, Cursor, Codex, and other coding agents so they can read saved scans directly on the Mac.
Practical ways to use Siteprint
Start a new interface from a reference
Scan a reference site in Safari, inspect its typography, spacing, palette, and section blueprint, and hand the measured direction to an AI coding tool instead of describing the look manually.
Combine design references
Save multiple scans in the Library and use Compose to combine two design references into a new style for an original page.
Create a developer handoff
Export tokens and themes when a developer needs concrete values for colors, type, radii, and spacing during implementation or restyling.
Give an agent design context
Let Claude Code, Cursor, or Codex access saved scans directly so the agent can use the measured design context within its coding workflow.
Analyze an existing visual system
Use the inspection view to study how an existing website organizes its visual system before deciding what to adapt in a separate product.
Pros and Cons
Pros
- Measures concrete design properties such as color roles, type scale, spacing, corners, shadows, and section structure.
- Provides a free way to inspect sites, export tokens, and save scans in a Library.
- Creates a prompt or DESIGN.md with exact values for coding workflows, with support for Claude Code, Cursor, and Codex.
- Processes scans locally on the Mac; the site states that it does not upload data or track users.
- Supports Compose, which combines two saved site scans into a new style.
Cons
- It is currently a Safari extension for Mac and requires macOS 14 or later; Chrome and iPhone are not supported.
- The product measures and exports the design but does not build the website itself; a separate coding agent performs that step.
- The direct coding-agent workflow and generated prompt are Pro features.
FAQ
How do I set up Siteprint?
Install Siteprint from the Mac App Store, open the app once, then enable the extension in Safari under Settings → Extensions. Open an http or https website, click the Siteprint toolbar button, and allow Safari to let it read the site. If a tab was already open, reload it and choose Rescan.
Do I need Apple Intelligence?
No. The measurements are taken from the page itself. On a Mac with Apple Intelligence, an on-device model can additionally describe a scan and answer questions through Ask this design.
Does Siteprint build the website itself?
No. Siteprint measures the design and produces a prompt or DESIGN.md export. A coding agent such as Claude Code, Cursor, or Codex uses that material to build the page.
What is included in Free and Pro?
The free tier includes inspection, token export, and the Library. Pro adds the generated prompt, DESIGN.md and themes, Compose, and coding-agent access. Pro is a one-time purchase priced at $9.99.
Can a coding agent read my scans directly?
Yes. In the extension, open Generate → Coding agents and copy the command for Claude Code, Cursor, or Codex. The agent can then request your scans on the same Mac when Pro is enabled.
Quick Facts
- Category
- Design tool and developer tool
- Platform
- Safari extension for Mac; macOS 14 or later
- Workflow
- Scan a website, inspect its design, then export a prompt or DESIGN.md
- Coding agents
- Claude Code, Cursor, Codex, Lovable, and other AI tools; direct scan access is documented for Claude Code, Cursor, and Codex
- Pricing
- Free inspection tier; Pro is a one-time $9.99 purchase
- Data handling
- Runs on the Mac; the site states there are no uploads
Alternative a Siteprint
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repositories and verifies changes with the real compiler, debugger, sanitizers, and tests before showing a diff. It offers a free tier plus paid plans, with editor connectors and zero-retention handling described in the source.
Epherem
Epherem is a static security scanner for web apps built with AI coding tools such as Lovable, Bolt, v0, Replit, Cursor, and Claude Code. It checks source files and dependencies for common security mistakes, then provides categorized findings and suggested fixes without running the app.
CreateOS Sandbox
CreateOS Sandbox is an isolated compute environment for running code and agent workloads inside Firecracker micro-VMs. It is designed for workflows that need machine-level isolation, private networking between sandboxes, and programmatic control through SDK, CLI, or MCP.
GitBot
GitBot is a local browser-based workspace for creating reusable coding bots powered by Claude Code, Codex, or OpenCode. It helps developers run those agents across repository folders with persistent threads and configurable permissions.
hob
hob is an independent workspace for coding agents that keeps agent sessions, terminals, history, and follow-up work organized around the tools and providers you already use. It is aimed at developers who want local control over routing, history, and workspace structure rather than a bundled model stack.
Ably Chat
Ably Chat is a chat API platform for building custom realtime chat applications. It supports room-based messaging, typing indicators, presence, reactions, and message updates, with usage-based pricing options for different deployment stages.