Code Gen UI

Code gen UI is the pattern where the model writes actual code to create the interface instead of picking from your existing primitives. It exists because some problems need layouts no sane component library would ever contain. The range is massive. So is the surface area for brand breakage accessibility failures and runtime errors.

This is the architecture behind Claude Artifacts v0 Bolt and Same.new. The model receives a prompt and emits JSX Tailwind or even full React apps. The output can be anything. That freedom is the feature and the failure mode at the same time.

Do not confuse code gen UI with LLM rendered components. One lets the model improvise new structures. The other forces it to compose from your approved set. The first feels like magic until it produces a button that does nothing. The second feels boring until you realize your brand still works at 2 a.m. on a new model release.

Teams fall in love with the demo then discover the production cost. Every generated surface must be reviewed for accessibility contrast brand voice and error handling. Most products cannot afford that tax at scale. The ones that can treat it as a deliberate escape hatch not the default.

Concrete example appeared in Claude Artifacts throughout 2024 and 2025. A user asked for a custom analytics view and the model produced a self contained React app with interactive charts and filters. The artifact persisted so users could return edit and share it. The experience was powerful. It also required clear disclaimers that the output was a draft until a human reviewed it.

v0 and Bolt took the pattern further by optimizing for handoff to engineers. The generated code matched the team's conventions and tokens closely enough that a senior engineer could merge it after light cleanup. Same.new pushed the boundary by generating entire applications from one prompt. Useful for prototyping. Dangerous for anything users depend on daily.

Deploy code gen UI when the surface is genuinely one shot the user understands they are looking at a draft and the consequences of imperfection are low. Custom internal analysis tools throwaway prototypes and creative exploration surfaces win here. Never use it for checkout flows account security or any customer facing flow where broken code equals lost revenue or trust.

The tradeoff is range versus control. You gain the ability to satisfy any layout request and lose the ability to guarantee brand safety or accessibility without heavy post processing. Most mature products wrap it inside a hybrid architecture so the escape hatch stays an escape hatch.

Teams that ship sustainable code gen UI invest heavily in the rails around it. They constrain the canvas show starter prompts and run automated checks for obvious failures before the user sees anything. Without those rails the magic turns into maintenance hell.

Code gen UI is not the future of all interfaces. It is the escape hatch for the 5 percent of use cases no component library will ever cover. Treat it that way and it stays an advantage instead of a liability.

The best code gen UI still feels like it came from the same product because the surrounding shell vocabulary and recoverability patterns carry the brand weight the generated code cannot.