← Selected work

AI-assisted engineering · Personal project

Designome

Turning UI screenshots into evidence-backed Design DNA for coding agents.

Designome is a framework-neutral Codex plugin and deterministic runtime for extracting, accepting, installing, and auditing a durable design contract from screenshot evidence.

Role
Creator · Product and systems engineering
Status
First executable vertical slice
Runtime
Node.js · dependency-light file operations
Repository
Open source on GitHub

System overview

Designome — System overview

  1. 01ScreenshotsEvidence
  2. 02IntakeSources
  3. 03Analyze8 axes
  4. 04SynthesizeDesign DNA
  5. 05InstallTarget project
  6. 06GenerateNew UI
  7. 07AuditRendered result
Observed

Directly visible in supplied evidence.

Inferred

Derived from visible patterns and relationships.

Proposed

A design decision offered for explicit acceptance.

Unknown

Not provable from static screenshots.

Screenshot reproduction is not design understanding.

Coding agents can imitate a reference screen and still drift on the next page, the next state, or a different content length. A screenshot shows an outcome; it does not automatically expose the grammar that made the outcome coherent.

The deeper problem is preserving relationships, hierarchy, component contracts, states, constraints, and validation guidance across future work—not making one pixel copy.

Treat visual interpretation as evidence, not certainty.

Designome categorizes every claim as observed, inferred, proposed, or unknown. That makes the boundary between source evidence and design judgment explicit.

Static screenshots cannot prove motion timing, keyboard behavior, accessibility semantics, real responsive behavior, or unseen runtime states. The system records those limits instead of hallucinating certainty.

Model reasoning where interpretation is required; deterministic operations where files must stay safe.

The host coding agent performs multimodal analysis through eight complementary axes. Synthesis resolves those fragments into one canonical Design DNA, while the Node runtime owns schema validation, screenshot metadata, installation, checksums, managed CSS, overrides, and audit planning.

  • Codex plugin with extract, install, and audit workflows
  • Versioned Design DNA schema validated with Ajv
  • Idempotent installation with managed files and user-owned overrides
  • Repository checks, Conventional Commits, CI, and Release Please

Improve forward generation, then audit the rendered result.

The product is judged by whether accepted design knowledge improves a new interface that was not present in the source screenshots. The audit workflow then compares the generated result with the evidence-backed contract.

+ Engineering principles

What the system is designed to preserve.

01

Traceable claims

Observed and inferred claims retain localized evidence.

02

Explicit uncertainty

Unknown behavior remains unknown until new evidence exists.

03

Deterministic integration

Installation and validation do not depend on free-form model edits.

04

Forward usefulness

Success means better future UI, not one convincing screenshot copy.

Next case studyDocument AI