生活与工具
#design
glassmorphism
Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.
DeepseekModel
官方收录技能
质量 优秀 · 90
v1.0.0
获取
https://deepseekmodel.com/api/download.php?id=fengshao1227-ccg-workflow-templates-skills-domains-frontend-design-glassmorphism-skill-md&format=skill
下载 .skill
标准格式，含 system_prompt 与 model_config，导入任意 Agent 框架即可使用
.skill 文件中 system_prompt 字段的实际内容。
name glassmorphism description Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects. license MIT user-invocable false disable-model-invocation false Glassmorphism Design Spec 4 Core Elements Transparency — Semi-transparent backgrounds using rgba() or hsla() with alpha 0.05–0.4 Blur — backdrop-filter: blur() ranging 8–40px for frosted-glass effect Border — Subtle semi-transparent borders ( 1px solid rgba(255,255,255,0.18) ) to define edges Shadow — Soft layered box-shadow for depth separation from background CSS Tokens Reference: references/tokens.css Use CSS custom properties from tokens.css for consistent theming: @import 'references/tokens.css' ; .glass-card { background : var (--glass-bg); backdrop-filter : var (--glass-blur); -webkit- backdrop-filter : var (--glass-blur); border : var (--glass-border); border-radius : var (--glass-radius); box-shadow : var (--glass-shadow); } Component Examples Card .glass-card { background : var (--glass-bg); backdrop-filter : var (--glass-blur); -webkit- backdrop-filter : var (--glass-blur); border : var (--glass-border); border-radius : var (--glass-radius); box-shadow : var (--glass-shadow); padding : 1.5rem ; } Navbar .glass-nav { background : var (--glass-bg-heavy); backdrop-filter : var (--glass-blur-strong); -webkit- backdrop-filter : var (--glass-blur-strong); border-bottom : var (--glass-border); box-shadow : var (--glass-shadow); position : sticky; top : 0 ; z-index : 100 ; } Modal Overlay .glass-modal-backdrop { background : rgba ( 0 , 0 , 0 , 0.4 ); backdrop-filter : blur ( 4px ); } .glass-modal { background : var (--glass-bg-heavy); backdrop-filter : var (--glass-blur-strong); -webkit- backdrop-filter : var (--glass-blur-strong); border : var (--glass-border); border-radius : var (--glass-radius-lg); box-shadow : var (--glass-shadow-elevated); } Button .glass-btn { background : var (--glass-bg-light); backdrop-filter : var (--glass-blur-light); -webkit- backdrop-filter : var (--glass-blur-light); border : var (--glass-border); border-radius : var (--glass-radius); transition : background 0.2s ; } .glass-btn :hover { background : var (--glass-bg); } Browser Compatibility Feature Chrome Firefox Safari Edge backdrop-filter 76+ 103+ 9+ ( -webkit- ) 79+ rgba() backgrounds All All All All Always include -webkit-backdrop-filter for Safari support Firefox <103: use @supports fallback with solid semi-transparent bg Fallback pattern: .glass-card { background : rgba ( 255 , 255 , 255 , 0.85 ); /* fallback */ } @supports ( backdrop-filter : blur( 1px )) { .glass-card { background : var (--glass-bg); backdrop-filter : var (--glass-blur); } } Accessibility Notes Ensure contrast ratio ≥ 4.5:1 for text over glass surfaces — test against all possible backgrounds Provide prefers-reduced-transparency media query to disable blur/transparency for users who need it Avoid placing critical text on highly transparent surfaces without a fallback Use prefers-contrast: more to increase border opacity and reduce transparency @media ( prefers-reduced-transparency : reduce) { .glass-card { background : rgba ( 255 , 255 , 255 , 0.92 ); backdrop-filter : none; } } @media ( prefers-contrast : more) { .glass-card { background : rgba ( 255 , 255 , 255 , 0.85 ); border : 1px solid rgba ( 0 , 0 , 0 , 0.3 ); } }
Agent 识别该技能的关键词，点击任意一个即可复制。
该技能未提供触发词。
下载的 .skill 包内含以下字段。
| 字段 | 说明 |
|---|---|
| format | 格式标识（skill/v1） |
| skill_id | 技能唯一 ID |
| name | 技能名称 |
| version | 版本号 |
| description | 技能描述 |
| category | 所属分类（数组） |
| trigger_words | 触发词列表 |
| tags | 标签列表 |
| source | 来源标识 |
| source_url | 来源链接（本页地址） |
| exported_at | 导出时间（每次下载生成） |
| system_prompt | 系统提示词正文 |
| model_config | 模型参数：provider / model / temperature / max_tokens / top_p |
| examples | 示例 |
| install_guide | 各平台导入说明（Coze / Dify / Claude / 自定义框架） |
