Extract the design system of any website
Paste any website and inspect its colors, typography, spacing, corners, shadows and motion in one place. Click any value to copy it.
How it works
- Paste an addressAny public website, like vercel.com. The page and its style sheets are read on our server, the way a browser loads them.
- The whole systemColor roles and palette, fonts and type scale, spacing steps, radii, content widths, shadows, easing, breakpoints, assets and tech.
- Build with itWith Pro, hand the system to your AI builder as a rebuild prompt, DESIGN.md, Tailwind or shadcn/ui theme.
Design systems of well-known websites
Stripe
Linear
Vercel
Notion
Airbnb
Apple
Figma
Spotify
GitHub
RaycastQuestions
What is a design system extractor?
A tool that reads a website and lists the decisions behind its look: colors, fonts, sizes, spacing, corners, shadows and motion, so you can study or reuse them.
How accurate is it?
Every value comes from the site’s own style sheets. Sites that set their styles with JavaScript give less; Siteprint for Safari measures the rendered page for those.
Can I export it for Tailwind or my AI builder?
Yes, with Pro: a Tailwind v4 theme, shadcn/ui variables, design tokens, DESIGN.md and a prompt that rebuilds the page.
Is it free?
Yes. Inspecting a site is free, instant and needs no account, as often as you like. Pro ($9 a month or $69 a year) turns the design into a rebuild prompt, DESIGN.md and exports for your AI builder.
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