Prompt to Component Tree

Turning AI UI generation into a learnable function

The Blind Spot

AI builds a UI in one shot — but you can't see its component tree until the code already exists

Generation is powerful and increasingly common. What you can't do is predict the structure a prompt will produce before you run it.

Lookbook exists to make that structure predictable — starting by collecting it.

1

Write a promptDescribe the UI you want.

2

Generate the codeA model emits components.

?

Only now see the treeStructure is known after, not before.

The Corpus Is Real

Lookbook is a substantial, single-author corpus — not a concept

One repository, 1388 tracked files, initialized in a single commit of 220 files and 68,470 insertions — every commit by Ken Chau.

A real artifact this size is worth reading closely. So how does it become a dataset?

1388

tracked files

72

base landing-page sites

51

app folders

75

commits, all by Ken Chau

Mechanism · Pairing

Every generated UI is physically paired with its raw prompt

Each site folder carries 72 prompt.json and 72 prompt.txt files — the raw API response and text from SuperDesign, stored beside the output.

That prompt→output pairing is what turns a gallery into a dataset.

72

prompt.json (raw API response)

72

prompt.txt (source prompt)

Mechanism · Control

The same prompts, re-run across models under one strict rulebook

Sites 01–03 were regenerated across three frontier models in a full 3×3, and a 233-line CODEGEN-RULES.md keeps outputs comparable instead of random slop.

Controlled inputs make the collected data measurable. Now to the first deep data point.

3 prompts × Gemini 3.1 Pro

3 prompts × GPT-5.4

3 prompts × Claude Opus 4.6

CODEGEN-RULES.md — 233 lines: "This is the law. No exceptions."

The First Data Point

Sage is a Claude.ai clone, built and iterated three times in a single day

On 2026-03-29, Sage went from v1 to v3 in under two hours of commits — a warm-cream Claude.ai clone with an Artifacts panel.

Watch what happens to its component tree across those three versions.

1

v1 · 20:22Claude.ai clone + Artifacts panel (98cd7ea)

2

v2 · 21:16Agentic UI, projects, thinking blocks (1a16e15)

3

v3 · 22:16Pixel-accurate rebuild from screenshots (5ce6877)

The Tree Was Still Moving

From v1 to v2 the Sage tree grew as agentic UI was added

Components went 6 → 8 with +1024 / −387 lines in the components dir, aiResponder grew 373 → 521, and the schema was renamed SageApp_v2.

Structure was still visibly changing — so would it ever settle?

Signal	v1	v2
Components	6	8
aiResponder.js lines	373	521
Components diff	+1024 / −387
Data schema	SageApp_v2

The Convergence Signal

Then it converged: v3 re-skinned the pixels and left the topology frozen

v3 — a "pixel-accurate rebuild from screenshots" — added just one 5-line ComposeModal, while 7 core files stayed byte-identical to v2.

The structure stopped moving while only the pixels kept changing.

App.jsx 0 lines changed

aiResponder.js 521 = 521

ToolCallCard.jsx identical

db/index.js identical

Conversation.jsx identical

ChatArea.jsx · main.jsx identical

The Pattern

Enough convergence points, and prompt → component tree becomes a function you can derive

Given the same intent, Sage's component topology settled by v2. Collect enough settled points like it, and the tree stops being a surprise you discover after generating.

Sources

Research Methodology

Data as of: 2026-03-29 (HEAD = 5ce6877)

Feature status: Active — single-author dataset repo kenotron-ms/lookbook

Primary source: clone at /tmp/lookbook-inspect, remote git@github.com:kenotron-ms/lookbook.git (confirmed via git remote -v)

Commands run (every metric independently re-derived):

Authorship: git log --format='%an <%ae>' | sort | uniq -c → 75 commits, all Ken Chau
Scale: git ls-files | wc -l (1388), ls sites | wc -l (81), ls apps | wc -l (51)
Init commit: git show --stat d2ae77f → 220 files, 68470 insertions
Prompt pairs: find sites -name prompt.json | wc -l and find sites -name prompt.txt | wc -l → 72 & 72
Model 3×3: ls sites | grep -E '(gemini|openai|opus)$' | wc -l → 9 (commit 64a9a3f)
Rulebook: wc -l < CODEGEN-RULES.md → 233; tail -1 → "This is the law. No exceptions."
Sage versions: git log --format='%h %ai %s' -- apps/sage
Tree growth v1→v2: git ls-tree -r --name-only; git diff --stat 98cd7ea 1a16e15 -- apps/sage/src/components → 7 files, +1024/−387
Convergence v2→v3: per-file git diff 1a16e15 5ce6877 → 7 core files 0-line diff; ComposeModal.jsx = 5 lines

Gaps / interpretation: "dataset", "learnable function", and "convergence" do not appear in the repo text (grep -ciE → 0) — they are the storyteller's framing; the underlying facts are verified. v3 "pixel-accurate" is confirmed by code diffs, not by visual comparison. "#123" in the v1 commit is a cosmetic tag, not a real PR.

Primary contributor: Ken Chau <kchau@outlook.com> — 75 of 75 commits (100%). Prompt library credited to Jason Zhou / AI Builder Club (not a git author).