在实际前端开发中我们经常需要将设计稿中那些惊艳的视觉效果转化为可用的代码。Apple 的 Liquid Glass液态玻璃设计语言以其独特的毛玻璃模糊、半透明渐变和动态光泽感成为了许多开发者想要复现的 UI 风格。然而手动编写这些复杂的 CSS 效果尤其是确保其跨浏览器兼容性和响应式适配往往需要耗费大量时间。Claude Code 作为一个强大的 AI 编程助手其 Skill 功能允许我们创建可复用的代码生成模板。本文将介绍如何创建一个名为LiquidGlassSkill的 Claude Skill它能够根据简单的描述快速生成符合 Apple Liquid Glass 风格的 CSS 代码片段。通过这个 Skill开发者可以专注于业务逻辑而将复杂的样式实现交给 AI 自动化完成。1. 理解 Apple Liquid Glass 的 CSS 核心特征在动手创建 Skill 之前我们必须先拆解 Liquid Glass 风格在 CSS 层面的具体表现。这不仅仅是backdrop-filter: blur()而是一套组合拳。1.1 核心视觉要素Liquid Glass 效果通常包含以下几个层次背景模糊与半透明这是最显著的特征使用backdrop-filter: blur()对元素背后的内容进行高斯模糊同时配合background-color: rgba(255, 255, 255, 0.1)或hsla实现半透明底色。渐变光泽与边框在模糊层之上常有一层微妙的线性或径向渐变模拟玻璃表面的反光。同时一个极细的、半透明的边框 (border: 1px solid rgba(255, 255, 255, 0.1)) 用于勾勒边缘增强立体感。阴影与深度使用多层、柔和的box-shadow来营造悬浮感和深度。阴影颜色通常非常淡且带有扩散效果。圆角圆润的边角 (border-radius) 是“液态”感的重要来源通常采用中等或较大的圆角值。1.2 关键 CSS 属性与技术考量为了实现上述效果我们需要熟练掌握以下属性属性作用Liquid Glass 应用要点backdrop-filter对元素背后区域应用图形效果如模糊。核心属性。值常用blur(20px)、blur(40px)。需注意浏览器支持度和性能。background设置背景颜色或渐变。使用rgba()或hsla()设置极低不透明度的颜色。可叠加linear-gradient创造光泽。box-shadow添加一个或多个阴影。使用多层阴影例如0 8px 32px rgba(0, 0, 0, 0.1)和inset阴影组合。border设置边框。使用1px solid rgba(255, 255, 255, 0.08)这类极细、极淡的边框。border-radius设置圆角。常用12px、16px、24px等值营造柔和感。-webkit-backdrop-filterbackdrop-filter的 WebKit 前缀。为兼容 Safari 等浏览器通常需要与标准属性一起声明。注意backdrop-filter是一个相对消耗性能的属性尤其是在大面积或动态应用时。在滚动或动画频繁的元素上使用需谨慎并做好性能测试。2. 创建 LiquidGlassSkill 的环境与结构Claude Code Skill 本质上是一个包含提示词Prompt和示例Examples的配置文件用于指导 Claude 如何生成特定类型的代码。我们将在 Claude Code 的 Skill 管理界面中创建它。2.1 技能定义与元信息首先我们需要规划 Skill 的基本信息这决定了 Claude 如何理解和使用这个技能。技能名称LiquidGlassSkill技能描述生成符合 Apple Liquid Glass 设计语言的 CSS 代码片段。支持按钮、卡片、导航栏、输入框等组件并考虑响应式与浏览器兼容性。触发关键词可以设置为liquidglass,glassmorphism,毛玻璃,液态玻璃。当用户在聊天中输入这些词时Claude 会倾向于调用此技能。技能类型选择“代码生成”或“通用”。2.2 核心提示词Prompt设计提示词是 Skill 的灵魂它需要清晰地告诉 Claude任务是什么生成 Liquid Glass CSS。输入是什么用户对 UI 元素的描述。输出格式是什么纯 CSS 代码块附带必要解释。风格要求是什么遵循 Apple Liquid Glass 的设计原则。技术约束是什么考虑兼容性、性能。一个基础的提示词框架如下你是一个专业的 CSS 工程师擅长实现 Apple 的 Liquid Glass液态玻璃UI 风格。 当用户请求创建具有 Liquid Glass 效果的 UI 元素时请根据以下规则生成 CSS 代码 1. **核心样式** - 必须使用 backdrop-filter: blur(20px) 并附带 -webkit-backdrop-filter 前缀以实现兼容性。 - 背景色使用半透明的白色或黑色例如 background: rgba(255, 255, 255, 0.1)。根据用户描述的“深色/浅色模式”调整。 - 添加一个微妙的、半透明的边框如 border: 1px solid rgba(255, 255, 255, 0.08)。 - 使用 border-radius 创建圆角典型值为 12px 或 16px。 - 应用多层柔和的 box-shadow 来增加深度例如 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)。 2. **输出格式** - 首先生成一个完整的、可立即使用的 CSS 类例如 .liquid-glass-card。 - 在 CSS 代码块中包含所有必要的属性并添加清晰的注释说明每个部分的作用。 - 在代码块后简要解释关键属性及其在实现 Liquid Glass 效果中的作用。 3. **用户输入处理** - 如果用户描述了一个具体的元素如“一个登录卡片”、“一个浮动按钮”请生成针对该元素的 CSS。 - 如果用户提到了“深色模式”请将背景和边框颜色调整为深色系半透明如 rgba(0, 0, 0, 0.2)。 - 如果用户要求“更强烈的模糊”或“更明显的边框”请相应调整 blur() 值和颜色透明度。 请现在开始根据用户的请求生成 CSS 代码。2.3 提供示例Examples示例用于“训练”Claude让它更准确地理解输入和输出的对应关系。我们需要提供几个高质量的对话示例。示例 1基础卡片用户输入创建一个具有液态玻璃效果的卡片样式。助手输出/* Liquid Glass 卡片样式 */ .liquid-glass-card { /* 核心模糊与半透明背景 */ background: rgba(255, 255, 255, 0.1); /* 浅色半透明背景 */ backdrop-filter: blur(20px); /* 背景模糊 */ -webkit-backdrop-filter: blur(20px); /* Safari 支持 */ /* 边框与形状 */ border: 1px solid rgba(255, 255, 255, 0.08); /* 极细的发光边框 */ border-radius: 16px; /* 圆润的边角 */ /* 阴影与深度 */ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), /* 外部柔和阴影 */ inset 0 1px 0 rgba(255, 255, 255, 0.1); /* 内部顶部高光增强玻璃质感 */ /* 内边距确保内容不贴边 */ padding: 24px; } /* 深色模式适配 */ media (prefers-color-scheme: dark) { .liquid-glass-card { background: rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.05); } }解释此样式通过backdrop-filter实现毛玻璃模糊半透明背景和边框塑造玻璃的通透感多层box-shadow和圆角则共同营造出轻盈、悬浮的“液态”视觉效果。CSS 变量和媒体查询为深色模式提供了自动适配。示例 2浮动操作按钮用户输入为深色模式下的一个圆形浮动按钮添加液态玻璃效果要有一点光泽感。助手输出/* 深色模式液态玻璃浮动按钮 */ .liquid-glass-fab { /* 核心样式 */ background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; /* 圆形 */ /* 光泽感渐变 */ background-image: radial-gradient( circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60% ); /* 强烈的深度阴影 */ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); /* 尺寸与布局 */ width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; /* 添加交互反馈 */ } /* 悬停状态 */ .liquid-glass-fab:hover { background: rgba(0, 0, 0, 0.3); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }解释这个按钮通过border-radius: 50%实现圆形radial-gradient创造了中心向外的光泽感。更深的背景色和更强烈的阴影适配了深色模式。悬停状态的微调增强了交互性。3. 在 Claude Code 中实现并测试 Skill有了清晰的规划和示例我们就可以在 Claude Code 中创建这个 Skill 了。3.1 创建新 Skill打开 Claude Code无论是桌面应用、VS Code 扩展还是 Web 版。找到 Skill 或自定义指令的管理界面。这通常在设置 (Settings) 或工作区 (Workspace) 中。点击“创建新 Skill”或类似按钮。填写我们在2.1中定义的技能名称、描述和触发关键词。在“Prompt”或“Instructions”区域粘贴我们在2.2中设计好的核心提示词。在“Examples”或“Conversations”区域添加我们在2.3中准备的两个或多个示例对话。3.2 测试与迭代创建完成后立即进行测试是至关重要的。测试用例 1生成导航栏样式输入liquidglass 帮我生成一个顶部导航栏的样式要浅色系的。预期输出Claude 应该生成一个包含.liquid-glass-navbar类的 CSS具有适当的padding、display: flex布局并使用浅色系的半透明背景。你应该检查backdrop-filter、边框和阴影是否齐全。测试用例 2处理特定请求输入创建一个输入框要有液态玻璃效果边框稍微明显一点。预期输出Claude 生成的 CSS 中border的透明度应该比默认示例更高例如rgba(255,255,255,0.15)并且可能针对:focus状态有样式增强。如果测试结果不理想比如生成的代码缺少关键属性或者风格不符合预期你需要回到 Skill 编辑界面优化提示词在提示词中更明确地强调必须包含的属性或对某些效果如“光泽感”给出更具体的描述。增加或修改示例添加一个针对“输入框”或“导航栏”的新示例展示更精确的输出。调整触发词确保触发词能有效关联到用户的请求。4. 高级技巧让 LiquidGlassSkill 更强大一个基础的 Skill 可以工作但一个强大的 Skill 应该能处理更复杂、更精细的需求。4.1 引入 CSS 自定义属性变量为了让生成的代码更灵活、易于主题化可以教导 Claude 使用 CSS 变量。在提示词中添加如果可能请使用 CSS 自定义属性变量来定义颜色、模糊度和圆角以便于整体主题切换。例如 :root { --glass-bg-light: rgba(255, 255, 255, 0.1); --glass-bg-dark: rgba(0, 0, 0, 0.2); --glass-blur: 20px; --glass-radius: 16px; --glass-border: 1px solid rgba(255, 255, 255, 0.08); }对应的示例输出应更新为.liquid-glass-card { background: var(--glass-bg-light, rgba(255, 255, 255, 0.1)); backdrop-filter: blur(var(--glass-blur, 20px)); -webkit-backdrop-filter: blur(var(--glass-blur, 20px)); border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.08)); border-radius: var(--glass-radius, 16px); /* ... 其他样式 ... */ }4.2 生成配套的 JavaScript 交互逻辑Liquid Glass 效果常与交互结合。我们可以扩展 Skill使其在生成 CSS 的同时也能提供简单的 JS 交互代码片段。在提示词中补充如果用户请求“交互式”或“动态”的液态玻璃效果如滚动时模糊度变化、点击产生涟漪在提供 CSS 后额外提供一个简单的 JavaScript 代码片段用于实现该交互。使用现代、简洁的语法如 addEventListener。示例用户输入创建一个按钮点击时有液态玻璃涟漪效果。期望的助手输出除了 CSS还应包含一段 JS监听按钮点击事件动态创建并动画化一个代表涟漪的div元素。4.3 处理常见兼容性与性能问题在提示词中加入“避坑指南”让 Claude 生成的代码更健壮。重要技术提示 - 兼容性始终为 backdrop-filter 提供 -webkit- 前缀以支持 Safari。 - 降级方案考虑在不支持 backdrop-filter 的浏览器中可通过 supports not (backdrop-filter: blur(1px)) 检测提供一个纯色半透明背景作为降级。 - 性能提醒用户过度使用或在高频动画元素上使用 backdrop-filter 可能导致性能问题。建议在 transform 和 opacity 之外的元素上谨慎使用。5. 实际应用与效果验证创建好 Skill 后我们可以在真实项目中进行应用测试。5.1 在 HTML 中应用生成的 CSS向 Claude 提问liquidglass 生成一个登录表单容器的样式。将 Claude 生成的 CSS 代码块复制到你的项目的样式文件如styles.css中。在 HTML 中为登录表单容器添加对应的类名例如div classliquid-glass-login-form。确保你的 HTML 结构有一个足够复杂的背景如图片或渐变这样backdrop-filter的模糊效果才能被观察到。5.2 验证与调试打开浏览器开发者工具检查元素计算样式确认backdrop-filter、background等属性已正确应用。渲染性能在 Chrome DevTools 的Performance面板中录制页面交互查看是否有因backdrop-filter导致的严重布局重绘或抖动。浏览器兼容性在 Safari、Firefox 等不同浏览器中查看效果。使用supports规则验证降级方案是否生效。5.3 常见问题排查即使使用了 Skill在实际集成中也可能遇到问题。下面是一个快速排查表问题现象可能原因检查与解决方案模糊效果完全不显示1. 浏览器不支持。2. 元素背景为不透明。3. 元素或其祖先设置了transform、filter等创建了新层叠上下文的属性导致模糊对象错误。1. 检查浏览器兼容性并确认已添加-webkit-前缀。2. 确保background是半透明的如rgba(255,255,255,0.1)。3. 在开发者工具中检查元素层叠上下文尝试调整z-index或isolation属性。效果在 Safari 上异常Safari 对backdrop-filter的实现可能有特定限制或 bug。尝试降低blur()值。确保元素没有设置overflow: hidden在某些版本下会影响效果。查阅最新的 Safari 兼容性文档。滚动时性能卡顿backdrop-filter应用于一个较大或频繁重绘的区域。1.优化尽可能缩小应用该效果的元素面积。2.替代对于固定位置的元素如导航栏考虑使用静态的模糊背景图片替代动态模糊。3.检测使用will-change: backdrop-filter谨慎优化需测试效果。深色/浅色模式切换无效媒体查询media (prefers-color-scheme: dark)依赖于系统设置或 CSS 变量未正确覆盖。1. 在操作系统或浏览器中切换主题模式进行测试。2. 检查 CSS 变量在:root下的定义确保媒体查询内的变量值正确覆盖了默认值。6. 最佳实践与扩展方向为了让LiquidGlassSkill产出的代码质量更高并在项目中发挥更大作用请遵循以下实践。6.1 使用 Skill 的最佳实践描述具体化向 Claude 提出请求时越具体越好。例如“为一个音乐播放器的进度条滑块创建液态玻璃效果”比“创建一个滑块样式”能得到更贴切的代码。迭代优化不要期望一次生成完美代码。可以将 Claude 的初次输出作为基础然后提出修改要求如“模糊度增加到 30px”或“添加一个悬停时背景变亮的效果”。代码审查始终将 AI 生成的代码视为“初稿”。将其集成到项目前进行人工审查确保其符合项目的代码规范、性能要求和浏览器兼容性目标。6.2 扩展 Skill 的更多可能性当前的LiquidGlassSkill专注于 CSS 生成。你可以以此为起点创建一系列相关的技能构建你的前端 AI 助手工具链LiquidGlassTailwindSkill专门生成 Tailwind CSS 配置或类名用于在 Tailwind 项目中快速实现液态玻璃效果。LiquidGlassReactSkill生成 React 组件代码如一个GlassCard组件包含样式CSS-in-JS 或 CSS Modules和基本的 Props 接口。UIFigmaToLiquidGlassSkill根据对 Figma 设计属性的描述如颜色值、阴影参数自动转换为对应的 Liquid Glass CSS 代码。通过创建和维护这样一组技能你可以将重复性的样式实现工作极大程度自动化从而将更多精力投入到更复杂的业务逻辑和交互设计中。记住AI 技能的价值在于将你的领域知识对 Liquid Glass 的理解转化为可重复执行的自动化流程它是你经验和效率的延伸。