Developer tools
Siteprint
Paste any website and see its colors, fonts, type scale, spacing, shadows, motion, assets and tech for free. Pro turns the design into a rebuild prompt, DESIGN.md, Tailwind v4 and shadcn/ui themes for AI builders.
- Category
- Developer tools
- Stage
- Growth
- For
- Designers and vibe coders
About
Paste any website and see its colors, fonts, type scale, spacing, shadows, motion, assets and tech for free. Pro turns the design into a rebuild prompt, DESIGN.md, Tailwind v4 and shadcn/ui themes for AI builders.
Features
- Problem
- Design details are difficult to collect consistently from a reference site.
- How it works
- Inspect a URL for its palette, typography, type scale, spacing, corner radii, shadows, motion, breakpoints, assets, and reported technology.
- Result
- Users can inspect design details and copy values, with free web inspection requiring no account.
- Why
- A structured inventory gives designers and builders concrete reference values instead of guesswork.
- Problem
- Raw design observations are not ready to guide an AI builder.
- How it works
- Pro creates a page-specific rebuild prompt and DESIGN.md, with layout and motion details measured in a real browser.
- Result
- Users can hand off a more explicit design reference to supported coding agents and builders.
- Why
- A prompt can guide recreation of a page, while DESIGN.md communicates its style as direction for new work.
- Problem
- Design tokens and themes take extra work to translate into project formats.
- How it works
- Export design information as Tailwind v4, shadcn/ui themes, CSS variables, and tokens.
- Result
- Users get reusable theme files and design tokens for implementation.
- Why
- Builder-oriented outputs make measured styles easier to apply in a project.
- Problem
- A newly built page may not match its reference.
- How it works
- Compare a user's build with the reference site and provide a prompt intended to help correct the differences.
- Result
- Users can iterate toward a closer visual match.
- Why
- Comparison connects observed mismatches to actionable build instructions.
- Problem
- Useful scans are hard to reuse or combine across projects.
- How it works
- Pro saves scans in a Library, supports composing two designs, and lets compatible agents read saved designs through MCP.
- Result
- Users can revisit scans, combine design directions, and provide them to an agent.
- Why
- Saved and accessible references can be reused as projects evolve.
Product questions
What does Siteprint do?
Siteprint inspects a website’s visual design and turns its measured styles into prompts and theme files that designers and AI-assisted builders can use to recreate or extend that look.
Who is Siteprint for?
Designers and vibe coders
Screenshots
