菜单
Apple 液态玻璃 / aurora glassmorphism 风格的 HTML 页面生成。深藏青暗底 + 彩色光晕背景 + 三层毛玻璃面板 + 富 JS 动画(滚动浮现 / count-up / 3D tilt / SVG path-draw),dark/light 双主题。TRIGGER 当用户提到 glass 风格 / 玻璃拟态 / glassmorphism / 液态玻璃 / liquid glass / aurora 风格 / 炫酷暗色展示页 / 玻璃卡片图表展示时使用。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | glass-design |
| description | Apple 液态玻璃 / aurora glassmorphism 风格的 HTML 页面生成。深藏青暗底 + 彩色光晕背景 + 三层毛玻璃面板 + 富 JS 动画(滚动浮现 / count-up / 3D tilt / SVG path-draw),dark/light 双主题。TRIGGER 当用户提到 glass 风格 / 玻璃拟态 / glassmorphism / 液态玻璃 / liquid glass / aurora 风格 / 炫酷暗色展示页 / 玻璃卡片图表展示时使用。 |
| last-verified | "2026-06-11T00:00:00.000Z" |
生成 Apple 液态玻璃质感的 HTML 页面:深藏青画布上最多 3 个 aurora 光晕,三层毛玻璃面板承载内容,唯一的前景彩色是实心 cyan。自带完整动画体系(全部可冻结,审查脚本确定性渲染)。最适合图表 / 图示 / 数据类内容的"炫酷"展示。 Generates Apple liquid-glass HTML: aurora light blobs on a deep-navy canvas, three tiers of frosted panels, one solid foreground accent (cyan), and a fully freezable motion system. Built for showing diagrams, charts and data with maximum visual impact.
assets/fonts.css + assets/glass.css + assets/glass.js(动画引擎,<script src> 放 </body> 前)。<html data-theme="dark"> → .glass-aurora(光晕层)→ .glass-nav → 内容 section → .glass-footer。glass- 前缀 class;页面局部样式用无前缀 class 写在页内 <style>(verify.py 只校验 glass-* 是否定义于 CSS)。data-reveal / data-count-to / data-tilt / data-draw / data-parallax。references/glass-material.md(材质配方)和 references/dos-and-donts.md(品位边界),再复制 canonical 起步。glass 风格 / glassmorphism / 玻璃拟态 / 液态玻璃 / liquid glass / aurora / frosted glass / 毛玻璃 / 炫酷暗色 / glass style
references/glass-material.md — 三层材质配方 + aurora 体系 + 折射环(skill 的物理学)references/design-tokens.md — 双主题 token 全表references/dos-and-donts.md — 品位边界(aurora ≠ AI slop 的那条线)references/motion.md — 7 种动画 + 冻结契约(截图检查依赖)references/typography.md — Space Grotesk / Inter / JetBrains Mono / Noto Sans SC 字号表references/layout-patterns.md — 容器档位 + 区块节奏references/diagram-craft.md — 暗玻璃 SVG 图示工艺(双主题 SVG 必须 token 化)references/data-display.md — count-up 统计 + 图表配方references/components.md — 组件清单references/canonical/ — 对应页型的 canonical html + md 成对读生成前:
~/.claude/skills/design-review/dr-cli --plan --skill=glass --page=<type>
读完 contract + 对应 canonical 再动手。
生成后:页内 </body> 前 embed design-review:self-diff v1 注释块(§M 契约,canonical 必须)。然后跑四道检查:
~/.claude/skills/design-review/dr-cli --skill=glass <your-page.html> # 三道机械检查 · 自动 dark+light 双跑
~/.claude/skills/design-review/dr-cli --skill=glass --critic <your-page.html> # 第四道检查 · LLM critic
任一 error = 任务没完成。critic < 75 必修;canonical 自回归 ≥ 90。
<html data-theme="dark"> 必须显式声明(verify 8c);公开页必须有 .glass-theme-toggle。三道机械检查对 glass 自动跑 dark + light 两遍,两遍都要 0 error。html.js-enabled:not([data-motion="off"]) 后面(裸写 opacity:0 会被 glass-reveal-stuck 检查报);count-up 终值必须写在 markup 文本里(glass-countup-mismatch 检查)。.glass-panel/.glass-card/.glass-overlay 内,要么落在无 blob 核的纯画布区;blob 核照亮的区域只允许 ≥32px 全不透明 display 文字(h1 / pull-quote)。#A78BFA / pink #F472B6 只活在背景 blob 和 1px 折射环里,一旦做文字 / 图标 / 按钮色就是 AI slop(dos-and-donts 第一条)。var(--glass-accent-ink)(自动切 #0E7490);手写 cyan hex 在白底 1.6:1 必挂 contrast 检查。--glass-button-ink 深字。白字在 cyan 上 1.9:1,禁。.glass-svg-* 类或 style="fill:var(--glass-*)";写死白色 fill 在 light 模式下隐形。cyan #22D3EE 主题恒定,可以写死。<html data-no-liquid>;页面放 .glass-cursor-toggle 按钮可让访客切水珠/系统光标(localStorage sky-cursor 持久);<html data-water-refr data-water-tint> 调折射强度/水色;水流的折射层默认关(实测它让叠满毛玻璃面板的页面 60→27fps,canvas 光效层的水流照常可见,主珠真折射透镜保留),演示页可用 <html data-water-trail-refr> 开启(带自动降级兜底)。pointer-events:none(.glass-aurora 自带;自己加装饰层时记得)— glass-cta-obstructed 检查报点击遮挡。Render HTML/CSS in anthropic.com visual aesthetic — warm cream background (#faf9f5), Poppins headings + Lora serif body, orange accent (#d97757) for CTAs and emphasis, rounded filled pill buttons, editorial card grids, abstract SVG illustrations, low-saturation data visualizations (soft blue/gray/teal), hand-drawn SVG architecture diagrams with orange/blue/green node categorization and diamond decision gates. TRIGGER when the user says 'anthropic 风格' / 'anthropic style' / 'claude 官网风格' / 'Anthropic 品牌', or asks for an editorial/long-form page, research article layout, pricing card grid, or a filled-button-with-warmth feel. DO NOT TRIGGER for generic 'beautiful web page' requests (use frontend-design) or Apple aesthetic (use apple-design).
Render HTML/CSS in apple.com visual aesthetic — white/pale-gray alternating sections, SF Pro typography, minimal text links (no filled buttons except Buy CTA), large statistic callouts, product-photography-driven layout, isometric infographics, hand-drawn SVG flow/architecture diagrams. TRIGGER when the user says 'apple 风格' / 'apple style' / '苹果官网风格' / 'like apple.com', or asks to design a landing page / slide / doc / diagram / spec page / configurator matching Apple's web look. DO NOT TRIGGER for native iOS/macOS UI (use an Apple HIG skill instead).
Independent evaluator for any design-skill output (anthropic-design / apple-design / ember-design / sage-design / glass-design). TRIGGER when a demo / template / landing page has just been written with one of the 5 design skills and is about to be shipped. Runs four gates — structural verify (placeholders, BEM, undefined classes, bilingual toggles), rendered visual-audit (contrast, hero diagram sizing, orphan cards, SVG text, 26 known-bugs), full-page screenshot, and LLM taste judgment (solo design-critic or 4 parallel specialists — composition / copy / illustration / brand). Pairs with design-learner to codify every critic miss so the same bug is never caught twice. Inspired by GAN's discriminator: this skill deliberately lives outside the generator skills so the reviewer does not inherit the generator's assumptions.
产品发布会 / keynote 风格的 HTML 页面生成 —— 近黑哑光画布 + 满屏巨字 + 聚光/地面反射 + 单一 flare 高光 + 产品 hero(SVG 抽象或真渲染图)+ 满屏"时刻"叙事。暗调电影感,克制如熄了灯的发布厅。TRIGGER 当用户提到 发布会 / 产品发布 / keynote / 新品发布 / 苹果发布会风格 / launch event / product launch / 暗调电影感发布页 / "one more thing" 风格时使用。DO NOT TRIGGER:玻璃拟态/aurora(用 glass)、会议室/商务汇报 deck(用 lectern)、浅白消费极简官网(用 apple)。
Render HTML/CSS in a handcraft-editorial aesthetic — warm cream background (#fff2df), deep chocolate text (#312520), rich brown CTAs (#492d22), gold accent (#c49464), Fraunces display serif + Inter body + IBM Plex Mono. Evokes artisan brands (Aesop / Kinfolk / boutique hotels / literary journals / small-batch coffee). TRIGGER when the user says 'ember 风格' / 'ember style' / '暖棕 / 咖啡 / 手工 / 编辑风格' / 'Aesop style' / 'warm editorial', or asks for a landing page with craft / artisan / heritage / literary warmth. DO NOT TRIGGER for high-tech minimalism (use apple-design) or cream-with-orange (use anthropic-design).
会议室 / 商务汇报 deck 风格的 HTML 页面生成 —— 浅底纸白画布 + 衬线标题 + 结构化议程/章节 + KPI 卡 + 低饱和深蓝图表 + 决议·行动项表 + 状态药丸。对内、商务、数据前置,可信而不喧哗,像一份尊重读者时间的董事会评审。TRIGGER 当用户提到 会议室 / 开会用 / 商务汇报 / 董事会评审 / 业务评审 / 季度汇报 / KPI 汇报 / 决议文档 / board review / boardroom deck / briefing / quarterly review / 内部评审 deck 时使用。DO NOT TRIGGER:产品发布会(用 eclat)、消费极简营销官网(用 apple)、玻璃拟态(用 glass)、长文阅读站(用 sage / anthropic)。