Liquid Glass Skill — Design skill for Claude Code

liquid-glass

给任何 Web 桌面应用换上真·液态玻璃外壳的 AI Agent Skill。
An AI agent skill that gives any web-based desktop UI a true Apple-style liquid glass shell.

本文档中文优先，English follows in each major section.

---

这是什么 / What It Is

**中文** - 这是一个可安装的 Agent Skill（兼容 Claude Code、Codex 等读取 `SKILL.md` 的编码代理），把一套经过实战验证的液态玻璃 UI 方案沉淀成"文档 + 成品脚本"。装上它之后，对你的 AI 编码助手说一句"把这个应用做成液态玻璃"，它就会按这套配方接线，而不是从零重新发明（并重新踩坑）。

**EN** - An installable agent skill (for Claude Code, Codex, and any coding agent that reads `SKILL.md`) that packages a battle-tested liquid glass UI recipe as docs + drop-in scripts. Install it, tell your AI coding assistant "make this app liquid glass", and it wires up the proven pipeline instead of reinventing (and re-tripping over) everything.

参考实现 / Reference implementation: **[Mediatag](https://github.com/Na2H2P2O7/Mediatag)**

---

演示 / Demo

https://github.com/user-attachments/assets/80251fee-ad9c-40cb-9aee-774ffaf111c7

🎬 拖动窗口时折射实时跟随、按压玻璃形变、实时屏幕背景、自适应文字（48s，[本地文件](show/demo-v2.mp4)）。/ Refraction tracking window drags, pressed-glass deformation, live screen backdrop, adaptive text ink.

Light Mode	Dark Mode

截图里窗口后面的森林就是真实的桌面壁纸——窗口是透明的，玻璃在真实地折射它。/ The forest behind the window is the actual desktop wallpaper — the window is transparent and the glass genuinely refracts it.

---

效果 / What You Get

**中文**

• 🪟 真透明窗口 + 真折射 - 整个窗口是一块 WebGL 渲染的圆角霜面玻璃，UI 面板是其上更清透的"透镜"层，边缘真实弯曲窗口背后的桌面壁纸——不是 backdrop-filter 模拟。
• 📺 实时屏幕背景 - 可切换到 ~7fps below-window 屏幕捕捉，折射窗口背后的一切（其它应用、视频、滚动网页）。
• 👆 按压玻璃形变 - 光标如指尖按压玻璃，指针下方折射局部加深，按下更深、松开回弹——是折射管线本身的调制。
• 🔤 自适应文字墨水 - 每个文字元素按其背后实际渲染亮度独立切换深/浅色，带滞回防抖。
• ⚡️ 空闲 0% CPU - 渲染循环无事时完全停车。

**EN**

• 🪟 True transparency + true refraction - The whole window is one WebGL-rendered sheet of frosted glass