眼馋苹果刚发布的液态玻璃效果？藏师傅教你提示词一键实现

昨晚又是一年的 WWDC 这次苹果所有的更新都压在了视觉和交互上，尤其是这个液态玻璃（Liquid Glass）效果更是引起了很多讨论。

看了一些演示之后，发现还是有可取之处的，边缘的效果确实真实细腻，就是现在卡片中心的可读性实在是太差了。

反正只要是苹果的一定会有很多人跟风，所以这个效果在接下来的一段时间你一定会频繁的看见，或者被要求使用。

这里藏师傅也是一上午探索了一下如何将液态玻璃效果融入到网页生成的提示词里面，没想到真让我搞了个差不多的出来。

先来看看效果，这套提示词在 Gemini 和 Lovable 上效果最好，Cluade 4 opus 可以实现，但是质量有些问题。

先来看 Lovable 的效果，整体的折射非常自然，就是描边有点生硬了。

然后是谷歌的效果边缘没有那么有厚度，但是整体可读性不错，看起来顺眼。

最后是 Claude Opus 4，他老是有加模糊的倾向，而且不太稳定，效果时好时坏，这个是几次里比较好的效果。

然后我们直接看提示词：

基于下面苹果 WWDC2025发布会关键信息，帮我用类似苹果发布会PPT的Bento Grid风格的视觉设计生成一个中文动态网页展示，在线引用背景图片，背景图片为：

网页具体要求为：使用Bento Grid风格的视觉设计，尽量在一页展示所有内容，文字颜色为白色，高亮文字色为苹果标志性的渐变，带有玻璃质感的卡片，卡片不需要深色背景强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差网页需要以响应式兼容更大的显示器宽度比如1920px及以上中英文混用，中文大字体粗体，英文小字作为点缀运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变数据可以引用在线的图表组件，Apache ECharts 5（@5.6.0/dist/echarts.min.js）样式需要跟主题一致使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript字体引用 Google Font 的字体图标引用Font Awesome （） ，避免使用emoji作为主要图标不要省略内容要点

卡片样式严格参考如下实现方式：

菜单项

CSS样式：/* 容器 */.liquidGlass-wrapper { position: relative;

display: flex;

overflow: hidden; padding: 0.6rem; border-radius: 2rem; cursor: pointer; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);}/* Hover效果 /.liquidGlass-wrapper:hover { padding: 0.8rem; border-radius: 2.5rem;}/ 扭曲层 */.liquidGlass-effect {

position: absolute; z-index: 0; inset: 0; backdrop-filter: blur(3px); filter: url(#glass-distortion);

}/* 色调层 */.liquidGlass-tint {

position: absolute; z-index: 1; inset: 0; background: rgba(255, 255, 255, 0.25);}/* 光泽层 */.liquidGlass-shine {

position: absolute; z-index: 2; inset: 0; box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);}/* 内容层 */.liquidGlass-text {

position: relative; z-index: 3; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);}

.liquidGlass-wrapper:hover .liquidGlass-text { transform: scale(0.95);}/* 子项样式 */.menu-item { padding: 0.4rem 0.6rem; border-radius: 0.8rem; transition: all 0.1s ease-in;}

.menu-item:hover { background-color: rgba(255, 255, 255, 0.5); box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.1); backdrop-filter: blur(2px);}

️ 提示词使用注意事项：

1. 如果你不想要一图流的话可以删除提示词里的“尽量在一页展示所有内容”的这部分。

2. 这个风格必须要背景图片，没有的话辨识度就会很受影响，建议加上，建议用深色背景图。

3. 建议优先使用 Gemini 2.5 Pro 生成，DeepSeek R1 0528 可以用，但是他无法搞定后面的图片扭曲部分。

如果你觉得教程对你有帮助的话可以帮我点个赞或者喜欢，也可以推荐给你需要的朋友们

代码参考了  这个项目