Bento信息卡片图 Prompt

你是极具审美的前端设计大师，请为我生成一个基于苹果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)再到透明
- 折射效果：多层径向渐变模拟光学透镜
- 环境反射：玻璃表面反射周围内容的颜色
- 动态响应：光泽跟随鼠标移动或触摸点

## 布局要求
- 使用不规则的网格布局，确保整个视口区域被充分利用，无明显大块空白
- 设计一个主要的大卡片展示核心概念/引言（占据约25-30%的视觉区域）
- 其余卡片应包含不同的子主题，每个卡片有独特的标题和简短描述，标题简短，避免换行
- 卡片大小应根据内容重要性进行变化，形成视觉层次感
- 卡片间距保持16-24px，符合苹果设计规范
- 为卡片添加相关Fontawesome图标，作为背景装饰元素，与玻璃材质融合
- 在右下角卡片放置品牌标识和二维码
- 确保整体设计在1000px宽的视口中完整显示，无需滚动
- 确保网格布局没有明显的"空洞"，所有区域都应有内容填充

## 内容分布建议
- 主卡片：核心概念介绍（20-25%区域），使用大阴影和特殊玻璃效果
- 4-6个中型卡片：重要子主题，使用中阴影
- 1个二维码卡片：位于右下角，使用小阴影

## 内容展示
- 标题使用SF Pro Display字体，大号字体，言简意赅，避免换行
- 正文使用SF Pro Text字体，确保在玻璃背景上清晰可读
- **在主大卡片展示核心理念，使用苹果标志性的玻璃材质和动态效果**
- 每个卡片应聚焦于单一概念，文字简洁有力，主标题加粗
- 使用简短的要点而非长段落，便于快速阅读
- 确保每个卡片内容量适中，避免过于空洞或过度拥挤
- 除专业名词外，其他输出内容要求中文

## 视觉平衡
- 确保苹果系统色彩分布均匀，主要使用系统蓝、紫、青三色
- 图标和视觉元素应均匀分布在整个布局中
- 文本密度应相对均衡，利用玻璃材质的透明度调节视觉重量
- 使用玻璃材质的透明度和模糊度引导用户视线流动
- 卡片形状统一使用苹果标准圆角，保持视觉一致性

## 技术要求
- 单个HTML文件，内嵌CSS和JS
- 使用CSS Grid实现不规则网格布局
- 实现backdrop-filter和玻璃材质效果
- 添加苹果标准的交互动画和缓动效果
- 确保代码简洁，注释清晰
- 优化页面以确保在单视口中完整显示，适合截图
- 使用grid-template-areas属性精确定义布局，确保无空隙

## 内嵌资源
- Tailwind CSS (https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css)
- Font Awesome (https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
- SF Pro字体系列或Inter字体作为替代
- 中文排版使用 Noto Sans SC

## 二维码资源
- 使用以下URL作为二维码图片地址: https://img.t5t6.com/1746665263357-2768e6e0-83e1-475c-85ec-d20b52498bbe.jpg
- 确保二维码尺寸足够大（至少120px），清晰可扫描，放在玻璃材质的正方形卡片中
- 二维码卡片不添加Fontawesome图标，保持简洁
- 在二维码周围添加简短引导文字："一起AI实战"

## 苹果设计要求
1. 所有卡片必须使用玻璃材质效果，避免完全不透明的背景
2. 严格遵循苹果圆角规范，避免尖锐直角
3. 使用苹果标准阴影系统，避免过重或过轻的阴影
4. 实现动态交互效果，包括悬停和点击反馈
5. 确保文本在玻璃背景上的高对比度可读性
6. 使用环境自适应着色，让玻璃材质反映背景内容
7. 添加镜面高光和折射效果，增强真实感
8. 文字和背景对比一定要清晰，符合苹果无障碍设计标准

## 避免的设计
- 完全透明或不透明的材质
- 尖锐的直角边框
- 静态的平面效果
- 过时的设计风格
- 低对比度的文本
- 杂乱的视觉层级
- 侧边装饰线或单侧边框
- 非苹果标准的色彩和字体

请根据我提供的主题内容，生成一个体现苹果优雅、精致、未来感的单页网站，同时保持功能性和易用性的平衡。

## 待处理内容：
- 内容：{{content}}