UI DNA
Reverse‑engineer any interface. Rebuild it as code you own. Prove it.
UI DNA measures a live interface down to the token, hands your coding agent a document with provenance on every value, generates a React project, and checks the rebuild against the original.
X x-ray this page ←→ or scroll to move along the set
- Transitions replayed
- 73/73 Fixture A
- Pixel diff at 1280 px
- 0.66 % Fixture A
- Breakpoints located
- 600 · 960 · 1100 Fixture B
- Generated tests passed
- 111/111 Fixture B
- Writes to the server
- 0 Fixture B
General notes
- No model calls. UI DNA measures; your agent reasons.
- No API keys and no account.
- Runs on your machine, in a Chromium that Playwright installs.
- Twelve tools over MCP, the same twelve on the CLI.
02 Capture
Every page, every viewport, taken apart.
Chromium loads each page at each viewport and records five layers per state: the screenshot, every box, the computed styles, the accessibility tree and the DOM.
| Viewports | 1280 · 768 · 390 |
|---|---|
| Nodes per state | 71 |
| Assets | 1 image |
| Width conditions | 2 · 768 · 1024 |
| Requests that write | 0 |
- Layer 5 · DOM71 nodes · tags, classes, attributes
- Layer 4 · Accessibilityroles, names, levels, states
- Layer 3 · Stylescomputed, per node, per state
- Layer 2 · Boxesgeometry for every node
- Layer 1 · Screenshot1280 px · full page png
03 Explore
Performed, recorded, undone.
Every safe interaction: hover, focus, keys and safe clicks. Each action is snapshotted, performed, diffed and reverted. Every request that would write is blocked for the whole run.
| Interactions tried | 88 |
|---|---|
| Transitions recorded | 73 |
| Skipped, with reasons | 44 |
| POST requests sent | 0 |
Network while exploring · Fixture B
04 Measure
Values become tokens. Structure becomes components.
Measured values cluster into tokens with sample counts. Structural fingerprints become component candidates, matched across pages; repeated items become collections.
Parts list · 10 colors · 17 type styles · 12 spacing · 7 components
| Item | Designation | Value | Kind · source |
|---|
05 Breakpoints · collections
Breakpoints, located to the pixel.
UI DNA reads the stylesheet’s width conditions, then resizes one pixel either side to confirm each threshold. On Fixture B it found 600, 960 and 1100 px. None was a scanned width.
Collection rulebase · 6 items · identity by order idFixture B: 32 rules recorded
06 Annotate · generate
Your agent names it. UI DNA builds it.
Your agent reads the document and records what it sees: names, roles, intent. Each reading is stored as inferred and never overwrites a measurement. Then UI DNA generates a React, TypeScript, Tailwind and Vite project with a Playwright suite.
annotate_dna · one patch from the agent
{
"path": "/components/2",
"set": { "name": "FeatureCard" },
"provenance": {
"kind": "inferred",
"why": "3 cards share one fingerprint"
}
}
| Rev | Description | By | Kind |
|---|---|---|---|
| 1 | Header and menu named SiteHeader | agent | inferred |
| 2 | Three cards named FeatureCard | agent | inferred |
| 3 | Illustration kept as a labeled placeholder, asset not authorized | policy | unknown |
Generated · ./clone
src/ ├─ App.tsx ├─ components/ │ ├─ SiteHeader.tsx △1 │ ├─ FeatureCard.tsx △2 │ └─ Placeholder.tsx △3 └─ tokens.css from the DNA tests/ └─ behavior.spec.ts 73 transitions tailwind.config.ts uidna.json the document
ReactTypeScriptTailwindVitePlaywright
07 Verify · repair
Proof is a list of differences. Not a score.
Each finding names the original value and the generated one. Your agent repairs against the DiffReport and verifies again.
08 Tools
Twelve tools. One envelope.
Every answer arrives as an evidence envelope: result, evidence id, evidence, limitations and unknowns. uidna setup registers the server with Claude Code, Codex and Cursor, shows the changes first and backs up every file.
09 Notes
Notes, assembly and links
General notes
- Every non-GET request is blocked while exploring, beacons included.
- Crawls stay on one origin, honor robots.txt and are rate-limited.
- Secrets are redacted before anything is stored.
- Never gets around logins, CAPTCHAs or access controls. Never stores credentials.
Exclusions
- iframe content and shadow DOM are not entered.
- Inline SVG markup becomes a placeholder.
- Crawls follow same-origin links, up to 50 pages.
- Server responses to form submissions are never observed.
- Container queries, clamp() and vw values are not breakpoints.
- The generated project is a baseline your agent repairs.
Assembly · Node 20.19 or newer
- 1
Install the CLI
npm install -g @rohzzn/uidna - 2
Install Chromium
npx playwright install chromium - 3
Register with your agents
uidna setup - 4
Check the setup
uidna doctor