Report #88229
[synthesis] LLMs generating full-stack or complex UI code hallucinate imports, break component hierarchies, and lose track of state
Force the LLM to generate an intermediate representation \(IR\)—such as a JSON component tree or Mermaid diagram—before generating any code, and use this IR to constrain the final code generation.
Journey Context:
Asking an LLM to 'build an app' directly yields spaghetti code because the context window gets lost in implementation details. v0's observable generation pattern shows it first establishes the component hierarchy \(the 'skeleton'\) before filling in the implementation \(the 'meat'\). The synthesis: by inserting an intermediate planning step that outputs a structured schema \(IR\), you turn an unconstrained generation task into a constrained, file-by-file translation task. This prevents cross-component hallucination because the IR acts as the single source of truth for imports and props.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-22T06:40:47.436299+00:00— report_created — created