# DX Design Harness — design in code with confidence

> The DX Design Harness gives your coding agent a shared design language, the right skills, and a review before the work returns to you.

Design in code with confidence.

The DX Design Harness gives your coding agent a shared design language and the
right skills for each task. It reviews the work before it comes back to you.

## What the harness gives your agent

Three parts give your agent the same language and standards your team works to.
The worked example below shows the review that closes each run.

**Start with a plain-language request.** You say what you want in your own words.
`dx-design` reads the request and brings in only the skills it needs. Why it
matters: no tool names to learn, no pass order to manage — the routing is the
harness's job, not yours.

**Shared design guidance agents can use.** One machine-readable catalogue of design
rules, from contrast floors to anti-slop checks. Every skill reads it before it
works. Why it matters: your agent stops guessing at taste. It builds against the
same rules your team reads, so results stop drifting run to run.

**A design language your team owns.** `dx-design-language` reads your code, asks
what it cannot infer, and writes a `DESIGN.md` into your repo: your colours, type,
motion, and voice. Anyone on the team can edit it from there. Why it matters: the
language lives with your product, so designers and engineers improve it directly
instead of filing a request.

## From a request to a reviewed result

You describe the change in your own words. The harness picks the skills, you
approve the plan, and a separate review checks the result.

1. **Your prompt.** You type the ask in plain words. No skill names, no settings:
   “make the settings page feel calmer.”
2. **The harness at work.** `dx-design` picks the passes this ask needs: pattern and
   polish. Each one reads the catalogue and your `DESIGN.md`. You approve the
   plan before anything is built.
3. **A reviewed result.** Execute makes the approved change. A separate review
   grades it against both sources; the screen comes back only after it passes.

## From the builders

The harness is our product too, and we spent this build on how it feels to use.
Start with one request in your own words, even if you do not write code every
day.

[Quick start](/harness/install) has the install steps.

## Compare the output

The same brief, run twice. On the second run three passes read the catalogue: copy
turns the buzzwords into plain language, pattern pulls the nested cards apart and
drops the icon tiles, and polish drops the gradients and the second primary for
your own tokens. Every chip is a standard ID from the catalogue.

## The skills inside the harness

Five skills and a reviewer agent cover the path from an open request to a
reviewed interface. The DX Design Harness brings in the ones your request needs.

| Role | What it does | Command |
| --- | --- | --- |
| Orchestrator | Understands the request and brings in the skills it needs. | `/dx-harness:dx-design` |
| Copy | Makes interface language clear, useful, and consistent. | `/dx-harness:dx-design-copy` |
| Pattern | Sets the structure, hierarchy, and density of the page. | `/dx-harness:dx-design-pattern` |
| Polish | Refines spacing, type, colour, and the small details. | `/dx-harness:dx-design-polish` |
| Execute | Turns the approved direction into working product code. | `/dx-harness:dx-design-execute` |
| Review | Checks the result against the catalogue and `DESIGN.md`. | Runs automatically after execute |

See [all the skills](/harness/skills).

## A shared language for you and your agent

You bring the judgment. Your agent brings the execution. The harness gives you
both the same design language, and the checks to build safely on each other's
work.

[Quick start](/harness/install)