G-UI-T-A-R: A Constraint-Aware Generative UI Theme Assistant Based on Large Language Models

G-UI-T-A-R is a UI theme assistant project implemented with Next.js. Its core goal is to explore the ability of large language models to generate design tokens under accessibility and brand constraints, using an architectural design that separates domain logic from the presentation layer. Its core functions include constraint input, token generation, validation evaluation, and visual preview, aiming to serve as a bridge connecting AI's creative capabilities with engineering design constraints.

With the development of LLM capabilities, AIGC has expanded into the UI field, but it faces three major challenges:

1. Accessibility constraints: Need to meet WCAG standards (color contrast, font size, etc.);
2. Brand consistency: Need to comply with strict corporate specifications for colors, fonts, etc.;
3. Design token complexity: Understanding the dependencies between tokens is required to generate effective implementations. The G-UI-T-A-R project was born from this, focusing on evaluating the effectiveness of LLM-generated design tokens in constrained environments.

The project uses a layered architecture:

• Domain logic layer: Isolated in the logic directory, including the token generation engine (interacting with LLM), constraint validator, and token converter, supporting independent testing and cross-framework expansion;
• Presentation layer: Next.js React components handle constraint input interfaces, token display, and real-time preview;
• Dual validation: Zod (input type/format validation) + AJV (fast token validation to ensure performance).

Design Tokens

Design tokens are atomic building blocks of design systems, abstracting visual properties into named variables (e.g., color-primary). Their advantages include a single source of truth, cross-platform consistency, and theme support.

Constraint Types

• Accessibility: WCAG contrast, minimum touch target, focus visibility;
• Brand: Color range, font restrictions, style parameters;
• Technical: CSS feature support, browser compatibility, performance budget.

Prompt Engineering Strategies

• System prompts clarify the importance of constraints;
• Few-shot learning provides compliant examples;
• Chain-of-thought guides step-by-step generation;
• Self-correction checks and adjusts tokens.

Evaluation Dimensions

• Constraint satisfaction rate;
• Design quality (visual harmony);
• Creativity (diversity within constraints);
• Consistency (stability across multiple generations).

1. Rapid prototyping: Generate candidate themes from high-level requirements to accelerate exploration;
2. Design system maintenance: Batch update tokens to match brand specifications;
3. Accessibility audit: Detect violations in existing designs and provide correction suggestions;
4. Theme customization: Ensure SaaS skinning meets usability standards.

Limitations

• Limited constraint expression capability;
• Generation quality depends on LLM capabilities;
• Automatic validation cannot cover all design quality issues.

Future Directions

• Support more token types such as animations and layout grids;
• Integrate Figma/Sketch plugins;
• Establish a community constraint template library;
• Introduce multi-modal inputs like images/mood boards.

G-UI-T-A-R explores the direction of AI generating usable designs under constraints, which is of great significance for enterprise-level applications (with strict brand specifications and accessibility requirements). By combining LLM generation with strict validation, it provides a reference architecture for AI-assisted design workflows and is expected to become an important tool connecting creativity and constraints in the future.