仅在用户明确选择或已确认的项目配置指定此风格时使用此技能。 如果是未指定风格的新UI请求，请使用风格选择器（如Taste Engine），而不要在此处替用户决定其品味。现有的品牌规范、可访问性要求和用户覆盖设置优先级高于以下所有示例。以下风格指南并非允许在风格选择前开始UI编码。
样式包：玻璃态设计
ID： glassmorphism
标识： 可见的磨砂半透明表面，漂浮在分化的浅色/彩色图层之上，内容清晰且具有功能性的层次感。
这是一种选择式风格，并非引擎默认。仅在用户选择或已建立的项目设计系统指定时激活。尊重产品结构、品牌方向、可访问性和现有交互。带有蓝色按钮的通用深色页面不构成玻璃态设计。
适用场景 / 权衡
- 适合用于： 表现力强的作品集、产品落地页、导航覆盖层、媒体界面、创意仪表盘和有边界的UI演示。
- 谨慎使用于： 密集型数据表格、长篇阅读、可访问性要求高的表单或文字背后不可预测的图片。将高密度内容放置在适当不透明或强着色表面上。
- 参考方向： 一种轻质、乳白色磨砂窗格，带有柔和的蓝色氛围光和圆润的几何形状；或一种深色、烟熏玻璃系统，采用半透明石板面板、柔和的紫罗兰/青色照明和清晰的控件。两者都有效。两者都不强制使用固定的品牌调色板。
玻璃质感保真度门控 —— 强制要求
在将玻璃态设计页面视为完成之前，打开的首屏视图必须清晰地呈现为玻璃构成。 如果用户选择了此风格，那么大面积的纯背景加上排版和一个常规按钮是不通过的，即使CSS变量命名为 glass。
一个成功的主体玻璃组件必须展示所有以下要素：
- 背景深度： 表面后面有意义的、差异化的背景（柔和的浅色区域、受控渐变、形状、项目提供的摄影图片或现有的应用内容）。玻璃需要一些东西来视觉上过滤。有目的的渐变和环境色形状被Taste Engine明确允许用于玻璃态设计（anti-slop），当它们建立了穿过窗格的可见光线时。它们本质上不是「垃圾设计（slop）」。
- 半透明： 面板允许一些背景色度/亮度影响其外观。避免那些被称为玻璃但完全不透明的深色卡片。
- 磨砂效果：
backdrop-filter: blur(...)（以及需要的-webkit-backdrop-filter）在窗格内部明显柔化背景细节，而附近暴露的背景保持更清晰。单独的模糊背景图像并非磨砂玻璃。 - 清晰的边缘和深度： 柔和的亮边/高光、轻微的内部光泽、合适的圆角以及克制的阴影或分隔。玻璃应有可感知的边界，而不是一个平坦的灰色板块。
- 内容清晰度： 文字、焦点指示器、控件状态和操作在真实的合成背景上以及禁用回退效果后仍然清晰可读。
首屏测试： 在桌面截图中，无需阅读页面标题，识别出主体窗格、其背后独特的背景、其边界内部的模糊/着色外观以及其边缘高光。如果不可能做到，则在添加更多内容之前修改材质。
不是卡片数量规则： 一个突出的英雄窗格或几个组件演示表面就足够了。不要用相同的透明卡片覆盖每个区域。在组件展示页上，使用真实、功能性的示例（开关、输入框、对话框、作为标记演示的提示条、导航）来展示材质及其状态；不要虚构真实的产品状态或社交证明。
明确的背景渐变例外 —— 玻璃允许发光
玻璃态设计专属覆盖规则： 针对通用装饰性渐变的普遍垃圾设计警告，绝不能被解释为禁止使用渐变、网格状色场、模糊色块、氛围照明或连贯的背景图像。这些是有效的材质增强背景层，即使它们是装饰性的，因为它们使半透明、磨砂效果、边缘和深度可被感知。此豁免不是允许编造内容或生成无法访问/性能低下的效果。
- 允许的背景处理方式： 1-3个连贯的
radial-gradient()浅色区域、克制的多停点线性或网格渐变、使用伪元素模糊的有色环境形状、品牌对齐的插图/照片、或窗格后的现有内容。静态CSS通常就足够了，无需额外的图像或动画库。 - 浅色 / 乳白色示例： 白色/冰色基底，带有冷蓝色/薰衣草色柔和光线区域，位于半透明白色卡片后方；该窗格明显柔化了颜色边界。
- 深色 / 烟熏示例： 深色墨色基底，带有受控的紫色/青色/蓝绿色光线区域，位于半透明石板色窗格后方；明亮的渐变区域绝不能遮挡白色主体文字。
- 构成要求： 放置至少一个光线/颜色过渡或可识别的背景元素位于主玻璃窗格之后并部分延伸出其边界，以便过滤与未过滤的差异可见；没有局部变化的均匀全屏渐变仍可能不通过。
- 深度控制： 背景的强调程度应低于内容；使用少量具有自然衰减和刻意位置的光源，而不是在每个页面上放置默认的紫色/蓝色斑点。使用用户的品牌调色板和提供的参考。
- 性能和可访问性： 优先使用静态CSS渐变和克制的表面。避免全屏移动渐变动画、过度的全页背景模糊、微小低对比度文字和隐藏的焦点环。尊重透明度偏好并测试可读的不透明回退方案。
- 垃圾设计（anti-slop）解释： 根据材质目的、克制和可读性来评估渐变，而不是仅仅因为它们存在就判定为垃圾设计。为了满足一个通用的渐变启发式规则而移除有用的玻璃背景是一种设计退化。
一张优秀的截图应使磨砂材质即使在所有标题和标签都隐藏时也显而易见。关于起始实现，请参见 examples/glassmorphism/frosted-surfaces.css ；关于视觉验收标准，请参见 tests/glassmorphism-visual.md 。
排版与字体
使用适合品牌的干净无衬线字体（系统无衬线、DM Sans、Inter等）。典型阅读大小为15-17像素；展示字体可以更大。保持强大的排版层次，避免在可变的玻璃背景上使用超细文字。浅色磨砂面板通常受益于深色前景文字；深色烟熏面板则受益于高对比度的米白色。绝不能用彩色发光来代替排版层次。
颜色方向
根据上下文选择一个连贯的方向，或使用用户的参考：
- 磨砂浅色 / 乳白色玻璃： 淡冰白色或浅灰色底色（
#F0F4F8），冷蓝色或其他品牌色调的漫射光位于半透明白色窗格（rgba(255, 255, 255, 0.45)）后方。排版为深石板色（#0F172A），辅以柔和石板色（#475569）。沿上边缘可见柔和的玻璃高光（rgba(255, 255, 255, 0.75)）。 - 烟熏深色 / 夜间玻璃： 深海军蓝/墨色底色（
#090D16），带有紫罗兰/蓝色/蓝绿色环境光区域，位于蓝灰色半透明面板（rgba(22, 28, 45, 0.55)）后方。前景文字为清脆的瓷白色（#F8FAFC），辅以柔和石板色（#94A3B8）；深色面板不是近似不透明的矩形。 - 主题耦合与防冲突规则： 在浅色和深色玻璃模式之间切换时，前景文字、边框和环境光源必须协同切换。前景文字与磨砂玻璃表面及其后的照明背景之间的对比度必须至少达到4.5:1。绝不要将深色文字留在烟熏深色玻璃上，或将白色文字留在磨砂浅色玻璃上。
颜色本身并非玻璃态设计。切勿默认对每个品牌都使用霓虹紫/青色。保留品牌和高对比度要求。检查实际合成的背景前景对比度（WCAG AA 4.5:1 正常文字，3:1 大文字；相关的非文字控件至少3:1）。
布局与几何
- 使用有目的的前景/背景构成：环境背景 → 玻璃表面 → 清晰的内容和交互控件。区分2-3个深度平面，避免嵌套卡片杂乱。
- 使用一致的圆角（大窗格通常为16-28像素）和间距。避免仅仅为了达到100svh而使用完全空置的过大首屏。
- 在响应式屏幕上，窗格应整齐堆叠，保留可读的内边距，并避免裁剪的模糊或溢出。头部、英雄内容和控件必须适合或自然扩展。
表面、深度、纹理
- 玻璃配方： 半透明色调（
rgba(...)或color-mix）、backdrop-filter: blur(16px) saturate(140%)、半透明1像素边框、柔和的内部顶部高光和柔和的层叠阴影。从大约12-24像素的模糊开始，然后根据真实背景进行调整。 - 浅色玻璃： 使用白色调表面，当背景允许时 alpha 大约在0.24-0.55之间；透明度太低会消除磨砂效果。强烈的文字对比度仍然是强制性的。
- 深色玻璃： 使用石板色/靛蓝色调，alpha 大约在0.25-0.56之间，可见的较亮边缘和其后的对比环境光。避免纯黑面板和刺眼的霓虹光环。
- 深度线索： 面板后方的柔和模糊背景、克制的内部光泽、微妙的边缘发光/反射。不需要库存的通用气泡壁纸。
- 当背景滤镜缺失时，使用带有实色可读表面的
@supports回退方案。提供减少透明度/高对比度的替代方案。模糊本身绝不能成为理解内容或交互所必需。
有关独立的浅色和深色起始令牌，请参阅完整Taste Engine路由器的 examples/glassmorphism/frosted-surfaces.css （上述令牌配方也适用于独立安装）。根据项目调整令牌；不要复制所有示例或强制使用固定调色板。
组件结构与交互
- 英雄区： 立即让所选美学显而易见。将实际的Taste Engine/项目标题和行动号召按钮放置在可见玻璃平面的内部或重叠在其上，或呈现同样令人信服的玻璃窗口构成。在窗格后提供有意义的照明背景。
- 头部/导航： 微妙的磨砂条可以重叠在背景上，但要保持对比度和焦点可见。在展示玻璃UI时，避免使用与页面视觉上脱节的平坦不透明顶部栏。
- 功能示例： 具有真实开/关状态的开关、可选项、标签页、模态框、表单，以及仅在被实际触发或明确标记为静态演示时使用的提示条。在适用时展示聚焦、悬停、激活、禁用和错误状态。前景控件表面的不透明度可以高于其父级玻璃，以增强可用性。
- 按钮： 可以是实色强调表面以增强可感知性；并非每个控件都必须是透明的。常规按钮不能弥补其他地方缺失的玻璃效果。
- 内容： 为长段落、表格和表单保留强着色或实色可读容器；不要将段落放置在嘈杂的半透明图像上。
动效
使用交互反馈而非环境运动。在悬停、选择、窗格显示或模态时，使用140-220毫秒的淡入/位移效果，仅当用户操作时需要时才触发。保持玻璃层的连续性。没有无尽漂浮的球体、移动的光束或强制性的3D旋转。
可选的 Anime.js v4 配方
- 动效决策： 大多数交互使用CSS/原生过渡；Anime.js v4是可选的，用于协调状态过渡，而非必需的视觉依赖项。
- 起始持续时间： 180毫秒，无弹性的缓动。动画针对合成友好的
opacity/transform属性，而不是持续动画化blur或box-shadow。 - 减少动效： 尊重
prefers-reduced-motion并允许中断/短路过渡。 - 依赖项： 在可能的情况下遵循Taste Engine的
references/motion-engine.md；独立技能应用相同的指导。
UI文案与微文案
直接、具体且简洁。玻璃是一种材质，不是使用诸如“未来是透明的”之类模糊文案的借口。避免虚假的徽章、验证状态、用户、生产力评分或推荐。演示数据必须明确标注。
起始令牌（建议，非完整主题）
| 令牌 | 浅色玻璃默认值 | 深色玻璃默认值 |
|---|---|---|
--taste-radius-sm | 14px | 14px |
--taste-radius-lg | 24px | 24px |
--taste-glass-blur | 18px | 18px |
--taste-glass-bg | #f0f4f8 | #090d16 |
--taste-glass-surface | rgba(255, 255, 255, 0.45) | rgba(22, 28, 45, 0.55) |
--taste-glass-text | #0f172a | #f8fafc |
--taste-glass-text-muted | #475569 | #94a3b8 |
--taste-glass-light | rgba(255, 255, 255, 0.38) | rgba(255, 255, 255, 0.38) |
--taste-glass-dark | rgba(36, 45, 72, 0.38) | rgba(36, 45, 72, 0.38) |
--taste-glass-edge-light | rgba(255, 255, 255, 0.65) | rgba(255, 255, 255, 0.18) |
--taste-motion-duration | 180ms | 180ms |
这些仅为起始值。必须对照真实内容和背景检查结果。不要秘密加载字体、插图或动效库。
英雄区构成（全屏首屏）
对于具有英雄区的公开作品集/落地页/首页，使用头部 + 英雄区的首屏构成（min-height: 100svh 并带有 100vh 回退），而不是裁剪的固定高度英雄区。根据需要减去实际的流入式头部，而不是为重叠层减去两次。在短暂的移动屏幕和缩放时自然增长。材质要求： 首屏显示一个明确无误的磨砂窗格，过滤一个可见的、精心构成的背景——而不是80%的空白深色空间加上普通文字。通过有意义的层次结构和品牌对齐的环境光来构建视觉趣味；不要为了达到玻璃效果而发明照片、假资产或占位内容。