Builds.Syed Tasavour
Builds
Open sourceprototype2026

UIForge AI

UIForge AI treats visual pixels as geometric constraints that map to a clean, recursive, componentized React tree. Rather than guessing what a button looks like, it aims to measure the design and output exact code, solving the designer-to-developer handover.

Started
2026
Stack
TypeScript, React, Vision models, AST
Kind
Open source
Source
Public

Why I built it

The design-to-code handover is where productivity dies: designers work in high-fidelity tools like Figma while developers retype by eye, and most AI UI generators output monolithic, unmaintainable code no engineer would commit.

What it does

  • Parses a screenshot geometrically, mapping each element to a coordinate-based bounding box
  • Infers the layout engine (Flex, Grid, or Block) from spatial relationships rather than guessing
  • Generates a strictly typed UI Abstract Syntax Tree, the way a compiler does, and extracts colors, spacing, and typography into a design system
  • Runs a multi-stage deterministic pipeline that emits a componentized React tree

How it is built

A multi-stage pipeline combining vision-based geometric parsing, structural deconstruction, a typed UI AST, and design-token extraction to produce React components.

How it evolved

  1. 2026
    Scoped

    The design-to-code handover is where productivity dies: designers work in high-fidelity tools like Figma while developers retype by eye, and most AI UI generators output monolithic, unmaintainable code no engineer would commit.

  2. 2026
    Built

    A multi-stage pipeline combining vision-based geometric parsing, structural deconstruction, a typed UI AST, and design-token extraction to produce React components.

  3. 2026
    Shipped

    Built as a working prototype.

Built by Syed Tasavour. More at syedtasavour.com.