glass-dark-ui

Name: glass-dark-ui
Author: boraoztunc

github.com/boraoztunc设计与 UI43498 次安装11 周前更新

代码仓库

关于 glass-dark-ui

面向设计与前端实现的技能，提供暗色毛玻璃界面的 CSS 配方，从设计令牌到渐变边框和对比度检查。适用于需要实现具体玻璃面板的页面、卡片或模态框。

主要功能

01暗色界面设计令牌
02毛玻璃面板 CSS 配方
03遮罩渐变边框
04对比度与移动端检查

适用场景

01构建带发光边框的暗色 Hero 区
02为仪表盘添加毛玻璃卡片
03将亮色界面改为暗色玻璃风格

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/boraoztunc/skills --skill glass-dark-ui

安装后在 Claude Code 中输入/glass-dark-ui确认已加载。

详细介绍

玻璃暗色 UI 技能

使用场景

深色界面需要磨砂玻璃面板、模糊外壳或渐变／辉光边框。
你需要深色玻璃表面的具体实现——设计令牌、backdrop-filter 配方、遮罩渐变边框和对比度下限。

**如何选择暗色技能：**需要玻璃表面的具体 CSS 时使用此技能。需要确定整个页面的方向——布局外壳、结构元素和强调色规范时，使用 visual-style-presets（dark-glass-workspace 预设）。如果希望通过框架和导轨而非模糊效果来塑造风格，则改用 visual-style-presets（dark-technical-framed）；如果背景本身是动态网格场，则使用 mesh-gradient-dark-blue-clean。

工作流

确认环境（HTML/CSS、Tailwind 或 React）和目标表面（hero、dashboard、modal、card）。
先定义深色 UI 设计令牌（背景、玻璃填充、边框辉光、主文本、弱化文本）。
使用 backdrop-filter、透明深色填充和细微的内侧高光构建磨砂面板。
将遮罩渐变边框（.border-gradient::before）应用于关键表面。
添加适度的景深（阴影 + 辉光），并设置清晰的悬停／焦点状态。
完成前验证对比度和移动设备上的表现。

基础设计令牌

将这些作为默认值，并根据品牌进行调整。

:root {
  --bg-0: #020617;
  --bg-1: #0b1220;
  --glass-fill: rgba(15, 23, 42, 0.45);
  --glass-fill-strong: rgba(15, 23, 42, 0.62);
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #60a5fa;
}

玻璃面板模式

.glass-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  background-color: var(--glass-fill);
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

渐变边框模式

.border-gradient {
  position: relative;
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: linear-gradient(
    145deg,
    rgba(148, 163, 184, 0.28) 0%,
    rgba(96, 165, 250, 0.36) 45%,
    rgba(168, 85, 247, 0.3) 70%,
    rgba(148, 163, 184, 0.18) 100%
  );
  pointer-events: none;
}

Tailwind 用法模式

<section class="relative rounded-3xl border-gradient bg-slate-950/45 backdrop-blur-xl p-8 shadow-[0_20px_48px_rgba(2,6,23,0.45),inset_0_1px_0_rgba(255,255,255,0.12)]">
  <h2 class="text-slate-100 text-2xl font-semibold">Frosted Panel</h2>
  <p class="text-slate-400 mt-2">Dark glass card with masked gradient border.</p>
</section>

暗色模式检查清单

深色玻璃表面上的正文至少使用 #cbd5e1。
避免在模糊效果上叠加纯黑遮罩；改用深海军蓝／炭灰色半透明叠层。
限制辉光的半径／强度，以保证可读性。
确保焦点环清晰可见（使用 outline 或亮色边框状态）。
为不支持模糊效果的环境添加回退方案：使用更不透明的纯色背景（--glass-fill-strong）。

此技能应处理的常见需求

“创建带发光边框卡片的深色玻璃 Hero 区域。”
“将这个明亮的 UI 转换为深色玻璃拟态风格，同时保持对比度。”
“为磨砂玻璃导航栏／卡片／模态框添加渐变边框辉光。”
“使用玻璃面板和细微景深，让我的深色仪表盘更显高级。”

支持 Markdown

登录后评论