苹果液体玻璃风格

Imported from GitHub: https://github.com/swiftdo/ai-prototype-prompts/blob/main/README.md
GitHub stars at import: 115
GitHub forks at import: 11

Original README

9. 苹果液体玻璃风格

你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码，你需要作为产品经理规划这页面，作为设计师思考这些原型页面的设计；

## 产品需求：
*   **应用类型：** 中文“显化应用 (Manifestation App)”。
*   **核心理念：** 帮助用户设定意图、培养积极心态、可视化目标，实践吸引力法则。
*   **需要包含的核心页面：**
    1.  启动页 (Splash Screen) 
    2.  主页/仪表盘 (Home/Dashboard)
    3.  目标列表页 (Goals)
    4.  目标详情页 (Goal Detail)
    5.  创建/编辑目标页 (Add/Edit Goal)
    6.  肯定语列表页 (Affirmations)
    7.  感恩日记页 (Gratitude Journal)
    8.  愿景板 (Vision Board)
    9.  设置页 (Settings)
    
## 技术规格：
*   **输出格式：** 单个完整的HTML文件。
*   **布局：**每一个模块之间用 Grid 方式排版，每行4个 (带1px灰色描边模拟手机边框)。
*   **底部导航栏：每个画板都有统一底部导航栏。
*   **画板尺寸：** 375x812px (带1px灰色描边模拟手机边框)。
*   **APP页面背景：背景需要是真实的图片，以展示毛玻璃效果，多个页面的图片可以是不同的。
*   **样式：样式丰富，多一些图表样式，功能交互友好；

## 设计风格：“液体玻璃”UI效果

1. 核心参数 (可视化翻译)
在这里，我们将你的每个参数都翻译成了具体的视觉描述词组。
**children (内容):**
内部包含 [内容描述，如：白色的播放符号和文字]
玻璃下方是 [一个线框图标 / 一段标题文字 / 一个数据图表]
**displacementScale (位移/折射强度):**
低: 几乎没有背景扭曲
默认(70): 中等强度的背景扭曲和透镜效果
高: 强烈的背景扭曲，如同透过水滴
**blurAmount (模糊/磨砂程度):**
低: 几乎完全透明，只有轻微的边缘模糊
默认(0.0625): 轻度磨砂玻璃质感，背景清晰可见
高: 重度磨砂效果，背景模糊不清
**saturation (饱和度):**
低: 色彩饱和度低，接近灰色调
默认(140): 色彩高度饱和，鲜艳通透
高: 色彩极度饱和，几乎发光
**aberrationIntensity (色差强度):**
低: 边缘几乎没有色差
默认(2): 边缘带有微妙但可见的红蓝彩色镶边 (色差效果)
高: 强烈的棱镜色散效果，边缘色彩分离明显
**elasticity (弹性/液体感):**
0 (刚性): 坚硬的玻璃质感，没有弹性
默认(0.15): 带有微妙的凝胶般弹性，感觉柔软
高: 高度的液体弹性，如同粘稠的果冻
**cornerRadius (边角半径):**
低: 接近直角，只有轻微的圆角
中: 明显的圆角矩形
默认(999): 完美的药丸形状或圆形
**padding (内边距):**
内部元素周围有充足的留白 (高padding)
内部元素紧凑，几乎没有留白 (低padding)
**overLight (背景明暗):**
false (默认): 放置在深色背景之上，阴影不明显但内部辉光突出
true: 放置在浅色背景之上，带有清晰柔和的投影
**mode (折射模式):**
"standard": 标准的、轻微的背景折射
"polar": 背景呈现出极坐标式的漩涡状扭曲
"prominent": 显著的透镜放大效果，突出中心区域
"shader": 物理精确的、复杂的焦散和光线折射效果，最具真实感
**onClick / mouse... (鼠标/交互效果):**
模拟悬停状态，一个柔和的光斑中心点跟随鼠标位置
模拟点击状态，表面呈现凹陷，光芒向内收缩
2. 智能配色核心 (保持不变)
这部分依然由你来定义应用的情感和功能。
核心指令: 色彩方案根据 [应用类型/功能] 的特性智能生成，旨在唤起 [核心情感/氛围] 的感觉。