Turn any website into DESIGN.md
Paste a website to preview its DESIGN.md and a prompt for your AI builder. Its colors, fonts and spacing are free to explore; the complete handoff is Pro.
How it works
- Paste an addressAny public website you like the look of. Siteprint reads it and shows the start of its DESIGN.md and prompt right away.
- Preview, then buildThe free preview shows what your AI will get. Pro gives the complete files, plus a rebuild prompt with layout and motion measured in a real browser.
- Paste into your builderClaude Code, Cursor, Lovable, v0, Bolt or any agent that reads Markdown.
DESIGN.md of well-known websites
Stripe
Linear
Vercel
Notion
Airbnb
Apple
Figma
Spotify
GitHub
RaycastQuestions
What is DESIGN.md?
A Markdown file that describes a design (colors, type, spacing, shape and how they are used) so a coding agent applies the same style to whatever it builds.
What is the difference between the prompt and DESIGN.md?
The rebuild prompt recreates the page you scanned, layout and motion included. DESIGN.md is the style as a direction, for building something new that looks the same.
Which AI builders does it work with?
Any that reads text: Claude Code, Cursor, Codex, Lovable, v0, Bolt and Replit. Pro also exports a Claude Code skill, a Cursor rule, Tailwind v4 and shadcn/ui themes.
Is it free?
Inspecting a site and previewing its DESIGN.md is free with no account. The complete DESIGN.md, prompt and exports are Pro: $9 a month or $69 a year.
Inspect for free. Build with Pro.
Inspect
Instant, as often as you like, no account. Click any value to copy it.
- PaletteEvery color, sorted into neutrals and hues, in HEX, RGB or HSL
- TypographyFonts, weights, files and where they come from, plus the type scale
- Spacing and shapeSpacing steps, corner radii and content widths
- Shadows and motionShadows, gradients, easing curves and durations
- BreakpointsEvery screen width the CSS changes at
- Assets and techLogo, icons, share image, framework and hosting
Build with this design Pro
Everything your AI builder needs to get your project looking right.
- Rebuild promptThe page’s layout, motion and sizes, ready for Lovable, Claude Code or Cursor
DESIGN.mdThe design as a direction your agent applies to anything new- Builder exportsDESIGN.md, Tailwind v4, shadcn/ui and design tokens
- Named colors and text stylesEach color and text style named and placed, measured on the rendered page
- Check your buildCompare your page with the site and get a prompt that fixes the differences
- Library and agentsSaved designs, compose two into one, and your agent reads them over MCP
Key elements
Build with this design
Get your project looking like this
- Rebuild promptLayout, motion and exact sizes, measured in a real browser
- DESIGN.md and builder exportsTailwind v4, shadcn/ui, CSS variables, tokens
- Hero backgroundThe animated background, copied as code
- Named colors and text stylesEach one named and placed, measured on the rendered page
- Check your buildCompare your page and get a prompt that fixes it
- Library, compose and MCPSave designs, mix two, let your agent read them
Colors
Roles
Roles
Dark mode
Full palette
Gradients
Fonts
Text styles
Every size
Spacing and shape
Spacing scale
Corner radii
Content widths
Shadows and motion
Shadows
Easing hover to play
Durations
Animations
Breakpoints
Assets
Logo and icons
Images
Tech
Page facts
Check your build
Built your own version? Paste its address. We open both pages in a real browser, compare colors, type, spacing and layout, and write a prompt that fixes what is off.
Fixes
Export for AI
Social image