Communitygithub.com

Premium Glass for Android

为 Android 应用设计和构建受 Apple 启发的“液态玻璃”界面,使用 Jetpack Compose 实现浮动半透明导航、面板和控件,并包含深色/浅色主题、可读性检查、无障碍回退、模糊性能限制以及用于参考画面的 AI 图像生成提示。

Premium Glass for Android 是什么?

该技能专门用于在 Android Jetpack Compose 应用中构建高质量、类似 iOS 的“液态玻璃”界面。它严格定义了玻璃材质的使用范围:仅用于浮动层(如底部导航、顶部栏、浮动操作按钮等),而内容层始终保持不透明或柔面,以确保视觉层次清晰。技能内建了严格的材质层级(薄、常规、厚、遮罩),并预设了对应深色/浅色模式下的填充值和模糊半径,同时强制要求对每个玻璃元素进行对比度检查(4.5:1),并提供固体回退方案,以支持旧设备或无障碍模式(如减少透明度、高对比度)。该技能支持多种工作模式:可直接生成 Compose 代码,也可输出用于 Midjourney 等工具的屏幕提示(仅作为布局参考,最终需在 Figma 或 Compose 中重建),还能对已有的设计或代码进行审查,报告对比度、玻璃层数量等证据。此外,它还关注性能,限制同时模糊的层数(2-3层),并提供了一系列参考文献和检查脚本(如 `scripts/contrast_check.py`, `scripts/audit_compose.py`)来辅助实现。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Ajit-ApTech/Premium-liquid-glass/tree/main/premium-glass-android

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Premium Glass for Android 是做什么的?

目标:打造一个平静、有空间感且显得昂贵的界面。玻璃是一种用于悬浮在内容之上的控件的材质。它不是一种可以随处洒落的风格。成功的检验标准是:人们会说“这感觉干净、有层次感”,而不是“有人把所有东西都加了模糊”。

本技能控制材质、层次、深度、动效和无障碍。项目的自有品牌控制标识和文案。默认品牌值位于 assets/tokens.json(保留调色板)中,并且可以替换。

0. 安全与范围

  • 仅在用户选定的项目内工作。不要读取秘钥、密钥或环境变量。不要发起网络请求或安装包;如果需要某个库,说出其名称,让用户决定。
  • 非用户要求,不要覆盖已有文件;先提出建议(见第 2 节)。
  • 仅使用虚构的示例内容。
  • 绝不使用 Apple 字体(San Francisco)、SF Symbols、Apple 徽标或 iOS 界面元素。请使用 Inter 和 Material Symbols/Lucide 风格图标。
  • 标记为 (VERIFY) 的事实可能过时(API、版本)。请让用户确认它们。

1. 五条硬性规则

  1. 内容绝不使用玻璃。卡片、列表行、表单、页面背景和媒体保持不透明或柔面。
  2. 玻璃仅用于浮动层:底部导航药丸、滚动内容上方的顶部栏、浮动操作按钮、底部面板和菜单、搜索字段、提示/小食条、小型浮动标签。
  3. 玻璃上不再叠加玻璃。在玻璃表面内部,使用填充、分隔线或透明度来区分项目。
  4. 可读性优先于外观。正文文本在最差背景上需要 4.5:1(大文本和图标 3:1)的对比度。运行 scripts/contrast_check.py。
  5. 每个玻璃表面都有一个固体回退(旧版 Android、减少透明度、高对比度、省电模式、设备禁用模糊)。

在将玻璃应用于任何元素之前,先问一个问题:“这种材质传达了什么样的功能角色?”有效的答案:它悬浮在滚动内容之上;它是临时的或上下文相关的;它必须在内容在其下方移动时保持可触及。没有答案 = 不使用玻璃。

2. 工作流

  1. 检查:平台、最低/目标 SDK、现有主题/令牌、导航结构、无障碍需求、性能目标。列出未解决的问题,而不是猜测。
  2. 层次图(在任何代码之前):元素 -> 层(内容/结构/浮动)-> 是否玻璃 -> 层级 -> 原因。与计划一同呈现。
  3. 令牌:从 assets/tokens.json 开始;调整品牌颜色;在两种模式的每个层级都重新运行对比度检查。
  4. 使用 assets/GlassTheme.kt 中的模板和 references/compose-implementation.md 中的指导进行构建。
  5. 使用 references/review-checklist.md 和 scripts/audit_compose.py 验证。报告证据(对比度值、每屏幕的玻璃层数、回退截图)。如果没有证据,不要声称检查通过。

3. 材质层级(起始值,dp)

层级用途模糊填充(深色模式)填充(浅色模式)
无内容、卡片、列表、背景---
薄仅图标或大标签控件16墨水色 @ 0.55白色 @ 0.55
常规导航药丸、顶部栏、搜索、FAB、提示24墨水色 @ 0.66白色 @ 0.70
厚面板、菜单、对话框、文字密集型覆盖层32墨水色 @ 0.78白色 @ 0.82
遮罩模态面板后的调暗层0-8黑色 @ 0.20-0.45黑色 @ 0.20-0.45
详情和已验证的对比度数值:references/tokens.md。填充使用表面墨水色着色,而非纯白,因此深色模式文本能在明亮背景上存活。

4. Android 现实检查(在承诺任何事之前请先阅读)

  • Modifier.blur() / RenderEffect 只模糊元素自身的内容,而不模糊其背后的内容。真正的背景模糊需要一个库(Haze 是 Apache-2.0 协议,支持 Android 上的 Compose)或对话框的窗口模糊。库的 API 名称在不同版本间会变化:请阅读已安装版本的 README (VERIFY)。
  • 模糊效果需要 Android 12(API 31)或更高版本 (VERIFY)。在其下版本,使用固体回退表面。
  • 模态底部面板和对话框位于独立的窗口中,因此组合内的背景模糊可能无法看到它们背后的内容。在支持的地方使用窗口背景模糊,并检查 WindowManager.isCrossWindowBlurEnabled (VERIFY),否则使用带遮罩的厚近不透明面板。
  • 在纯渐变上进行模糊是不可见的;玻璃背后需要内容(图像、纹理或刻意柔光)。否则只能白白消耗性能。
  • 预算:每屏幕最多 2-3 个同时模糊的图层(低端手机 1-2 个)。永远不要模糊列表项或整个屏幕。不要在大表面上动画化模糊半径;动画化透明度或变换。
  • 在低端手机(3-4 GB RAM)上以类似发布版本的构建进行测试。

5. 无障碍模式(全部实现)

  • 减少透明度(应用内设置 + 系统“移除动画”/高对比度信号):将玻璃替换为带有可见 1 dp 边框的固体表面令牌。
  • 大字体(200%)和 TalkBack:不单独使用颜色传达信息;仅图标控件上添加标签;焦点顺序合理。
  • 减少动效:将移动替换为淡入淡出;保留状态反馈。
  • 触摸目标至少 48 dp。手势(滑动)始终有一个按钮或 customActions 替代方案。

6. 组件

导航药丸、顶部栏、FAB、面板、搜索字段、标签、卡片、滑动行、分类栈、聊天输入、遮盖值标签的规格:references/components.md。每个角色使用一个圆角(标签 999、控件 16、卡片 24、导航药丸 28、面板 32);嵌套圆角 = 外部圆角 - 内边距。

7. 动效

弹簧 250-350 毫秒,短淡入淡出 150 毫秒,无反弹过冲。滑动阈值处的触觉反馈。按下状态:缩放至 0.97 并加上柔光高亮。尊重减少动效设置。

8. 图像提示模式(参考画面)

当被要求提供模拟提示时,请遵循 references/image-prompts.md:每个提示一张屏幕,自包含样式块,准确的屏幕文字,玻璃仅用于浮动层,“卡片不透明”,Android 状态栏,无 Apple 元素。参考文档中有六个可用的屏幕提示。提醒用户图像生成器会搞乱小文字和天城文;将输出用作布局和氛围参考,然后在 Figma/Compose 中重建。

9. 审查模式

当被要求审查设计或代码时:按层分类每个元素,计算每屏幕的玻璃层数,运行审计脚本(python scripts/audit_compose.py <src>),运行对比度脚本,然后按严重程度列出发现并附带 references/review-checklist.md 中的修复建议。

10. 输出期望

对于任何任务,都要说明:哪些是玻璃及其原因;哪个层级;对比度证据;回退方案;任何近似或未经核实的事项。保持变更范围专注:不要重新设计无关的 UX;单独列出无关问题。

参考文献和文件

  • references/principles.md - 源自 Apple 的原理和来源
  • references/tokens.md - 令牌表格和已验证的对比度结果
  • references/compose-implementation.md - Compose 架构、代码片段、回退方案、性能
  • references/components.md - 组件规格和状态
  • references/image-prompts.md - 提示模板和工作流
  • references/review-checklist.md - 质量关卡和反模式
  • scripts/contrast_check.py, scripts/audit_compose.py - 本地检查器(无网络)
  • assets/tokens.json, assets/GlassTheme.kt(可选:添加 45 屏幕 Retain 提示集作为 assets/retain-screen-prompts.md)

相关技能