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 goatrank.lol, content removed
goatrank.lol
Layout of robi.work, content removed
robi.work
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 id.ctrader.com, content removed
id.ctrader.com
Layout of samueldagne.me, content removed
samueldagne.me
Layout of udemy.com, content removed
udemy.com
Layout of shein.com, content removed
shein.com
Layout of awwwards.com, content removed
awwwards.com
Layout of blinkedsolutions.com, content removed
blinkedsolutions.com
Layout of whpcreative.com, content removed
whpcreative.com
Layout of testr.mohammedibrahim.dev, content removed
testr.mohammedibrahim.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?
A kit measures style: values like colours, spacing and type sizes, with the site's own assets described rather than included. Site owners can opt in to share more, or opt out and have public kits withdrawn. What you copy into Figma with the extension is yours to use as the law and the site's licences allow.

Pricing

Free to Try, Pro to Use Every Day.

Free is enough to try Livery every day. Go Pro when you build, install and copy to Figma all the time, or want private and bigger tastes.

See pricing

Free

$0forever

  • Browse and read every kit in the library
  • New kits from any website, 2 a day
  • 2 kit installs and 2 copies to Figma a day
  • The browser extension, 2 pages a day

Pro

$9.99a month, or $99 a year

  • 30 new kits a day
  • 30 installs and 60 copies to Figma a day
  • Tastes and multi-page kits of up to 12 sites
  • Private tastes and multi-page kits
  • 60 extension pages a day
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.