القائمة
使用伪元素遮罩构建暗色模式的玻璃拟态界面，具备可读的对比度、磨砂面板与渐变边框。当需要玻璃卡片、磨砂暗色主视觉区、模糊面板，或带渐变/发光边框的暗色 UI 系统时使用。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/shushuitie2017/design-agent-skills --skill glass-dark-uiيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
审计工作、用具体证据核验声明，并用五年级生也能懂的简单语言解释结果。当用户要求 review、审计、检查、核验、解释一处改动、解释一处修复、总结测试结果、验证某个东西是否有效，或把技术性发现翻译成给非技术读者看的大白话时使用。
当用户想为任何页面撰写、重写或改进营销文案时使用——包括首页、落地页、定价页、功能页、关于页或产品页。也在用户说"write copy for""improve this copy""rewrite this page""marketing copy""headline help""CTA copy""value proposition""tagline""subheadline""hero section copy""above the fold""this copy is weak""make this more compelling"或"help me describe my product"时使用。只要有人在处理需要说服或转化的网站文本，就用它。邮件文案见 email-sequence；弹窗文案见 popup-cro；编辑已有文案见 copy-editing。
仅起草的 Gmail 客户支持分诊，并为每封草稿创建对应的 Codex 项目线程。当用户要求运行客户邮件自动化、检查未读/最近的支持邮件、准备 Gmail 草稿回复、对客户/个人邮件分诊同时跳过自动化邮件，或为已起草邮件的跟进创建 agent/项目线程时使用。
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | glass-dark-ui |
| description | 使用伪元素遮罩构建暗色模式的玻璃拟态界面，具备可读的对比度、磨砂面板与渐变边框。当需要玻璃卡片、磨砂暗色主视觉区、模糊面板，或带渐变/发光边框的暗色 UI 系统时使用。 |
HTML/CSS、Tailwind 或 React）与目标面板（hero、dashboard、modal、card）。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;
}
<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）。