前几天 WWDC，苹果发布了新的 UI 用户界面。
是这几年最大规模视觉更新，被称为“Liquid Glass”。
用类似玻璃的半透明材质做界面组件。
我 X 网名 vista8 ，就是当年看到 Windows Vista 预览版取的，第一次见毛玻璃效果，有点惊艳。
Windows Vista
苹果的Liquid Glass效果
这个设计有人夸，也有人骂。
为什么夸
玻璃界面，元素能反射和折射周围环境。
显得有活力，视觉层次也很好，美感确实不错。
也能发挥苹果芯片的强大图形算力，如实时渲染，动态光效。
统一苹果所有设备风格，通过设计连接虚拟和物理世界。
也很容易让人想到科幻电影，触控或隔空操作的透明玻璃屏幕。
为什么骂
① 可读性很差
Liquid Glass 的高透明度和动态背景，让文字、通知等在特定背景下根本看不清，甚至效果很滑稽。
From X 网友 lencx 的吐槽
② 苹果的精准刀法
新时代的“安迪比尔定律”，库克的阳谋。
用这么炫酷的 UI 消耗手机资源，让大家不得不升级 iPhone
学习研究
我估计，大家终究逃不过苹果“真香定律”。
不如提前学习研究。
用 Gemini Deep Research（ Skywork 也相当不错）。
调研下Liquid Glass设计风格特点。
生成介绍网页
https://www.32kw.com/view/bd7d3dd
生成提示词
基于调研报告，人机协同。
写了类 Liquid Glass 风格的网页生成提示词。
一共迭代 20多版，终于稳定。
效果如下：
https://www.32kw.com/view/c3e5ae9
完整版提示词
https://xiangyangqiaomu.feishu.cn/wiki/TPDhwuYgViiU73kLiQfcd0zqnjg
提示词技巧拆解
图文配色可读性
AI生成网页，经常配色不合理，如深色背景配黑字。
加上下面这句，效果好很多。
所有文字配色严格遵循WCAG 2.1 AAA级标准（对比度 ≥ 7:1）
单调的引文样式
Claude 生成的引文卡片，样式千篇一律。
都是卡片左侧加色条，例如：
通过提示词修改为马卡龙色渐变。
用马卡龙渐变毛玻璃卡片样式，每个引用背景都不同
不懂设计，也不算好看，但至少不单调。
上抬和扫光动效
苹果最新的Liquid Glass UI设计中。
扫光动效被用于按钮、控件、图标等元素上，配合半透明的玻璃材质，让界面更具动态和立体感。
英文常称为“shimmer effect”或“glossy sweep”
元素 Hover 后的上抬动效，也是类似目的。
所有图标都具备hover上抬和扫光效果
生成纯HTML
AI 生成内容，因训练对齐多数人偏好。
结构往往是：引述问题 - 内容 - 总结
而我们的任务就是生成纯HTML，不需要废话解释。
提示词加下面这句话：
直接生成完整精美的HTML代码，没有任何前后置引导语。
记住**“前后置引导语”**这个词。
该技巧非常实用，
想直接拿 AI生成的重点，就加上类似限制。
后记
藏师傅在 WWDC 当天就写了提示词。
我这两天才有空研究，哈哈哈。
苹果每次界面革新，都会引发争议。
——有人欣赏其美学突破，有人质疑其实用性和背后的商业策略。
历史上每一次主流 UI 变革，质疑和模仿总是并存。
最终大多数人会在体验中逐渐接受，甚至习惯。
回头看，界面设计的流行趋势总是在循环：从极简到拟物，从扁平到玻璃。
与其被动接受，不如主动学习和实践，理解背后的原理和方法。
希望这篇记录能为你带来一些启发。
附录
蝗虫群友“神的孩子在跳舞”写的提示词。
效果更接近Liquid Glass。
他在 SVG 生成流程图、页面展示等方面研究很多。
改天邀请他直播分享经验。
https://xiangyangqiaomu.feishu.cn/wiki/TPDhwuYgViiU73kLiQfcd0zqnjg#W5cLd7ty6o03DyxC5IYcZhb8nDb
以上，既然看到这里了。
如果觉得不错，随手点个赞、在看、转发三连吧。
如果想第一时间收到推送，也可以给我个星标⭐
谢谢你看我的文章，下次再见。