UI DNA
projectsReverse-engineer an interface into code you own
- Type
- App · 2026
- Built with
- TypeScript · Node.js · Playwright · MCP · Zod · React · Tailwind CSS · Vite
- Links
- npmSource
- Install
npm install -g @rohzzn/uidna
See an interface you like, understand how it is built down to the token, the component and the state transition, then rebuild it as code you own and prove the rebuild matches. UI DNA is an MCP server and a CLI that gives a coding agent the instruments for that loop. It is to interfaces what REA is to binaries.
The rule it is built around: the agent is the brain and UI DNA is the instrument. It makes no model calls and needs no API keys. It drives a real Chromium, or attaches to your own Chrome over the DevTools Protocol, and records the DOM, computed styles, boxes, the accessibility tree, fonts and assets at every viewport. Then it explores the page the safe way: hover, focus, Escape, menus, tabs and accordions, every action snapshotted, diffed and reverted, nothing submitted and no link followed off the site. What comes out is a UI DNA document in which every value carries where it came from: measured, observed, inferred, or unknown with a reason. Only the agent can write inferred, and its reading is stored beside the measurement, never over it.
From that document it generates a React, TypeScript, Tailwind and Vite project with the tokens as CSS variables, the repeated structures as components, the observed transitions as state and a Playwright suite that replays them. Then it checks the rebuild against the original with a pixel diff, SSIM, geometry, computed styles and a replay of every recorded transition, and reports one finding per concrete difference instead of a single blended score. On the reference page the rebuild replays 73 of 73 transitions and differs from the original in under one percent of its pixels at all three widths.
Version 0.2.0 crawls whole sites, explores forms with synthetic values while every submission is blocked, and turns captured JSON into typed mocks. Twelve tools, identical over MCP and the CLI, one evidence envelope for every result, and the document schema published on its own as @rohzzn/uidna-schema so other tools can read it. MIT licensed.
Commands
uidna setupRegister the MCP server in Claude Code, Codex and Cursoruidna reconstruct <url> <outDir>The whole loop: capture, explore, generate, verify, reportuidna scan <url> --crawlCapture every page of a site at every viewportuidna explore <scan>Safe interactions, or --policy forms with synthetic valuesuidna tokens <scan>Token clusters with their member values and sample countsuidna generate <scan> <outDir>The React project, installed and builtuidna verify <scan> <outDir>The DiffReport for this attempt, with regressionsuidna doctorCheck the browser, the CDP port and the registration