Design System-Compliant User Interface Generation with LLM Agents: A Comparative Study of Context Engineering Strategies
Problem Statement
LLM agents are increasingly used to generate UI code, but they frequently ignore or misapply organization-specific design systems, undermining consistency, accessibility, and maintainability in production settings. It has been unclear which method of feeding design-system knowledge into an LLM's context most reliably produces compliant outputs without prohibitive cost. This gap blocks confident enterprise adoption of LLM agents for design-system-governed UI work.
Key Novelty
- First systematic head-to-head comparison of three distinct context engineering strategies (instruction-based, context-based, registry-based) specifically for design-system-compliant UI generation
- Identifies and validates a registry-based strategy—component assembly rather than text-instruction following—as a superior mechanism for reliable compliance
- Combines objective engineering metrics (compliance rate, time, token usage) with a human-centered practitioner pilot study (perceived difficulty, workload, self-efficacy)
- Grounds evaluation in six real-world UI generation tasks rather than synthetic or toy benchmarks, increasing practical relevance
Evaluation Highlights
- Registry-based strategy achieved 95.08% design-system compliance rate across six real-world UI generation tasks, outperforming instruction-based and context-based strategies
- Registry-based strategy's compliance gains came with only 'moderate overhead' in token usage and task completion time
- Pilot study with 9 practitioners showed reduced perceived difficulty and time burden, and increased self-efficacy when using the registry-based workflow
Signal Assessment
Methodology
- Define three context engineering strategies: instruction-based (full style guide embedded in prompt), context-based (task-relevant style guide excerpts injected into context window), and registry-based (agent assembles pre-built components from a registry)
- Implement each strategy with an LLM agent and task it with generating six real-world UI screens against an organizational design system
- Quantitatively measure compliance rate, task completion time, and token usage for each strategy
- Conduct a pilot study with nine UI/UX practitioners to assess perceived difficulty, time burden, and self-efficacy across the strategies
- Compare strategies to determine which best balances compliance reliability against computational and workflow overhead
System Components
Embeds the complete organizational style guide directly into the LLM agent's prompt for every UI generation task
Dynamically injects only task-relevant portions of the style guide into the context window, akin to retrieval-augmented prompting
Agent queries a registry of pre-built, pre-validated UI components and assembles the interface from them instead of generating styled code from text instructions
Measures adherence of generated UIs to the design system, alongside task completion time and token usage, across six real-world tasks
Human-centered evaluation with nine practitioners capturing perceived difficulty, time burden, and self-efficacy for each strategy
Results
| Strategy | Compliance Rate | Overhead (Time/Tokens) | Practitioner-Perceived Burden |
|---|---|---|---|
| Instruction-based (full style guide in prompt) | Lower compliance (qualitative) | Higher/variable (qualitative) | Higher perceived difficulty (qualitative) |
| Context-based (task-relevant injection) | Moderate compliance (qualitative) | Moderate (qualitative) | Moderate perceived difficulty (qualitative) |
| Registry-based (pre-built component assembly) | 95.08% | Moderate overhead | Reduced difficulty/time burden, higher self-efficacy |
Key Takeaways
- For dependable design-system compliance, retrieving and assembling pre-built validated components is more effective than embedding style guides as text instructions in prompts.
- The reliability gains from registry-based context engineering come at only moderate additional token/time cost, making it a viable default for production LLM UI-generation pipelines.
- Practitioner-perceived workload and self-efficacy are important complements to technical compliance metrics when evaluating LLM agent tooling for design workflows.
- Context engineering strategy—not just base model capability—is a critical, underexplored lever for making LLM agents dependable in specialized, rule-governed generation tasks.
Abstract
Large language model (LLM) agents are increasingly used for user interface (UI) generation, yet they often fail to apply organization-specific design systems. It remains unclear which context engineering strategy enables dependable compliance. This study compares three context engineering strategies for integrating design systems into LLM agents: instruction-based (embedding complete style guides in prompts), context-based (injecting task-relevant style guides into the context window), and registry-based (assembling pre-built components in the registry). We evaluate each strategy on compliance rate, task completion time, and token usage by generating six real-world UIs. Results show that the registry-based strategy achieved the highest compliance rate (95.08%), outperforming others with only moderate overhead. Our pilot study with nine practitioners further indicates reduced perceived difficulty and time burden while enhancing self-efficacy in their workflows. These findings demonstrate that using pre-built components in the registry enables more reliable and scalable design system-compliant UI generation with LLM agents.