You can't know what components will be generated before running generation. The output — the tree, the depth, the node count — is a surprise every time, even from the same prompt.
You see the rendered UI. You don't see the component hierarchy that produced it. There's no intermediate representation between "prompt" and "compiled pixels" to reason about.
Without knowing which components will appear, you can't predict cross-app reusability or check design system coverage before generating. You discover the architecture after the fact.
AI-assisted UI generation isn't random. Similar prompts tend to produce similar component topologies. This convergence pattern has never been systematically collected or studied.
Predict the component hierarchy before any code is generated. Use for prompt engineering, complexity estimation, and design system planning.
Given an existing component hierarchy, reconstruct the prompt space it belongs to. Enables reverse-engineering of existing apps and identifying shared architectures.
Neither function can be derived without a corpus of (prompt, component_tree) pairs. Lookbook is the collection infrastructure for that corpus.
A typical lookbook is a visual showcase. This one captures the structure behind the visuals — the component tree with nesting depth, node count, and iteration history.
The goal isn't to demonstrate quality. It's to record what topology a given prompt produces, so we can study the mapping over many examples.
Capturing v1, v2, and v3 of each app isn't just documentation — it shows how the component tree evolves as prompts become more specific. That evolution path is itself a data signal.
Know the component tree before generating code. Predict complexity, node count, and nesting depth from the prompt alone. Use to flag over-engineering before it happens.
Modify your prompt → see the predicted tree change → iterate on the prompt until the topology matches intent. Iterate on the map, not the territory.
Given a set of prompts you plan to run, predict which component nodes will be needed. Check design system coverage before generation, not after.
Given an existing component hierarchy (from any codebase), reconstruct the prompt space it belongs to. Useful for understanding legacy apps built with AI generation.
Identify when two different prompts would produce the same component topology — and therefore which components could be shared across apps without duplication.
All applications above require a trained or derived function. That function requires a corpus. We have 1 data point. The collection phase must precede the analysis phase.
Build an app with Amplifier's UI Studio pipeline. Capture the component hierarchy. Add the (prompt, tree) pair to lookbook. The workflow takes one afternoon.
No minimum LOC. No minimum quality. Any generated app with a documented prompt and captured tree structure counts as a valid data point.
The dataset entry format above is a draft. It needs: formal JSON Schema, a standard component tree serialization format, and a convention for iteration snapshots.
Open question: what's the right representation for a component tree that enables topology comparison across apps built with different frameworks?
With 10 or more data points, begin asking: which nodes appear most frequently? What tree structures cluster together? Do prompt patterns predict topologies?
Target milestone: 10 apps before any function derivation attempt. Patterns need minimum density before they're visible.
wc -l apps/sage/src/components/*.jsx. All 9 files confirmed: Layout.jsx (33), Sidebar.jsx (358), ChatArea.jsx (113), MessageBubble.jsx (203), ThinkingBlock.jsx (63), ToolCallCard.jsx (237), ArtifactsPanel.jsx (312), InputBar.jsx (341), ComposeModal.jsx (5). Sum: 1,665 LOC.
git log --oneline apps/sage/. Four commits on 2026-03-29 (98cd7ea, e1eca21, 1a16e15, 5ce6877). Timestamps from git log --format="%h %ai %s". Build duration (1h 54min 22s) is the exact diff between commits 98cd7ea (20:22:35) and 5ce6877 (22:16:57).
"convergence_at": "v2" field in the dataset schema is inferred, not derived.
Take any prompt and run it through Amplifier's iterative generation pipeline. Three iterations — v1 to v3 — is the target format for each data point.
Document the hierarchy: root node, nesting, leaf components. wc -l src/components/*.jsx gives you LOC per node. Record the tree at each iteration.
Create a new app directory under apps/. Add a dataset.json entry with your (prompt, component_tree) pair using the schema from Sage.
Use Amplifier's storyteller to create a deck for your app. Each story documents the pipeline run, adds a data point to the corpus, and makes the convergence pattern visible.