Framer AI Agent 打造液态玻璃按钮
通过叠加液态玻璃背景与 WebGL 彩色金属着色器，迭代出具有质感的 AI Agent 下拉按钮。
原始内容
This is how I make a Liquid Glass button with @Framer's AI Agent. Steal it! 1. Asked the agent to build a liquid glass background + a WebGL chromatic metal shader 2. Layered them and tuned till it felt right Prompts below 👇 https://t.co/EdiVwolZzQ
中文译文
机器翻译，保留原文供核对。
这就是我用 @Framer 的 AI Agent 制作液态玻璃按钮的方法。直接抄走！ 1. 让 Agent 构建一个液态玻璃背景 + 一个 WebGL 色差金属着色器 2. 把它们叠起来并反复调整，直到感觉对了 提示词见下方 👇 https://t.co/EdiVwolZzQ
深度解析
是什么 这条推文展示一种用 Framer AI Agent 快速制作高质感 UI 的方法：先生成液态玻璃背景，再叠加 WebGL chromatic metal shader，随后持续调参。重点不在某段可复制代码，而在材质分层和审美校准的工作流。
核心设计 画面把按钮做成宽大的胶囊形容器，使用低对比灰色半透明表面、柔和阴影和细微虹彩边缘建立玻璃体积；左侧圆形图标用深色金属底与红黄蓝高光承载智能感，中央白色 “Ask agents” 与右侧下箭头形成清晰的入口—展开语义。两张代表帧中圆环与边缘高光的位置、色相有所变化，可能来自实时 shader 或动态光照。
关键洞察 AI Agent 能把“生成—叠加—调参”压缩成快速探索循环。工程师可将复杂视觉拆成背景材质、金属图标、文字和交互反馈等独立层，分别验证再合成。
边界与风险 推文没有提供完整提示词、参数、性能数据或无障碍处理，不能据此判断实现成本。WebGL 可能增加 GPU 消耗，虹彩效果也可能损害文字对比度和品牌一致性。
精选追评与案例
原作者给出可直接复用的液态玻璃背景提示词，包含折射与色散参数。
Liquid Glass background Prompt (Fable 5): Create a Liquid Glass background (code file) in Apple's Liquid Glass style. Key effect: when placed over content, the glass must refract and warp the background behind it like looking through a water droplet, the background bends, magnifies, and shifts color at the edges (strongest distortion near the borders, subtle in the center). Not just blur. Use an SVG displacement filter (feTurbulence + feDisplacementMap) on the backdrop, plus edge chromatic dispersion (RGB split) for the rainbow fringe. Adjustable settings: Light, Refraction (distortion strength), Depth, Dispersion (chromatic edge), Frost (blur amount), Splay (edge falloff).
中文译文 · 机器翻译
液态玻璃背景 提示词（Fable 5）： 按 Apple 的 Liquid Glass 风格创建一个液态玻璃背景（代码文件）。 关键效果：当它覆盖在内容上时，玻璃必须折射并扭曲其背后的背景，就像透过水滴看东西一样：背景会弯曲、放大，并在边缘发生颜色偏移（边界附近扭曲最强，中心较微弱）。而不只是模糊。 在背景上使用 SVG 位移滤镜（feTurbulence + feDisplacementMap），再加上边缘色散（RGB 分离）来形成彩虹色边纹。 可调设置：Light（光照）、Refraction（扭曲强度）、Depth（深度）、Dispersion（色散边缘）、Frost（模糊量）、Splay（边缘衰减）。
完整给出 WebGL 着色器提示词及渲染、数组索引等关键约束，复用价值高。
Chromatic Metal shader Prompt (Fable 5): Create a Chromatic Metal shader as a Framer code component using a WebGL / GLSL fragment shader. Masked into a circle. Look: brushed-chrome with sharp alternating white/black bands flowing like liquid metal, plus chromatic aberration (RGB split) that separates red/blue/cyan/yellow fringes along band edges. Rendering: size the canvas from the measured element (ResizeObserver × devicePixelRatio, never 0x0), run a continuous requestAnimationFrame loop that draws regardless of RenderTarget, and draw one frame on mount so it never blanks. Log gl.getShaderInfoLog on compile failure. Shader: build a color ramp from the Gradient array and sample it with a repeating coordinate (Scale, Repeats, Angle, Stretch) to make the bands, keeping transitions sharp so it reads as chrome. For RGB Split, sample the ramp 3 times at offset coordinates, one per R/G/B channel. Important: never index a uniform array with a variable index (WebGL 1 forbids it), loop over stops with a constant index and accumulate weights. Animate a seamless loop with Offset, Phase, Evolution using periodic time functions. Controls: Rounding, Depth, Roughness, RGB Split, Scale, Stretch, Angle, Gradient, Repeats, Offset, Phase, Evolution.
中文译文 · 机器翻译
色差金属着色器 提示词（Fable 5）： 使用 WebGL / GLSL 片段着色器，创建一个作为 Framer 代码组件的色差金属着色器。遮罩为圆形。 外观：拉丝铬质感，带有锐利交替的黑白条带，像液态金属一样流动，并带有色差（RGB 分离），在条带边缘分离出红/蓝/青/黄色边纹。 渲染：根据测量到的元素设置 canvas 尺寸（ResizeObserver × devicePixelRatio，绝不要为 0x0），运行持续的 requestAnimationFrame 循环，无论 RenderTarget 如何都进行绘制，并在挂载时绘制一帧，使它不会空白。编译失败时记录 gl.getShaderInfoLog。 着色器：从 Gradient 数组构建颜色渐变，并用重复坐标（Scale、Repeats、Angle、Stretch）采样来生成条带，保持过渡锐利，使其看起来像铬。对于 RGB Split，在偏移坐标处对渐变采样 3 次，每个 R/G/B 通道各一次。重要：绝不要用变量索引访问 uniform 数组（WebGL 1 禁止这样做），要用常量索引遍历各个 stop 并累加权重。 使用周期性时间函数，通过 Offset、Phase、Evolution 制作无缝循环动画。 控件：Rounding、Depth、Roughness、RGB Split、Scale、Stretch、Angle、Gradient、Repeats、Offset、Phase、Evolution。
原作者补充层叠技巧，并给出让渐变描边循环动画的提示词。
The trick: stack the glass background above the shader, that overlap is where it gets interesting. Play with the shader settings for your own result. To animate the gradient stroke, ask Agents this: "The stroke slightly moves around the button automatically and flows as a beautiful effect, loop forever"
中文译文 · 机器翻译
技巧：把玻璃背景叠在着色器上方，重叠处才是有趣的地方。 摆弄着色器设置，做出你自己的效果。 要让渐变描边动起来，可以这样对 Agent 说： “描边会自动绕着按钮轻微移动，并流畅地形成漂亮效果，永久循环”
指出折射动效的可读性边界，提醒评估文字对比度代价。
@tranmautritam @framer Wild that the shader is one prompt away now. The part that still needs a human eye is legibility, text over a moving refractive surface loses contrast fast. The skill shifts from making the effect to knowing when it's worth the readability cost.
中文译文 · 机器翻译
现在着色器只差一句提示词，真让人惊讶。仍然需要人来把关的是可读性：文字放在移动的折射表面上，对比度会迅速下降。技能重点从做出效果，转向判断何时值得付出可读性代价。
点明玻璃质感的关键在分层光照而非模糊加透明度。
@tranmautritam @Framer The layered shader approach is such a good breakdown — most people try to fake glass with a single blur+opacity combo and wonder why it looks flat. Depth comes from stacking light behavior, not just transparency.
中文译文 · 机器翻译
这种分层着色器思路拆解得很好——大多数人试图用单一的模糊+不透明度组合来伪造玻璃，还纳闷为什么看起来扁平。深度来自叠加光照行为，而不只是透明度。