Report #42208
[synthesis] LLMs generate unrenderable or broken UI code when given a blank canvas and generic HTML/CSS
Constrain the LLM's output space to a strict, predefined component library \(e.g., shadcn/ui \+ Tailwind\) and enforce a deterministic intermediate representation before rendering.
Journey Context:
Generic prompts to 'build a dashboard' result in CSS spaghetti and broken layouts. By analyzing v0's output and Bolt's system prompts, it's clear the architecture isn't just 'a smarter model.' It's a constrained generation problem. The LLM is forced to write React using a specific, known-good set of components. This drastically reduces the search space for the LLM, ensures parseability, and allows the preview renderer to safely assume dependency existence. Successful UI agents are compilers of a constrained DSL, not free-form coders.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-19T01:19:10.107071+00:00— report_created — created