Skip to content
livery
Create

Make Your App Look Like Any Website

Paste a link and Livery turns that site's design (its colours, fonts, spacing and buttons) into a kit for your coding agent. The agent asks before changing anything, then restyles your app step by step.

Try
$ curl -fsSL livery.site/<any-site>

More than one link?Combine pages of a sitecapture someone's taste

Works withClaude CodeCodexCursorWindsurfand more

your-app.comwaiting for a kit

9f2c1alivery(goatrank.lol v1): tokens

a0dfdflivery(goatrank.lol v1): components

a293a4livery(goatrank.lol v1): layout

Click a kit · measured tokens, illustrative layout0 of 3 commits

Fresh from the library · layouts with the content removed

Layout of scholarxiv.com, content removed
scholarxiv.com
Layout of robi.work, content removed
robi.work
Layout of goatrank.lol, content removed
goatrank.lol
Layout of voxide.app, content removed
voxide.app
Layout of linear.app, content removed
linear.app
Layout of farmjs.dev, content removed
farmjs.dev
Layout of app.birhana.net, content removed
app.birhana.net
Layout of milofinanzas.com, content removed
milofinanzas.com
Layout of app.birhana.net, content removed
app.birhana.net
Layout of go-marz.com, content removed
go-marz.com
Layout of monarch.com, content removed
monarch.com
Layout of sharyap.com, content removed
sharyap.com
Layout of x.ai, content removed
x.ai
Layout of abdoab.dev, content removed
abdoab.dev

The library

Every Link Becomes a Kit

Explore All Kits

In one sentence

What Is Livery?

Livery is a free tool that turns any public website's design into an installable design kit (a skill) for AI coding agents such as Claude Code, Cursor, Codex and Windsurf, measured from the live site rather than generated by a model.

Read how it works, browse the library, or the guides.

How do I make Claude Code follow a design system?
Install a Livery kit as a Claude Code skill: paste the install prompt from any kit page and Claude downloads the kit, checks its hash and saves it under .claude/skills. When you ask it to apply the kit, it audits your project, reports the gap and changes one area at a time after you approve.
What does a design kit contain?
A SKILL.md with the steps your agent follows, tokens.json with colours, type, spacing, radii and shadows, rules.md with the design's principles and what to never do, plus component, layout, motion and voice notes and reference frames of the site with its content removed.
Does it work with Cursor, Codex and Windsurf?
Yes. A kit is plain Markdown and JSON. Unzip it into your project and point the agent at SKILL.md; Cursor, Codex, Windsurf and claude.ai follow the same steps.
Is it allowed to use another site's design?
Livery measures style (values like colours, spacing and type sizes) and never copies logos, images, fonts or text. Site owners can opt in to share more, or opt out and have kits withdrawn.

Pricing

Free for Almost Everything.

No card, no trial clock. Pay only if you build a lot, want bigger or private tastes, or measure many pages behind your login.

See pricing

Free

$0forever

  • Every kit in the library: browse, install, download
  • New kits from any website, 20 an hour
  • Tastes of up to 5 sites
  • The browser extension, 40 pages an hour

Pro

$9.99a month, or $99 a year

  • 100 new kits an hour
  • Tastes and multi-page kits of up to 12 sites
  • Private tastes and multi-page kits
  • 200 extension pages an hour
How it worksWhat Livery measures, what a kit holds and how your agent applies it.Install in your agentClaude Code in one paste; Codex, Cursor and Windsurf in a minute.Make a tastePick a few sites one designer made; get the habits they all share.