Skip to content
livery
Create

How it works

Measured, Written Down, and Applied With You

Livery measures a site's design, writes it down as a kit with the reasons attached, and your agent applies it one area at a time, only after asking you.

How it works

From Any Link to Your Codebase Nothing Changes Until You Say So

A kit is plain Markdown and JSON. It carries the reasons behind a design, not just its values, so your agent knows what to keep and what to never do.

  1. livery.site/example.com
    Palette, type, spacing, icons
    01

    Paste a Link

    Put livery.site/ in front of any public website. Livery renders it at three screen sizes and reads its design: colours, type, spacing, icons, motion.

  2. $curl -fsSL …/k/example-com/v1/kit.tar.gz
    sha256 verified
    .claude/skills/livery-example-com
    SKILL.md · tokens.json · rules.md
    02

    Install the Kit

    Your agent downloads the kit, checks its hash, and saves it as a skill. Every file is visible on the kit page before you run anything.

    03

    Your Agent Asks, Then Applies

    It audits your project, rates the gap for each area, and asks what to change. Approved areas land as separate commits you can revert one by one.

The flow

Your Agent Asks First

Every kit carries the same eleven steps. Nothing is edited until you've seen the gap, chosen the areas and settled any conflict with your own project rules.

01 tokens
Point at a layercolour, type, spacing, radii

  1. Your agent

    Audited your project. Tailwind v4, tokens in app/globals.css, and 41 hard-coded colours across 12 files. I can centralise those first.

  2. Your agent

    Here is how far your design is from this kit:

    TokensLarge
    ComponentsMedium
    LayoutSmall
    MotionMedium
    VoiceSmall

    Which areas should I apply, and is there anything that must not change?

  3. You

    Tokens and components. Keep our logo colour.

  4. Your agent

    One conflict with your project rules:

    CLAUDE.md:14

    “Primary buttons are blue (#2563eb).”

  5. Your agent

    9f2c1ablivery(example.com v1): tokens

    4e8d0f2livery(example.com v1): components

    Contrast checked in both themes. To undo one area: git revert <hash>.

Open a kit

Values and the Reasons Behind Them

This is Livery's own kit, built from this page. Plain Markdown and JSON your agent reads one file at a time, only when a step needs it.

.claude/skills/livery-livery-site
v1
---name: livery-livery-sitedescription: Apply the livery.site design kit (Livery v1) to this  project. Use only when the user asks to apply this kit.---# livery.site design kit · v1 · flow 1**Never edit a file before step 5. Ask, don't assume.**Soft paper tones, hairline borders and a single teal accentthat only ever marks the next step.## 1. AuditFind theme files, tokens, fonts, the icon library and howcolours are used. Do not edit anything yet.## 3. Report the gapRate tokens, components, layout, motion and voice:small / medium / large.## 4. AskWhich areas to apply. What must not change.## 7. ApplyOne area per commit: tokens → components → layout →motion → voice.

Style, never assets

Every Item Says What You Can Ship

Free to reuse

Reused As Is

Values and open-source pieces your agent can install straight from the source.

Colours, spacing, radii, easing · Lucide, Phosphor · Google Fonts

Needs a licence

Needs Your Licence

Paid fonts and icon sets. The kit names them and always offers a free alternative.

Adobe Fonts, commercial typefaces · Font Awesome Pro

Style only

Described, Never Copied

Anything that belongs to the site. Your agent recreates the feel, not the file.

Logos, photos, illustrations, custom icons, the site's own words