★ FEATURED ARTICLE 【免费下载链接】ccg-workflow多模型协作工作流引擎 — /ccg:go 一个命令AI 自动分析意图、选择策略、编排 Codex Gemini Claude 协作执行项目地址https://gitcode.com/gh_mirrors/cc/ccg-workflow点击查看免费下载Liquid Glass 是 ccg-workflow 前端设计域frontend-design内置的四大设计风格变体之一它借鉴 Apple 设计语言用半透明、景深、折射与环境光响应来构建液体玻璃质感的界面。本文以 liquid-glass/SKILL.md 为主体完整讲解其核心原则、CSS 令牌体系、四类组件模式、深浅色模式与动效规范并对照配套的 references/tokens.css 逐项给出真实默认值同时结合 ccg-workflow 的技能注册与关键词路由机制说明这套规范如何被引擎自动发现并按需注入。读完本文你可以直接拿令牌文件搭建可复制的 Liquid Glass 界面并理解它与其他玻璃拟态风格Glassmorphism的本质差异。文档定位Liquid Glass 在 ccg-workflow 技能体系中的位置在 ccg-workflow 的技能仓库中templates/skills/domains/frontend-design/目录下聚合了完整的前端设计技能其中「Design Style Systems」章节列出四种风格变体风格文档美学特征Claymorphismclaymorphism/SKILL.md软黏土质感、大圆角、双内阴影、错位外阴影Glassmorphismglassmorphism/SKILL.md磨砂玻璃、backdrop-filter、半透明、模糊分层Neubrutalismneubrutalism/SKILL.md粗边框、错位实心阴影、高饱和、小圆角Liquid Glassliquid-glass/SKILL.mdApple 风格半透明景深、弹簧动效、环境光响应Liquid Glass 与经典 Glassmorphism 的区别在于前者强调环境光响应Ambient Response——玻璃色调会随底层内容颜色变化且动效采用弹簧物理曲线模拟真实惯性而后者更偏向磨砂玻璃的静态质感。从技能元数据看frontmatter该技能声明为name: liquid-glass、license: MIT、user-invocable: false即它属于知识型技能knowledge skill不直接生成独立的/ccg:斜杠命令而是作为frontend-design主技能的知识模块在需要时由 Agent 读取其内容后应用。核心原则五条设计支柱Liquid Glass 设计的五条核心原则构成了整套系统的审美根基半透明Translucency—— 表面通过背景模糊backdrop blur透出下层分层内容让层级关系看得见。景深Depth—— 元素悬浮在不同的 z 层级上配合真实感阴影形成空间层次。环境光响应Ambient Response—— 玻璃色调根据底层内容的颜色动态偏移仿佛真实玻璃折射了周围光线。极简镀铬Minimal Chrome—— 边框是克制的边界由形状与模糊来界定而非描边。动效Motion—— 过渡带有物理感基于弹簧的缓动、带惯性的运动。这五条原则直接映射到后面的令牌设计与组件实现半透明对应--lg-bg-*的 rgba 背景景深对应--lg-shadow-*环境光响应对应saturate()饱和度增强极简镀铬对应低透明度边框动效对应--lg-easing-spring。快速使用引入令牌文件在 CSS 中引入 Liquid Glass 令牌文件即可开始使用import references/tokens.css;在 ccg-workflow 仓库中该文件的完整路径为 references/tokens.css。它是一份纯 CSS 自定义属性Design Tokens定义文件不依赖任何构建工具可直接被浏览器解析也方便被各种框架React/Vue/原生复用。CSS 令牌参考逐类解析与真实默认值原文档给出了令牌分类总览而配套的 references/tokens.css 提供了每个令牌的完整定义。以下是按类别拆解后的完整清单数值均来自仓库实际文件模糊与饱和度Blur Saturation令牌默认值用途--lg-blur-sm8px按钮等小面积表面的轻微模糊--lg-blur-md16px卡片等主要表面的标准模糊--lg-blur-lg32px工具栏等大面积表面的强模糊--lg-blur-xl48px模态遮罩等需要强隔离的层级--lg-saturate1.8模糊时的饱和度放大系数环境光响应--lg-saturate: 1.8是实现「环境光响应」的关键backdrop-filter: blur(...) saturate(1.8)会把背景模糊结果额外提饱和让底层色彩透进玻璃表面模拟真实玻璃对光线的折射放大效果。圆角Radius令牌默认值--lg-radius-sm8px--lg-radius-md12px--lg-radius-lg16px--lg-radius-xl24px阴影Shadows令牌默认值层级语义--lg-shadow-subtle0 1px 3px rgba(0,0,0,0.08)贴地/静止--lg-shadow-elevated0 4px 16px rgba(0,0,0,0.1)悬浮/默认抬起--lg-shadow-high0 8px 32px rgba(0,0,0,0.15)高抬升/悬停或模态阴影体系对应「景深」原则层级越高阴影越弥散blur 半径从 3px → 16px → 32px 递增。动画Animation令牌默认值语义--lg-duration-fast150ms即时反馈按压、切换--lg-duration-normal300ms常规状态变化--lg-duration-slow500ms布局级过渡--lg-easing-springcubic-bezier(0.22, 1, 0.36, 1)弹簧缓动曲线--lg-easing-spring: cubic-bezier(0.22, 1, 0.36, 1)属于 quint-out 型指数缓动曲线与 reference/motion-design.md 中推荐的--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1)完全一致——这种曲线起始快、结尾缓慢减速模拟物理世界的惯性是「动效有物理感」原则的具体落地。玻璃背景与边框Light mode 默认值令牌默认值用途--lg-bg-primaryrgba(255,255,255,0.72)卡片等主要玻璃面--lg-bg-elevatedrgba(255,255,255,0.82)更高层级表面模态内容--lg-bg-toolbarrgba(255,255,255,0.65)工具栏/导航条--lg-bg-interactivergba(255,255,255,0.5)可交互元素按钮--lg-bg-pressedrgba(255,255,255,0.35)按压态--lg-bg-scrimrgba(0,0,0,0.25)模态遮罩--lg-border-colorrgba(255,255,255,0.45)主要边框高光边--lg-border-subtlergba(0,0,0,0.06)次要分隔线注意一个细节Liquid Glass 的边框在浅色模式下是白色半透明的rgba(255,255,255,0.45)而非深色描边——这实现了「极简镀铬」原则玻璃边缘由高光定义而非黑线。组件模式四类开箱即用的玻璃组件原文档提供了四类组件模式以下完整继承并结合令牌真实值逐段讲解。玻璃卡片Glass Card.glass-card { background: var(--lg-bg-primary); backdrop-filter: blur(var(--lg-blur-md)); -webkit-backdrop-filter: blur(var(--lg-blur-md)); border: 1px solid var(--lg-border-color); border-radius: var(--lg-radius-lg); box-shadow: var(--lg-shadow-elevated); transition: transform var(--lg-duration-normal) var(--lg-easing-spring); } .glass-card:hover { transform: translateY(-2px); box-shadow: var(--lg-shadow-high); }要点始终成对书写backdrop-filter与-webkit-backdrop-filter保证 Safari需-webkit-前缀与 Chromium/Firefox 行为一致。悬停只动transform和box-shadow不触发重排reflow符合性能最佳实践。悬停时阴影从--lg-shadow-elevated升级到--lg-shadow-high配合 2px 上移营造玻璃被拾起的物理感。玻璃工具栏Glass Toolbar.glass-toolbar { background: var(--lg-bg-toolbar); backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate)); -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate)); border-bottom: 1px solid var(--lg-border-subtle); }工具栏是环境光响应的典型应用saturate(var(--lg-saturate))即 1.8 倍饱和让下方滚动内容以高饱和状态透入工具栏玻璃产生液体折射的观感--lg-blur-lg32px保证大面积表面足够柔和。玻璃按钮Glass Button.glass-btn { background: var(--lg-bg-interactive); backdrop-filter: blur(var(--lg-blur-sm)); border: 1px solid var(--lg-border-color); border-radius: var(--lg-radius-md); transition: all var(--lg-duration-fast) var(--lg-easing-spring); } .glass-btn:active { transform: scale(0.97); background: var(--lg-bg-pressed); }按钮的按压反馈使用scale(0.97)微缩 背景透明度下降--lg-bg-interactive0.5 →--lg-bg-pressed0.35配合--lg-duration-fast150ms的弹簧曲线反馈即时且有弹性。玻璃模态遮罩Glass Modal Overlay.glass-overlay { background: var(--lg-bg-scrim); backdrop-filter: blur(var(--lg-blur-xl)); } .glass-modal { background: var(--lg-bg-elevated); border: 1px solid var(--lg-border-color); border-radius: var(--lg-radius-xl); box-shadow: var(--lg-shadow-high); }遮罩层用--lg-blur-xl48px将背景强烈柔化把注意力聚焦到模态内容上模态本体则使用最不透明的--lg-bg-elevated0.82保证内容可读性配合最高层级阴影--lg-shadow-high完成景深分层。深浅色模式自动切换与子树强制自动跟随系统令牌通过prefers-color-scheme媒体查询自动切换。浅色模式使用白色调玻璃深色模式使用深色调玻璃并加大模糊以保证可读性。深色模式的实际覆盖值见 references/tokens.css令牌浅色默认值深色覆盖值--lg-bg-primaryrgba(255,255,255,0.72)rgba(30,30,30,0.65)--lg-bg-elevatedrgba(255,255,255,0.82)rgba(40,40,40,0.75)--lg-bg-toolbarrgba(255,255,255,0.65)rgba(25,25,25,0.6)--lg-bg-interactivergba(255,255,255,0.5)rgba(255,255,255,0.1)--lg-bg-pressedrgba(255,255,255,0.35)rgba(255,255,255,0.06)--lg-bg-scrimrgba(0,0,0,0.25)rgba(0,0,0,0.5)--lg-border-colorrgba(255,255,255,0.45)rgba(255,255,255,0.12)--lg-border-subtlergba(0,0,0,0.06)rgba(255,255,255,0.06)--lg-shadow-elevated0 4px 16px rgba(0,0,0,0.1)0 4px 16px rgba(0,0,0,0.4)--lg-shadow-high0 8px 32px rgba(0,0,0,0.15)0 8px 32px rgba(0,0,0,0.5)深色模式下阴影显著加深因为深色背景上需要更强阴影才能体现层级可交互元素的玻璃背景改为低透明度白色叠加这是 reference/color-and-contrast.md 中深色模式不是浅色模式反色原则的体现。在子树中强制模式需要局部覆盖系统设置时利用color-scheme属性/* Force a mode on a subtree */ .light-glass { color-scheme: light; } .dark-glass { color-scheme: dark; }给任意容器加上.dark-glass或.light-glass类即可强制其内部包括后代使用指定配色方案适合在同一个页面里混合展示两种模式的预览场景。动效规范弹簧物理感Liquid Glass 的动效围绕弹簧缓动构建。进入动画的标准实现/* Entry */ keyframes glass-enter { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .glass-animate-in { animation: glass-enter var(--lg-duration-normal) var(--lg-easing-spring) both; }设计要点只动画opacity与transform不触碰布局属性避免触发重排。both填充模式让动画开始前先应用from状态防止入场前闪烁。时值遵循 reference/motion-design.md 中的「100/300/500 规则」--lg-duration-fast150ms用于即时反馈--lg-duration-normal300ms用于状态变化--lg-duration-slow500ms用于布局/入场级过渡。曲线cubic-bezier(0.22, 1, 0.36, 1)是 quint-out 指数缓动减速自然避开 bounce/elastic 这类过时曲线。无障碍规范三种系统偏好全覆盖Liquid Glass 技能把无障碍作为硬性要求共有三条对比度玻璃表面上的文本必须保证contrast-ratio ≥ 4.5:1WCAG AA需要针对所有可能的底层背景测试。减少动效尊重prefers-reduced-motion禁用模糊动画退化为仅透明度过渡。高对比偏好提供prefers-contrast: high覆盖将半透明背景替换为实色背景。对应的实现其实已内置在 references/tokens.css 中media (prefers-contrast: high) { :root { --lg-bg-primary: rgba(255,255,255,0.95); --lg-bg-elevated: rgba(255,255,255,0.98); --lg-border-color: rgba(0,0,0,0.3); } } media (prefers-contrast: high) and (prefers-color-scheme: dark) { :root { --lg-bg-primary: rgba(20,20,20,0.95); --lg-bg-elevated: rgba(25,25,25,0.98); --lg-border-color: rgba(255,255,255,0.3); } }同时prefers-reduced-motion: reduce会将三个动效时值令牌全部置为0ms见 tokens.css使所有基于var(--lg-duration-*)的过渡瞬间完成。也就是说只要组件代码全部引用令牌而非硬编码数值减动效支持会自动生效无需额外写媒体查询。另外需要注意对比度管理还应参考同域下的 reference/color-and-contrast.md其中明确指出浅灰文字在白底上是第一号可访问性失败项、占位文本仍需 4.5:1 等细则可用于补充设计时的文本选色。与引擎的集成技能如何被发现与注入Liquid Glass 规范之所以能在 ccg-workflow 工作流中随需而用依赖两套引擎机制技能注册表Skill Registrysrc/utils/skill-registry.ts 会递归扫描templates/skills/下所有SKILL.md解析 frontmatter 中的name/description/user-invocable等元数据。由于liquid-glass声明user-invocable: false它不会被生成为独立斜杠命令而是作为frontend-designuser-invocable: true的知识模块被统一入口统领。对应的约束还被 src/utils/tests/plugin-manifest.test.ts 中的测试固化impeccable 系列 playbook 均不可调用、可调用命令总数不超过 12 个、frontend-design保持唯一可调用的设计入口。关键词路由注入Skill Routertemplates/rules/ccg-skill-routing.md 的「Frontend Design Domain」表中登记了liquid glass触发词指向~/.claude/skills/ccg/domains/frontend-design/liquid-glass/SKILL.md。运行时templates/hooks/skill-router.js 作为UserPromptSubmit钩子截获用户消息对路由表做关键词模糊匹配命中后将技能文件前 120 行注入会话上下文ccg-domain-knowledge块。这意味着当你在对话中说用 liquid glass 风格做一个工具栏时Agent 会自动读到这份规范并按其令牌与组件模式产出代码。安装层面这些技能文件在npx ccg-workflow初始化时被安装到~/.claude/skills/ccg/目录参见 templates/skills/SKILL.md或通过claude plugin marketplace add fengshao1227/ccg-workflow以原生插件方式加载仅技能零依赖。实战落地清单使用 Liquid Glass 设计系统时的最小落地路径将 references/tokens.css 引入项目或按需抽取令牌到自己的 Design Token 体系。从四类组件模式卡片 / 工具栏 / 按钮 / 模态中选择对应模式作为起点组件内一律引用--lg-*令牌禁止硬编码数值。交互状态遵循「只动 transform 与 opacity、时值用--lg-duration-*、曲线用--lg-easing-spring」的规则。无需手写媒体查询——深浅色、高对比、减动效三类系统偏好已由令牌文件自动接管只要组件不绕过令牌即可获得完整适配。文本与玻璃叠加时实测对比度 ≥ 4.5:1参考 reference/color-and-contrast.md 的选色细则。如需与其他玻璃风格做权衡可对照 glassmorphism/SKILL.md后者适合静态磨砂玻璃质感而 Liquid Glass 更强调环境光响应与弹簧物理动效适合希望界面像液体一样流动的高端产品界面。赞分享【免费下载链接】ccg-workflow多模型协作工作流引擎 — /ccg:go 一个命令AI 自动分析意图、选择策略、编排 Codex Gemini Claude 协作执行项目地址https://gitcode.com/gh_mirrors/cc/ccg-workflow点击查看免费下载相关推荐ccg-workflow 中的 Liquid Glass 设计系统从 CSS Token 体系到 Apple 风格玻璃组件实现ccg workflow 中的 Liquid Glass 设计系统从 CSS Token 体系到 Apple 风格玻璃组件实现 ccg workflow 在人工智能AI 应用开发工具CLIAI Agentdsh-pluginDeepSeekccg-workflow 中的 Claymorphism 黏土风设计系统从 CSS 设计令牌到组件落地的完整实现指南ccg workflow 中的 Claymorphism 黏土风设计系统从 CSS 设计令牌到组件落地的完整实现指南 本文以 ccg workflow 仓库中人工智能AI 应用开发工具CLIAI Agentdsh-pluginDeepSeekccg-workflow Glassmorphism 技能基于 CSS Tokens 的毛玻璃 UI 设计系统全解ccg workflow Glassmorphism 技能基于 CSS Tokens 的毛玻璃 UI 设计系统全解 ccg workflow 是多模型协作开人工智能AI 应用开发工具CLIAI Agentdsh-pluginDeepSeek上一篇MAS 激活完全指南十分钟搞定 Windows 与 Office 永久激活下一篇TranslucentTB启动失败如何解决Microsoft.UI.Xaml依赖问题完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
