G-UI-T-A-R：基于大语言模型的约束感知生成式UI主题助手

G-UI-T-A-R是Next.js实现的UI主题助手项目，核心目标是探索大语言模型在可访问性和品牌约束下生成设计令牌的能力，采用领域逻辑与表示层分离的架构设计。其核心功能包括约束输入、令牌生成、验证评估和可视化预览，旨在成为连接AI创意能力与工程设计约束的桥梁。

随着LLM能力发展，AIGC扩展到UI领域，但面临三大挑战：

1. 可访问性约束：需满足WCAG标准（颜色对比度、字体大小等）；
2. 品牌一致性：需遵守企业严格的色彩、字体等规范；
3. 设计令牌复杂性：理解令牌间依赖关系才能生成有效实现。 G-UI-T-A-R项目由此诞生，聚焦受限环境下LLM生成设计令牌的有效性评估。

项目采用分层架构：

• 领域逻辑层：隔离于logic目录，含令牌生成引擎（与LLM交互）、约束验证器、令牌转换器，支持独立测试与跨框架扩展；
• 表示层：Next.js React组件负责约束输入界面、令牌展示、实时预览；
• 双重验证：Zod（输入类型/格式验证）+ AJV（令牌快速验证，保障性能）。

设计令牌

设计令牌是设计系统原子构建块，抽象视觉属性为命名变量（如color-primary），优势包括单一事实来源、跨平台一致性、主题化支持。

约束类型

• 可访问性：WCAG对比度、最小触摸目标、焦点可见性；
• 品牌：色彩范围、字体限制、风格参数；
• 技术：CSS特性支持、浏览器兼容、性能预算。

提示工程策略

• 系统提示明确约束重要性；
• 少样本学习提供合规示例；
• 链式思考引导逐步生成；
• 自我修正检查并调整令牌。

评估维度

• 约束满足率；
• 设计质量（视觉和谐度）；
• 创造性（约束内多样性）；
• 一致性（多次生成稳定性）。

1. 快速原型：通过高层次需求生成候选主题，加速探索；
2. 设计系统维护：批量更新令牌以匹配品牌规范；
3. 可访问性审计：检测现有设计违规并提供修正建议；
4. 主题定制：确保SaaS换肤满足可用性标准。

局限

• 约束表达能力有限；
• 生成质量依赖LLM能力；
• 自动验证无法覆盖所有设计质量问题。

未来方向

• 支持动画、布局网格等更多令牌类型；
• 集成Figma/Sketch插件；
• 建立社区约束模板库；
• 引入图片/情绪板等多模态输入。

G-UI-T-A-R探索了AI在约束下生成可用设计的方向，对企业级应用意义重大（品牌规范与可访问性要求严格）。通过LLM生成与严格验证结合，为AI辅助设计工作流提供参考架构，未来有望成为连接创意与约束的重要工具。