Generative Vocabulary

Generative vocabulary is the living system of parts and rules that lets models compose interfaces at runtime without descending into chaos. It replaces the old artifact of a static screen with a precise grammar the model follows every time a user asks for something new. The vocabulary sits at five distinct layers that all must be designed before any generation ships. Primitives form the base. These are your locked components with typed props the model can actually satisfy. A MetricCard accepts exactly three variants and six token colors. A ResultsTable demands column schemas and row data shapes. A ComparisonChart binds to specific series formats. No exceptions. The model orders from this menu or it gets rejected by your validation layer. Intent slots sit on top and give the model structure. Named regions like PrimaryResult, SupportingEvidence, KeyActions, and FollowUp constrain what lands where. PrimaryResult accepts a chart or a hero metric but never a form. KeyActions accepts two buttons maximum and forbids paragraphs. The system prompt briefs the model on these slots the same way you once onboarded a new senior designer to the team. The frontend renders the slots in a stable grid so the surface always feels like one product even when the picked primitives change completely between queries. Fallback states are layer three and most teams screw this up. The model spits out empty, loading, partial, and refusal conditions constantly. Every primitive needs first-class versions of all four designed and wired ahead of time. Your empty chart shows smart prompt suggestions. Your refusal button explains exactly why it blocked the action and offers two recovery paths. Treat these as core design deliverables or accept that your users will stare at broken junk. Recoverability affordances are layer four. Generated interfaces are conversations so they need conversation controls. Buttons for regenerate this slot only, edit output in place, show me three variations, or save this as template. ChatGPT Canvas in 2025 got this right by making every artifact a persistent named object with its own history and shareable URL. Without these controls users hit one bad generation and abandon the entire feature. The fifth layer is citation and source UI. Every surface must declare its data sources, fetch timestamps, model version, and confidence score. Claude Artifacts embedded these directly in generated outputs. Skip this layer and your product looks like a confident liar. Include it and the same output reads as honest collaboration. That is what a generative vocabulary actually is. A generative vocabulary is not your existing component library with extra documentation. It is not Figma files exported as React components and tossed into a prompt. It is not brand guidelines written in vague marketing language. It is not the generated UI itself. Those outputs are results. The vocabulary is the cause. It is not a weekend project or a solo design task. It is platform infrastructure that demands engineering ownership, automated evals, versioned system prompts, and weekly human review exactly like any backend service your users depend on. A weak vocabulary produces hallucinated buttons, broken layouts, and off-brand visuals the moment the model updates. A strong one survives model swaps and scales across every generative surface in your product. Concrete examples from shipping products in 2025 and 2026 show the difference. Vercel AI SDK teams built their vocabulary as a strict typed list of twenty shadcn components that matched their tokens exactly. The model could only emit valid trees from that list. The result was landing pages and internal tools that looked hand designed even though the layout changed for every prompt. No invented components. No color violations. The constraint looked like a limitation until they measured zero brand regressions in production. Claude Artifacts used a vocabulary built for code gen with heavy emphasis on recoverability affordances and persistent objects. Their system prompt forbade certain patterns and required specific undo and edit hooks. Users could regenerate one panel inside a larger interface without destroying everything around it. The citation layer showed which parts came from the original prompt and which came from follow up edits. This turned draft surfaces into trustworthy workspaces. Teams using Bolt.new and Same.new learned the hard way what happens with loose vocabularies. Their code gen approach produced novel layouts fast but created inaccessible markup and brand violations until they tightened the prompt with explicit rules around contrast ratios, ARIA labels, and token usage. The winning teams by late 2026 ran hybrid architectures. One fintech company shipped eighteen primitives, five intent slots, twelve fallback variants, full recoverability controls, and source badges that linked back to live database queries. Their eval suite ran fifteen fixed test prompts against every model release from Anthropic and OpenAI. When a new Claude version drifted on color usage the evals caught it before any user saw the regression. That vocabulary now powers their analytics, their recommendation engine, and their internal admin panels. Use a generative vocabulary on surfaces where user questions have high variety but brand and usability cannot slip. Dynamic dashboards, personalized summaries, adaptive reports, context aware help pages, and internal tools all qualify. These are exactly the long tail surfaces that waste design time when built as static flows. The test is simple. If two users asking related questions should see meaningfully different layouts then the vocabulary earns its keep. Stripe built one for their analytics dashboard in 2026 and stopped maintaining forty seven static report templates. Do not use a generative vocabulary on high stakes flows where a single bad composition costs money or trust. Skip checkout, account creation, payment authorization, medical data displays, and any regulated workflow. The failure modes of hallucinated UI or missing recoverability are unacceptable there. Also skip it if your team has not shipped the eval suite and server side validation first. A vocabulary without blocking tests is not a tool. It is roulette. Start with one low risk surface like weekly performance summaries or help center answers. Ship the primitives, slots, fallbacks, evals, and feedback loop together as a platform release before you expand. Your vocabulary is now the senior designer on the team. Every interface is simply something it approved.