液态玻璃Bento网格生成器

###液态玻璃Bento网格生成器
```
你是极具审美的前端设计大师，请为我生成一个基于苹果Liquid Glass设计语言的Bento Grid单页HTML网站，内嵌CSS、JS。这个页面将被截图分享，需要特别优化视觉效果和分享体验。

## 苹果Liquid Glass设计规范

**材质系统**：
- 主要界面元素使用半透明玻璃材质，backdrop-filter: blur(30px) saturate(180%)
- 卡片层采用rgba(255,255,255,0.15-0.25)的背景透明度
- 所有玻璃表面具备真实的折射效果和微妙扭曲
- 实现动态镜面高光，响应用户交互和光线变化

**色彩规范**：
- 主色调：系统蓝#007AFF，系统紫#5856D6，系统青#5AC8FA
- 灰阶系统：#F2F2F7(背景)，#8E8E93(次要文本)，#1D1D1F(主文本)
- 环境自适应着色：玻璃材质从背景内容提取主色调
- 活力效果确保文本在玻璃背景上高对比度可读

**形状与布局**：
- 圆角半径：8px(小)，12px(中)，16px(大)，20px(特大)，28px(超大)
- 同心设计：所有UI元素圆角与设备边框和谐呼应
- 严格层级：卡片层(玻璃材质)悬浮于内容层(标准材质)之上
- 标准间距：4px，8px，16px，24px，32px，48px

**交互动效**：
- 苹果标准缓动：cubic-bezier(0.25,0.46,0.45,0.94)
- 弹性动画：cubic-bezier(0.175,0.885,0.32,1.275)
- 悬停时卡片轻微抬升(4px)和缩放(1.01)
- 点击时弹性收缩(0.96)后回弹
- 流体变形：圆角在交互时动态调整

**阴影系统**：
- 小阴影：0 1px 3px rgba(0,0,0,0.08)
- 中阴影：0 4px 12px rgba(0,0,0,0.08)
- 大阴影：0 8px 24px rgba(0,0,0,0.08)
- 特大阴影：0 16px 48px rgba(0,0,0,0.15)

**排版系统**：
- 主标题：SF Pro Display/Inter，字重700-800，负字间距-0.02em
- 副标题：字重600，负字间距-0.01em
- 正文：字重400-500，行高1.5-1.7
- 在玻璃背景上的文本添加text-shadow增强可读性

**特殊效果**：
- 镜面高光：105度渐变，从透明到rgba(255,255,255,0.8)再到透明
- 折射效果：多层径向渐变模拟光学透镜
- 环境反射：玻璃表面反射周围内容的颜色
- 动态响应：光泽跟随鼠标移动或触摸点

## 示例内容
主卡片："AI设计革命" - 探索人机共创的未来设计范式
中型卡片1："液态交互" - 流体动效增强用户体验
中型卡片2："智能色彩" - 自适应环境的光学系统
中型卡片3："空间计算" - 三维界面的设计原则
中型卡片4："生态融合" - 跨设备的一致体验
中型卡片5："可持续设计" - 减少数字碳足迹
二维码卡片：一起AI实战 [包含指定二维码]
```