AI生成式UI/UX架构可视化实验室
从提示词到界面、从原子组件到设计系统自动化——以可交互SVG拆解生成式UI/UX的端到端架构：意图解析、组件合成、自适应渲染与体验闭环。
01
全景 · 生成式UI架构
四层架构：输入层（Prompt/草图/数据）→ 认知层（意图理解+检索）→ 生成层（组件合成+布局推理）→ 交付层（渲染+代码）。点击切换聚焦的架构层。
输入层
Prompt / 草图 / 数据源
多模态意图的统一接入
认知层
意图解析 + 设计系统检索
把意图映射到设计约束
生成层
组件合成 + 布局推理
原子组合为可渲染结构
交付层
实时渲染 + 代码导出
所见即所得的工程化产出
02
Prompt到UI · 生成管线
一条自然语言提示词如何穿过「解析→意图→检索→合成→渲染」五段管线变成可交互界面。点击逐步推进管线，查看每个阶段的中间产物。
解析
分词 + 实体抽取
结构化提示词语义
意图
页面类型/布局/内容推断
槽位填充与意图分类
检索
设计系统组件召回
约束引导的组件选择
合成
AST → 组件树
布局推理+属性绑定
03
组件合成 · 原子设计
生成式UI遵循原子设计：原子→分子→有机体→模板→页面。点击逐层合成，观察AI如何从最小构件递归组合出复杂界面。
原子 Atoms
按钮/输入/图标/标签
不可再分的最小构件
分子 Molecules
搜索栏/表单项/卡片头
原子的功能组合
有机体 Organisms
导航/产品列表/评论区
独立的界面区块
页面 Pages
模板+真实数据填充
最终可交付界面
04
设计系统 · 自动化
设计令牌（Token）是生成式UI的约束源：颜色/间距/字号/动效/圆角被自动抽取、统一管理并注入到每个生成的组件。点击切换令牌类别。
DESIGN.md
机器可读设计规范
AI理解并执行约束
Token流水线
源→变量→组件
单一真相源
自动Lint
偏离检测+建议
守护设计一致性
多平台同步
Web/iOS/Android/邮件
一次定义处处生效
05
自适应界面 · 上下文引擎
同一个界面模型如何根据设备/用户偏好/内容密度/无障碍需求自适应变形。自适应决策引擎实时权衡多个上下文信号。点击切换上下文。
设备适应
移动/平板/桌面/折叠屏
断点驱动的布局重组
用户偏好
暗色/对比度/动效/字号
尊重系统与个性化设置
内容密度
紧凑/舒适/宽松
信息量自适应排版
无障碍
大字号/高对比/键盘优先
WCAG合规自适应
06
生成式模式 · 模式库
生成式设计模式覆盖布局/交互/数据可视化/内容四大类，AI按场景从模式库召回并实例化。点击浏览不同模式类别。
布局模式
栅格/卡片/分屏/瀑布流
结构化容器模式
交互模式
表单/导航/反馈/空状态
用户行为闭环
数据可视化
图表/仪表盘/时序/对比
数据驱动呈现
内容模式
列表/详情/摘要/故事流
内容组织模式
07
用户体验优化 · 闭环
生成式UX的关键是闭环：测量→分析→生成假设→A/B实验→部署。AI持续把数据反馈转化为界面变体。点击运行一轮优化迭代。
测量
行为埋点+性能+情感
多维度体验信号采集
分析
漏斗/热力/会话回放
定位体验瓶颈
生成假设
AI产出改进方案
数据驱动的变体设计
实验部署
A/B测试+灰度发布
统计显著的迭代闭环
08
工具生态 · 架构图谱
生成式UI/UX工具按架构层组织：生成引擎、设计系统、原型、代码、评估。点击高亮不同生态层。
生成引擎
v0 / bolt / Lovable
Prompt/草图→代码
设计系统
Figma Tokens / Style Dictionary
Token 单一真相源
代码框架
React/Vue/Svelte + Tailwind
组件化渲染底座
评估
Lighthouse / axe / Maze
性能/无障碍/可用性