K/L.

Less AI slop. Keyline holds your coding agent to real UI/UX guidelines, so what it ships looks designed.

Install Keyline
Lexa, a case workspace for law firmsThe case binder: every assertion traced to a page, with the human gate that approved it.
Sable, decision intelligence for operatorsThe business on one page: revenue, its drivers, and the one question worth asking today.
Tracer, root-cause analysis for incidentsAn incident's root cause, argued from evidence, with the confidence it has earned.
Groundwork, a platform for construction teamsA builder's morning: what needs attention across every project, and what failed to sync.
Lexa, a case workspace for law firmsEvery matter, its stage, who acts next and how long the clock has left.
Sable, decision intelligence for operatorsA decision canvas: what-if branches laid out side by side, each with its likely outcome.
Tracer, root-cause analysis for incidentsEvery incident, how far its investigation has got, and what the evidence says so far.
Groundwork, a platform for construction teamsRequests for information across projects, each with its status, priority, owner and due date.

A coding agent alone ships the page you've seen a hundred times: a dozen font sizes, a card around everything, gray text too faint to read. Keyline holds it to the laws a designer would, in your own names.

See it work

Five commands, one sample screen.

Pick one and watch it work on the same billing page a coding agent might ship.

Try it on this sample interface:

Critique/keyline critiqueThe three changes that would matter most
  1. 1
    The main action is the faintest thing here

    "Save changes" sits at 1.9:1 on white; the eye lands on the red button beside it instead.

  2. 2
    Every block is boxed, so nothing groups

    Four bordered, shadowed boxes at equal weight; the plan and its seats read as strangers.

  3. 3
    Six sizes for one short page

    A shouting all-caps title over 10px labels: the ladder has no rungs in between.

Six passes

One domain at a time, in the order that settles.

Type first, patterns last. Scroll, and watch them land on one screen.

  1. 01/keyline type

    Every size gets a job

    Thirteen sizes and four weights are a scale nobody chose; the type pass collapses them onto a short ladder of named roles.

    • Sizes are assigned to roles, not read off a ratio
    • Two weights, each with one job
    • Labels in sentence case

  2. 02/keyline color

    Measured, not eyeballed

    Text tiers are solved from contrast targets on the surfaces they really land on; the brand color stays wherever it has a job.

    • Every tier clears 4.5:1 on its worst surface
    • Brand color kept where it has a job
    • Color never carries a state alone

  3. 03/keyline layout

    Space that groups

    Space opens above a heading and closes below it, boxes around unlike content come off, and nested corners share a center.

    • Space above a heading outweighs space below
    • Inner radius is outer minus padding
    • Boxes are the exception

  4. 04/keyline depth

    Only what floats casts a shadow

    Depth decides what is flat, raised, floating or modal, and builds each level as one bundle of surface, edge and shadow.

    • Elevation is a bundle, applied whole
    • Edges say where a surface ends
    • Translucency only with its fallbacks

  5. 05/keyline motion

    Timed by how much changes

    Durations come from a ladder sized by how much of the screen moves, on one curve; reduced motion gets a quieter version, not a switch.

    • Duration scales with the change
    • Press feedback in 0ms
    • Reduced motion is a substitute, not a kill switch

  6. 06/keyline patterns

    Words that do what they say

    Every action is named for what it does and every link for where it goes, and each element keeps the promise its form makes.

    • Labels name the action
    • Links name where they go
    • Every element keeps its promise
  1. Type
  2. Color
  3. Layout
  4. Depth
  5. Motion
  6. Patterns

As a coding agent wrote it

Why Keyline

Laws, not a look. Measured, here, on this page.

Four reasons, each a law this page keeps. The red marks are measured live, off the type you're reading.

  1. Your names, your values

    Written in the tokens you already have: in the dashboard, --text-3 went from 3.55 to 4.93:1 under its own name.

  2. Four presets, one set of laws

    Editorial, Product, Expressive, Glass: the dials set for what your reader is doing, any of them movable with a reason.

  3. A detector for the pull request

    Reads CSS, Tailwind and CSS-in-JS in any framework, with no model and no API key; on this site it finds nothing.

  4. 11 commands, or just ask

    4 read and change no code, 7 refine one domain each; or ask in plain words.

Install

One line, then /keyline init.

The installer asks which agent you use and copies the skill into its folder. Node 18 or later.

/plugin marketplace add Mihirmodi27/keyline
/plugin install keyline@keyline

Or copy the skill into the project: npx keyline install --tool claude-code

Then, in your agent:

/keyline init

Still deciding?The short answers, then the source.

Keyline on GitHub
Does it restyle my product into someone else's?

No. Keyline works in your token names and keeps what your design already chose: its brand color, its corners, its navigation. It removes something only when a law requires it, and says which law.

Does the detector need a model or an API key?

Neither. It reads CSS, Tailwind classes, inline styles and CSS-in-JS from source, in React, Vue, Svelte, Astro and plain HTML, and exits non-zero on errors so it can gate a pull request.

What's DESIGN.md?

The contract between your codebase and the agent: your tokens mapped onto Keyline's roles, the preset, your motion and z-index ladders, and every decision made off the preset with its reason. Edit it by hand whenever you like.

Is it free?

Yes. Keyline is MIT-licensed and open source.

Something half-built in mind? Give your agent the laws it would get from a designer.

npx keyline install
GitHub