毛玻璃风格落地页技能
生成一个毛玻璃风格的单文件落地页，使用 Tailwind 工具类构建。整体外观遵循一条规则：模糊效果只有在背后有彩色内容时才可见——因此每个玻璃面板都漂浮在渐变背景之上，绝不平铺于纯白色之上。
玻璃配方
一个统一的面板配方，应用于每个表面：
backdrop-blur-xl bg-white/10 border border-white/20 shadow-2xl rounded-2xl
图层规则：
- 页面背景为鲜艳的渐变（两种或三种色调）。面板是上方唯一的半透明层。
- 一种强调色驱动渐变和主要操作；其余保持中性。
- 玻璃上的文字：标题使用 90-100% 不透明度的白色；正文使用 60-70% 不透明度；绝不要在明亮的玻璃面板上使用低对比度的灰色。
- 每个面板添加 1px 的
border-white/20边框——正是这使玻璃看起来像一张物理薄片，而不是一个模糊的矩形。 - 慷慨地使用圆角（
rounded-2xl/rounded-3xl）；玻璃应呈现柔和感，而非尖锐感。
配色方案
以下四种配色方案作为可选集提供；示例将其暴露为一行主题色块，可实时切换渐变背景和强调色。
| 配色方案 | 渐变背景 | 强调色 |
|---|---|---|
| aurora | 紫色 → 粉色 → 琥珀色 | #7C3AED |
| ocean | 天蓝色 → 青色 → 靛蓝 | #0EA5E9 |
| ember | 玫瑰红 → 橙色 → 黄色 | #F43F5E |
| forest | 翡翠绿 → 青绿 → 青柠绿 | #10B981 |
工作流程
- 阅读当前的 DESIGN.md（已在上面注入）。其中定义的色彩和字体，用于文本和主要操作；玻璃配方和渐变则是此风格自身的贡献。
- 根据需求命名产品及其承诺。只使用真实的文案。
- 布局设计： 粘性玻璃导航栏、一个 H1 标题 + 一段正文 + 渐变上的 CTA、一行主题变体选择器、一个三列玻璃功能卡片网格、一个玻璃推荐展示面板，以及一个结尾 CTA。
- 保持工艺标准： 仅一个 H1 标题；主要 CTA 使用强调色；玻璃上的正文文本保持 ≥ 4.5:1 对比度；半透明表面上的焦点环可见；在 768px 以下布局折为一列。
- 输出一个自包含的
index.html。 原型中通过 Play CDN 加载 Tailwind；生产环境应编译 Tailwind。
反模式
- 将玻璃面板放置在平坦近白的背景上（模糊效果会消失）。
- 屏幕上同时出现超过两种强调色。
- 模糊文本，或将玻璃面板层层堆叠直至对比度消失。
- 磨砂面板使用锐利的直角。