Design kits for Claude Code, Cursor and Codex
Make your applook likeany website.
Paste a link. Your coding agent gets its colours, type and motion as a kit.
02Apply
Same app.Any website's look.
A plain app, and the same app in a real kit from the library: every colour, font, corner and curve as measured. Drag across it, or pick a kit.
Notes that keepup with you.
Capture, link and find everythingyou write, even offline.
- Outline the launch postWriting
- Sync notes from the offsiteTeam
- Review onboarding copyProduct
- Type
- Arial 700Inter Variable 510
- Accent
- #2563eb#f7bf8b
- Corners
- 4pxpill · 12px
- Motion
- none100ms bezier(0.25, 0.46, 0.45, 0.94)
03Read
The linear.app kit, as a specimen.
Measured from the live site, written down as rules your agent follows.
Display · Inter Variable 510
A dark interface on a near-black neutral background where an orange accent marks the next step.
Type scale
- 72lineardisplay
- 64linearh1
- 56linearh2
- 40linearh4
- 24linearsize-24
- 20linearbody
Colour
Corners
Spacing · 9 steps
- 12
- 16
- 20
- 24
- 28
- 32
- 36
Motion · most used
100ms · cubic-bezier(0.25, 0.46, 0.45, 0.94)
71% of transitions · drawn slowed down
Rules and files
Never introduce a second accent colour.
- SKILL.md
- rules.md
- tokens.json
- fonts.json
- icons.json
- components.md
- layout.md
- motion.md
- details.md
- stack.md
- voice.md
- licences.md
- frames/
04Install
One line in. A redesign out.
Your agent downloads the kit, checks it, reads your project and its rules, and asks before it changes anything. One area at a time, one commit each.
Works with
- Claude Code
- Codex
- Cursor
- Windsurf
- claude.ai
05Library
Every linkbecomes a kit.
Each one built from a link someone pasted. Open one, install it, or build on it.
Explore the library
06Pricing
Free to try. Pro, when it's daily work.
Pro
$9.99a month
More kits, installs and Figma copies a day, bigger tastes, and private multi-page kits.
Compare the plans07Questions
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.
01How 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.
02What 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.
03Does 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.
04Is 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.
08Start here