USER INTERFACE REPRESENTATION · ALPHA
Ship the UI you designed
UIR turns your design into a machine-readable specification — so you can build and verify your frontend against it.
python3 tool/extract_react.py --root <repo> --app <app/src> --change-set .uir/reading.jsonThe public install artifact is not published yet; current tooling runs from an authorized source checkout.
THE PROBLEM
A green build can still ship the wrong UI.
Functional tests prove that the frontend works. Visual regression shows that it changed. Neither proves that it matches the design.
Handoff turns decisions into interpretation
Developers have to infer which details are intentional and which are flexible.
Design review stays manual
Designers repeatedly inspect screens, states and breakpoints to find what drifted.
The wrong UI becomes the new baseline
Once a difference ships, future tests protect it — even if it never matched the design.
HOW IT WORKS
From approved design to verified frontend.
UIR carries the design decisions into implementation, then checks that the frontend keeps them.
01 · Capture the design
Turn structure, content, states, behaviour and design-system decisions into a machine-readable specification.
02 · Build against it
Give developers and agents explicit requirements instead of asking them to interpret a mockup.
03 · Verify every change
Check the rendered frontend against the specification and catch mismatches before they ship.
PLAYGROUND
From instructions to a verified page.
This site is a clean-start test: an agent received the instructions, authored the UIR package, and produced the public page. The repository exposes the authoring source, the package, the target and the gate that holds one against the other.
01 · The instructions
Product intent, design direction, and constraints begin as instructions to the agent.
02 · The agent build
The agent encodes confirmed decisions in UIR. For a static page, the representation is enough to produce the visualization.
03 · The verification
Tests pin the agent-authored target to the package and fail when implementation and specification drift.
github.com/tenbytesltd/uir-public-siteWHAT UIR CAPTURES
Everything that makes the design the design.
UIR makes structure, content, states, behaviour, components, and design-system decisions explicit enough to test an implementation against them.
Structure & content
What exists, what it says, and how the parts are ordered and related.
structure · content · roles · relationships
Behaviour & states
What can happen, when it happens, and which states the interface must support.
states · actions · conditions · navigation
Components & design system
Which reusable pieces and design-system values realize the design.
components · design values · bindings · reuse
HOW IT FITS
Start from design. Or start from code.
Author UIR from an approved design, or extract what can be proven from an existing frontend. Either way, you get the same kind of specification to inspect and verify against.
- 01 — New UI — Capture approved design decisions as UIR.
- 02 — Existing UI — Extract what the frontend can prove and keep the gaps explicit.
- 03 — Any implementation — Use people, agents, frameworks, or any combination to produce the frontend.
- 04 — Every change — Verify the result against the same specification.
WHY IT WORKS
Explicit decisions turn UI review into a test.
When the specification says what must be true, conformance stops being a visual opinion and becomes something tools can check.
One source
Every required decision has one place to live.
No guessing
Unknown stays explicit instead of becoming a convenient default.
Design-system aware
Components and design values are part of the specification.
Implementation-independent
Different frontends can be checked against the same definition.
ALPHA STATUS
Useful now. Still alpha.
UIR v0.1 can already author, inspect, and validate the specification. Full automatic frontend-to-specification conformance is still in progress.
- Works today — authoring, reproducible packages, package validation, inspection, early extraction, and CI evidence.
- In progress — full frontend-to-specification conformance and broader vocabulary coverage.
- Not claimed — a stable public install, production-ready compilers, or a mature adopter ecosystem.