---
type: concept
title: Agentic UI Generation
created: 2026-05-04
updated: 2026-05-04
tags: [ai-agent, ui-generation, design-system, llm, code-generation]
---

## 定义

Agentic UI Generation（Agentic UI 生成）指的是 AI Agent 自主理解设计规范并生成匹配 UI 的能力。与传统 AI 生成图片不同，Agentic UI 生成强调**遵循设计系统约束**、**输出可运行代码**、**保持跨页面风格一致**。

## 核心要点

- **核心挑战**：AI 生成的 UI 风格不一致，每次生成可能天差地别
- **解决方案**：给 AI Agent 提供明确的 `DESIGN.md` 规范，让它在约束内生成
- **关键特征**：
  - 多轮迭代：Agent 可以根据反馈调整样式
  - 可组合：设计师提供 design tokens，Agent 组合使用
  - 上下文感知：理解组件状态（hover/disabled/loading）而非只生成静态界面

## 现有方案对比

| 方案 | 代表项目 | 特点 |
|------|---------|------|
| DESIGN.md + AI | VoltAgent/awesome-design-md、Google Stitch | 纯文本约束，最灵活 |
| Figma API | Figma to Code plugins | 依赖 Figma，结构化但复杂 |
| Visual AI | GPT-4o image generation | 生成图片，非可运行代码 |
| Design Tokens | Style Dictionary | 需要专门工具转换 |

## 工作流

```
设计师制定 DESIGN.md → Agent 读取 → 生成 UI 代码 → 设计师 Review → 反馈调整 → 迭代优化
```

## 与 Superpowers 的关系

Superpowers 方法论强调设计前置（brainstorming → writing-plans），与 Agentic UI Generation 形成互补：
- Superpowers 确保**功能正确**
- DESIGN.md 确保**风格一致**

## 相关概念

- [[wiki/concepts/design-md|DESIGN.md]]
- [[wiki/concepts/agent-skills|Agent Skills]]
- [[wiki/concepts/superpowers|Superpowers]]（方法论补充）

## 相关实体

- [[wiki/entities/google-stitch|Google Stitch]]
- [[wiki/entities/voltagent|VoltAgent]]

## 参考来源

- [[wiki/library/VoltAgentawesome-design-md|VoltAgent/awesome-design-md]]