跳到正文
cccskills
免费在 GitHub 公开

liquid-glass-ui-design

Design and implement authentic Apple Liquid Glass UI and physics-based optical glass controls on the web. Covers multi-pass refractive shaders, SDF displacement maps, chromatic dispersion, specular highlight arcs, spring-physics transitions, and Apple HIG design principles for glass materials.

中文简介正在准备中。当前显示原文说明。

wmasfoe/md-editor星标 40(GitHub 40 + cccskills 0)

实测评分 未实测

查看安装方法

包含的文件(1)

  • SKILL.md1.6 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Liquid Glass UI Design Skill

1. Core Principles (Apple HIG & Physics-Based Glass)

  1. Physical Authenticity: Real glass bends light, refracts content, disperses RGB wavelengths at the contour, and reflects environment highlights. It is never just a flat translucent white rectangle or Gaussian blur.
  2. Hierarchy & Purpose: Glass is for interactive controls, floating toolbars, and navigation chrome, not heavy text body backgrounds.
  3. Multi-Layer Optical Anatomy:
    • Layer 1: Ambient Track / Environment: Soft translucent backing with high saturation boost (saturate(180~200%)).
    • Layer 2: SDF Refraction Lens: Physical coordinate displacement (feDisplacementMap / SDF shader) with RGB chromatic aberration.
    • Layer 3: Specular Highlight Rim: Top 1~1.5px pure white diamond highlight arc capturing directional ambient light.
    • Layer 4: Interactive Floating Shadow: Soft ambient contact shadow + deep floating elevation shadow when lifted/dragged.
  4. Motion & Fluid Interaction:
    • Motion uses Apple fluid deceleration curves (cubic-bezier(0.16, 1, 0.3, 1) or underdamped springs).
    • Touch/drag lifts the glass droplet with subtle scale (1.02~1.04x) and deeper elevation shadow.
    • Transitions glide smoothly between discrete anchor positions rather than jumping.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

[OMX] Run an anti-slop cleanup/refactor/deslop workflow

中文简介正在准备中。当前显示原文说明。

wmasfoe/md-editor402026年10月28日 更新

analyze

免费

[OMX] Run read-only deep repository analysis and return a ranked synthesis with explicit confidence, concrete file references, and clear evidence-vs-inference boundaries. Use when a user says 'analyze', 'investigate', 'why does', 'what's causing', or needs grounded cross-file explanation before any changes are proposed.

中文简介正在准备中。当前显示原文说明。

wmasfoe/md-editor402026年10月28日 更新

ask

免费

[OMX] Ask a local external advisor CLI (Claude or Gemini) and capture a reusable artifact

中文简介正在准备中。当前显示原文说明。

wmasfoe/md-editor402026年10月28日 更新

autopilot

免费

[OMX] Strict autonomous loop: $deep-interview -> $ralplan -> $ultragoal (+ $team if needed) -> $code-review -> $ultraqa

中文简介正在准备中。当前显示原文说明。

wmasfoe/md-editor402026年10月28日 更新

[OMX] Stateful validator-gated research loop with native-hook persistence

中文简介正在准备中。当前显示原文说明。

wmasfoe/md-editor402026年10月28日 更新

[OMX] Durable professor-critic research workflow over Codex goal mode without reviving deprecated omx autoresearch

中文简介正在准备中。当前显示原文说明。

wmasfoe/md-editor402026年10月28日 更新

查看 wmasfoe 的全部技能

报告此技能的问题