Skip to content
Back

The Remi design harness

Agent skills that help anyone at Remi design to our standard.

As more people at Remi started building product with AI, I wrote down how I make and review design decisions as skills their agents could follow.

Role
Designed and built
For
Remi's product team, plus leaders outside product who now build product themselves
Runs in
Claude Code and Codex
Status
Internal preview
An overnight pass in Paper: the agent's summary next to iteration 02 of the SOW designs, with every state covered
An overnight pass in Paper

Why

More and more people at Remi were building product with AI, often without a designer next to them, and I wanted good design decisions to travel with them wherever they worked.

What's in it

The harness is a set of skills that follow a design from start to finish. The guide helps someone frame the problem by pulling in the PRD and earlier decisions, then asks only the few questions that would actually change the answer. From there, the iterate skill takes in feedback and tries variations without losing what's already been decided, the review skill critiques the work against our principles and explains what each note is based on, and the check skill opens the running UI at desktop, tablet and phone sizes to make sure it holds up. Alongside them, it uses two open-source tools: Paul Bakaus's Impeccable for craft guidance and the browser scripts from Taste Skill.

The guide's stages, Understand, Frame and Explore, next to the change log for a revision of the stack
Understand, frame, explore

Capturing judgment

the hardest part

The principles came from about nine months of my design feedback. I wanted to teach judgment rather than rules, so I narrated real design sessions and recorded each call along with what prompted it, what I decided, why, and when it wouldn't apply. That way an agent learns the reason behind a choice, not just the choice. If I flattened some rows on one screen, it doesn't walk away thinking "always use flat rows." It learns that new rows should match the ones already on the page, which it can apply to screens I've never touched.

Screenshot to addA recorded decision: before, explored, chosenFrom your Paper files: closed SOW rows

A registry agents can read

I turned our main component library, all 194 components, into a registry that agents can search. Beyond listing what exists, it carries my calls on when to use what, the kind of thing a designer would usually catch in review, like reaching for a searchable dropdown before a plain select, keeping tap targets thumb-sized on any phone, and not using a switch where a checkbox belongs.

A component fidelity update: a design can't claim it reuses a component without evidence, and missing evidence stays unverified
No reuse claims without evidence

The systems underneath

The harness sits on top of two design systems. The main app runs on the component registry above, and for Eden and anything else agents build, I made a separate agent-first kit with botanical names: Xylem holds the tokens, Aspen the general components, and Pando the Remi-specific blocks, like a ticket preview, a message thread and an evidence card.

Both live in Greenhouse, a playground that other designers and engineers use every day and that the harness can reach too, which means designers, engineers, non-designers and agents are all building from the same pieces.

Pando

Remi blocks

The things Remi's work is made of.

Ticket preview blockTask preview block

Aspen

General components

Shared building blocks for any screen.

Buttons in six variants and five sizes
Entity chips for tasks, tickets, texts and channelsPerson avatars in three sizes

Xylem

Tokens

Color, type, space and shape. Everything grows from here.

Status color tokens, light and dark

How the agent builds a screen

  1. 1 · Agent returns

    An action, plus the evidence behind it

  2. 2 · Registry rules

    • Taking this action → use this block
    • These words appear → show that one
  3. 3 · Layout grid

    Blocks fill a simple grid

Eden's design system: Xylem tokens feed Aspen components, which make up Pando blocks. Registry rules tell the agent which blocks to use for what it returns, and blocks fill a simple layout grid.

Iterating

It went through more than seven versions. When another designer on the team found that agents lost track of decisions across follow-up messages, I added the iterate skill and new rules for carrying context forward, and designed a test that plays out a long back-and-forth conversation to check that it remembers what was decided along the way.

Status

It shipped as an internal preview to the product team and to functional leaders outside product. That long-conversation test is designed but hasn't been run yet, so I'd call it promising rather than proven.

The working roadmap: a pilot goal of halving designer review time, with 8 of 10 changes passing on first review
The pilot goals

What happened

  • Rolled out to the whole product team and to functional leaders outside product.
  • About 15 people use it today.
  • Our marketing team used it to design and ship a referral flow in the homeowner portal, where homeowners can see and send referrals.
  • Engineers are adding new suggested actions to Eden built entirely from the blocks in Greenhouse.

What I'd do next

Add telemetry so we can see the feedback people give whenever the harness is used, and let the harness learn from it and improve itself over time.

Run the long-conversation test, and only turn proposed review ideas into rules where the results back them up.