The workflow

Echo is a base, and your style goes on top. The components, the press, the sound, the motion and the accessibility floor are Echo's. The look is yours, read from your own mood boards. Your agent builds each product in its style, and Echo's check and tests keep it there. Two products built this way look like two devices from the same maker.

This page follows one builder through it. You ship with a coding agent. This month you're making a tool designers use to compose paper effects and export the code. Next month it's a practice timer for musicians. Every command below is real, and each step links to the page that covers it in full.

1 · Your mood boards become styles

Echo's Design Eye is a skill init puts in every Echo project. Save your boards as PNG or JPEG files and ask your agent:

Read my boards in ~/Desktop/boards into styles.

It asks what the product is for, if the project doesn't say yet. It groups the boards by visual logic, samples each reference's real colours with style sample, and reads each one's type, buttons, surfaces and colour.

Nobody makes a clean board, so before it writes anything it asks you what the boards can't settle, in one message, with the answer it suggests:

Seven of ten tiles are black ink on white paper; the acid yellow is on two, the blue on one. Black and white? The blue prints don't share the board's logic: leave them out? And the main action is the white key on its ink slab, not the underlined link?

Your answers go into the style. Say your boards are spec sheets and patent drawings, where every part is drawn in one black line and stays hollow until it's on. Echo draws that too: the style sets render: drawn, so Echo's parts are outlined in the ink instead of molded and lit, and they still press. It's Drafting Index, and it goes into your library, ~/Documents/styles, which is private and yours, and reused for every product you make. style check says Echo can apply it, and that it makes a light device. Where a board asks for something Echo doesn't do, like glass, the style says what it refused and what it got instead.

Drafting Index is also in Echo's own library, beside Echo's style, so you can wear it without a board. Styles has the files a style is made of.

2 · A new app picks its style

npx echo-ui-cli init

init installs echo-ui-core, writes echo.json, echo-lock.json and the theme, and adds what your agent reads: a short Echo block in CLAUDE.md or AGENTS.md, DESIGN.md, a hook that runs the check, the Stop gate that runs Echo's tests, and three skills (building with Echo, Design Eye and Style Fit). It never edits your source code. It prints what to paste once: the theme import and the page's ground, SoundProvider, and <EchoCheck />.

Then ask which style fits:

Which style fits my paper tool? Designers compose paper effects with it and export the code.

Echo's Style Fit works out who the tool is for and places it on seven axes: warmth, volume, density, formality, era, craft and ornament. Then style fit measures every style in your library, and Echo's, against that:

npx echo-ui-cli style fit --profile "W2 V2 D3 F4 E3 C5 O2"

The product  W2 V2 D3 F4 E3 C5 O2  tolerance W1 V1 D1 F1 E1 C1 O1

   1  drafting-index (yours)  W2 V2 D3 F4 E2 C4 O2  inside every tolerance
   2  echo (Echo's)  W4 V3 D3 F2 E3 C5 O3  2 past tolerance: W+2 F-2

It orders; it doesn't decide. Read the best of them: npx echo-ui-cli style show <name>.

The agent reads the best of them and argues for one, here Drafting Index: why it wins, why Echo's own style loses (too warm and too playful for a spec sheet), what it adapted for the tool and what it refused.

Drafting Index passes the slop police: nothing in it is a pairing that reads as made by AI. A style that didn't pass would be marked on the list, and your agent would ask you before wearing it. The agent saves the decision to your library and wears the pick:

npx echo-ui-cli style use drafting-index

· This project now wears Drafting Index, from your library (~/Documents/styles/drafting-index/style.json).
· components/echo/echo-theme.css written from its seed; echo.json records it.
  Font: Inter Tight (sans), from Google Fonts: https://fonts.google.com/specimen/Inter+Tight
  Font: IBM Plex Mono (machine), from Google Fonts: https://fonts.google.com/specimen/IBM+Plex+Mono
  Font: IBM Plex Mono (mono), from Google Fonts: https://fonts.google.com/specimen/IBM+Plex+Mono
  Font: IBM Plex Mono (lcd), from Google Fonts: https://fonts.google.com/specimen/IBM+Plex+Mono
· DESIGN.md carries its rules for your agent.

style use writes the style's settings into echo.json and the theme, says which fonts to get, and puts its rules in DESIGN.md, where every agent working on the tool reads them. If you already know the style, init --style <name> does both at once.

More in Installation, What Echo puts in your project and Styles.

3 · Your agent builds the screen

Build me the export screen.

The Echo block tells the agent it's in an Echo project, and the Echo skill has the steps. The agent reads DESIGN.md, names the screen's one main action (Copy for agent), and asks which component does each job, all in one call:

npx echo-ui-cli which "a setting from 0 to 100" "one choice among a few" "code to copy" "the one main action"

a setting from 0 to 100
  slider — Base UI Slider (keyboard, drag, track-press, a11y) with a recessed rail + molded knob and a scrubbing tick sound on each step.
    npx echo-ui-cli add slider
one choice among a few
  segmented — A hardware segmented selector — molded uppercase segments in a recessed well, the active one on the lit primary cap.
    npx echo-ui-cli add segmented
  …
code to copy
  Nothing in Echo does this yet. Echo has no code block. Put a <pre> in a Panel variant="screen", in var(--echo-font-mono), with a HardwareButton that copies it.
the one main action
  hardware-button — The molded tactile button: a cap in a recessed well with real press travel + sound.
    npx echo-ui-cli add hardware-button

When nothing in Echo does a job, which says so, and says what to build it from. The agent builds that part from Echo's parts instead of faking a component. It reads the closest reference screen (docs console), then each component's props and a working use (docs slider segmented …), and copies them in with add.

You open it and find a white sheet with every part drawn in one black line. The sliders are outlined rails, the paper stocks are a row of hollow segments with the chosen one filled, and the export key stands on its ink edge. The keys travel down that edge and click (sound starts muted until you turn it on), and everything works from the keyboard and reads aloud. You didn't write any CSS.

More in For AI agents and the CLI's which and docs.

Change one setting

Make the boxes a little rounder, and give it more room.

npx echo-ui-cli style set radius 0.6 density comfortable

radius    0.3 → 0.6
density   default → comfortable
· components/echo/echo-theme.css written from the new seed; echo.json records it.
· DESIGN.md carries the new values for your agent.
  Still wearing Drafting Index, changed: radius, density. `npx echo-ui-cli style use drafting-index` puts it back whole.
  Put it back: npx echo-ui-cli style set radius 0.3 density default

Every component in the tool changes at once. The keys stay pills, because Drafting Index sets pills: radius moves the boxes and leaves the keys alone. Nothing is restyled by hand, contrast still holds, and the last line undoes it. style set on its own lists where each setting is, and the Echo skill tells the agent which setting a word like "rounder" or "denser" means. More in Styles.

4 · When it slips, Echo hands it back

On screen 6, the agent types the ink by hand for a hairline under each preset, and makes the row clickable with a div. The moment it saves the file, the hook runs check on it and hands this back:

app/export.tsx:6:66  `#050505` is your seam: use `var(--echo-seam)`.
app/export.tsx:6:11  `<div onClick>` can't be reached by keyboard: use HardwareButton, or Item for a row.

Echo's check: 2 problems in 1 file: 1 colour written by hand, 1 click without a keyboard. Each line says the Echo way to do it.
Fix them the way each line says before moving on. `npx echo-ui-cli docs <item>` has any component's props and example.

The agent fixes them before it moves on, and you never had to look. The hook runs in Claude Code. In Codex and Cursor, the Echo block tells the agent to run check itself after changing UI.

Some things show only in the running page, like contrast as it paints or a control named at runtime. <EchoCheck />, in the root layout, prints Echo check · lines to the browser console in development, and the skill tells the agent to read them. With no browser, check --url runs the same check headless.

When the agent says it's done, Echo's tests run on the pages it changed. They measure what a designer would catch: keys out of line, text cut off with "…", empty columns, a control that glows at rest, corners that don't follow each other, icons of mixed sizes. axe checks each page against WCAG 2.2 A and AA. In Claude Code that's the Stop gate: the agent can't finish until they pass, and you're told if it loosened echo.json to get there. init --ci runs the same tests on every pull request.

By screen 10, the tool is still one product: one ink, one kind of key, focus rings everywhere, and AA contrast.

More in For AI agents, Watch the running page, the CLI's check and test.

5 · Next product, next style

In a new app, run init and ask: "Which style fits my next one? It's a practice timer for musicians." Style Fit picks Echo's own style: a dark device molded in one plastic and lit by one key light, with readouts that glow. It's the same prompts, the same components, and the same press and sound.

There's no hunt for a DESIGN.md, because the style was already there. The paper tool and the timer look like two devices from the same maker, one drawn in ink on paper and one molded and lit: one family, not two siblings.

Keeping it

You changed Echo's Slider in the paper tool so it snaps to paper weights. Then Echo ships a fix to Slider. diff shows what changed since you installed it. update merges Echo's fix into your edited file, and where you both changed the same lines, it shows them and changes nothing.

More in the CLI's diff and update.

What a style changes, and what it keeps

A style changes the look: the colours, the type, the radius, the finish, the density, whether the device is dark or light, and whether its parts are molded or drawn. It never changes the feel: the press, the motion, the sound and the AA floor. Your look, Echo's feel. A board drawn in line gets drawn parts; one made of glass is translated, or refused out loud. Styles lists what a style can't do.

Every feature