Eclat Design — 发布会 / keynote HTML 风格
生成产品发布会质感的 HTML:哑光近黑画布上,产品被聚光从黑暗里打亮、落在有反射的地面上;铺屏的巨字一行一个气口;颜色极度克制 —— 唯一饱和的是冷白聚光、暖橙边光,和一个 flare 高光(CTA + 一颗直播红点)。哑光,不是玻璃:零 backdrop-filter、零 aurora。戏剧来自光、尺度和留白。
Generates product-keynote HTML: a matte near-black stage where the product is lit out of the dark by a spotlight and sits on a reflective floor; full-bleed headlines that each take one breath; colour kept to cool spotlight + warm rim + one flare accent. Matte, never glass.
§1 使用方式
- 引入
assets/fonts.css + assets/eclat.css(eclat 走系统 SF Pro 字栈,不打包 webfont)。
- 页面骨架:
<body class="eclat-body"> → .eclat-nav(绝对定位浮在 hero 上)→ .eclat-hero(满屏,内裹 .eclat-wrap)→ 内容 section(.eclat-wrap 约束宽度)→ .eclat-footer。
- 组件用
eclat- 前缀 class,单连字符(eclat-hero-title,不是 BEM __;修饰符用 --,如 eclat-btn--ghost);页面局部样式用无前缀 class 写在页内 <style>(verify.py 只校验 eclat-* 是否定义于 CSS)。
- hybrid 产品 hero 槽:
.eclat-stage 里默认放 SVG 发光抽象产品;有真渲染图时换成 <img class="eclat-stage-media" src="...">(自有素材、压到 KB 级,见 dos-and-donts)。两条路都过门。
- 双语:每段
<span class="lang-en">…</span><span class="lang-zh">…</span>;nav 放 .lang-toggle 按钮 + 页尾 IIFE 脚本(从 canonical 复制)。
- 先读
references/dos-and-donts.md(品位边界),再复制 references/canonical/<页型>.html 起步。
§2 触发关键词
发布会 / 产品发布 / 新品发布 / keynote / 苹果发布会风格 / 暗调电影感 / "one more thing" / launch event / product launch / unveil / product reveal / eclat 风格
§3 不要用于
- 玻璃拟态 / aurora / 毛玻璃展示页 → 用 glass(eclat 哑光,backdrop-filter 是 glass 的语言)
- 会议室 / 董事会 / 商务汇报 / 内部评审 deck → 用 lectern(eclat 是对外戏剧,不是对内汇报)
- 浅白消费极简官网(apple.com 那种亮调营销)→ 用 apple
- 长文档 / 知识库阅读站 → 用 sage / anthropic(满屏巨字不是阅读语言)
§4 阅读顺序
references/dos-and-donts.md — 品位边界(哑光 vs 玻璃那条线 · flare 单高光 · 巨号金属数字的豁免 · 产品图槽)references/canonical/launch.html + 其它页型 — 对应页型的 canonical(含 self-diff 决策块)- (规划中)
references/typography.md / layout-patterns.md / motion.md
§5 发布前检查(MUST)
~/.claude/skills/design-review/dr-cli --skill=eclat <your-page.html> # 四道机械检查(结构/渲染/可达性/截图)
~/.claude/skills/design-review/dr-cli --skill=eclat --critic <your-page.html> # 再加 LLM critic · 口味评审(四道之外)
任一 error = 任务没完成。canonical 自回归:verify + visual-audit 必须 0 error。页内 </body> 前 embed design-review:self-diff v1 注释块(canonical 必须)。
§6 eclat 专属要点(机器检查 + critic 会抓)
- 哑光铁律:零
backdrop-filter、零 aurora blob。戏剧靠 radial 聚光 + vignette + 地面反射。出现毛玻璃面板 = cross-skill smell(和 glass 撞)。
- 单 flare 高光:
--eclat-flare #ff5b34 只活在 CTA 填充、一颗直播红点(用 flare 本色,别另起第二种红)、至多一个被强调的 hero 数字(.eclat-hl)、产品 UI mock 内的产品自身强调色。其它前景颜色一律来自冷白聚光 / 暖橙边光。第二个 UI 高光色 = 创业公司模板味。
- 巨号金属数字是唯一豁免的文字渐变:
.eclat-bignum(满屏单数字"时刻")可用 linear-gradient 金属填充 —— 这是 keynote 招牌,且是非阅读的装饰字。其它任何文字渐变都禁(是 slop tell)。豁免按 class 锁死。
- 满屏时刻节奏:hero 与 "one more thing" 各占 100vh,一屏一个气口。别把它堆成密集 above-the-fold 落地页(那是通用 SaaS 默认,会丢掉 keynote 调性)。
- 产品 hero 必有:
.eclat-stage 不能空。SVG 抽象物要有真实光影(rim 高光 + 地面反射 + 聚光锥),不是扁平占位图标(扁平笔记本+打钩=slop)。
- never pure #000:画布用
--eclat-ink #040406(暖近黑),纯黑杀掉景深。
- 双语全角标点:zh span 内
,;: 一律全角 ，；：(verify §1.22 抓)。
- 巨字铁律:hero h1 用
clamp(64px, 12.5vw, 176px);4 行以上是灾难,改窄容器 / 小一档 clamp,别硬塞。
1---2name: eclat-design3description: 产品发布会 / keynote 风格的 HTML 页面生成 —— 近黑哑光画布 + 满屏巨字 + 聚光/地面反射 + 单一 flare 高光 + 产品 hero(SVG 抽象或真渲染图)+ 满屏"时刻"叙事。暗调电影感,克制如熄了灯的发布厅。TRIGGER 当用户提到 发布会 / 产品发布 / keynote / 新品发布 / 苹果发布会风格 / launch event / product launch / 暗调电影感发布页 / "one more thing" 风格时使用。DO NOT TRIGGER:玻璃拟态/aurora(用 glass)、会议室/商务汇报 deck(用 lectern)、浅白消费极简官网(用 apple)。4---56# Eclat Design — 发布会 / keynote HTML 风格78生成产品发布会质感的 HTML:哑光近黑画布上,产品被聚光从黑暗里打亮、落在有反射的地面上;铺屏的巨字一行一个气口;颜色极度克制 —— 唯一饱和的是冷白聚光、暖橙边光,和一个 flare 高光(CTA + 一颗直播红点)。**哑光,不是玻璃**:零 backdrop-filter、零 aurora。戏剧来自光、尺度和留白。9Generates product-keynote HTML: a matte near-black stage where the product is lit out of the dark by a spotlight and sits on a reflective floor; full-bleed headlines that each take one breath; colour kept to cool spotlight + warm rim + one flare accent. Matte, never glass.1011## §1 使用方式12131. 引入 `assets/fonts.css` + `assets/eclat.css`(eclat 走系统 SF Pro 字栈,不打包 webfont)。142. 页面骨架:`<body class="eclat-body">` → `.eclat-nav`(绝对定位浮在 hero 上)→ `.eclat-hero`(满屏,内裹 `.eclat-wrap`)→ 内容 section(`.eclat-wrap` 约束宽度)→ `.eclat-footer`。153. 组件用 `eclat-` 前缀 class,**单连字符**(`eclat-hero-title`,不是 BEM `__`;修饰符用 `--`,如 `eclat-btn--ghost`);页面局部样式用**无前缀** class 写在页内 `<style>`(verify.py 只校验 `eclat-*` 是否定义于 CSS)。164. **hybrid 产品 hero 槽**:`.eclat-stage` 里默认放 SVG 发光抽象产品;有真渲染图时换成 `<img class="eclat-stage-media" src="...">`(自有素材、压到 KB 级,见 dos-and-donts)。两条路都过门。175. 双语:每段 `<span class="lang-en">…</span><span class="lang-zh">…</span>`;nav 放 `.lang-toggle` 按钮 + 页尾 IIFE 脚本(从 canonical 复制)。186. 先读 `references/dos-and-donts.md`(品位边界),再复制 `references/canonical/<页型>.html` 起步。1920## §2 触发关键词2122发布会 / 产品发布 / 新品发布 / keynote / 苹果发布会风格 / 暗调电影感 / "one more thing" / launch event / product launch / unveil / product reveal / eclat 风格2324## §3 不要用于2526- 玻璃拟态 / aurora / 毛玻璃展示页 → 用 **glass**(eclat 哑光,backdrop-filter 是 glass 的语言)27- 会议室 / 董事会 / 商务汇报 / 内部评审 deck → 用 **lectern**(eclat 是对外戏剧,不是对内汇报)28- 浅白消费极简官网(apple.com 那种亮调营销)→ 用 **apple**29- 长文档 / 知识库阅读站 → 用 sage / anthropic(满屏巨字不是阅读语言)3031## §4 阅读顺序32331. `references/dos-and-donts.md` — 品位边界(哑光 vs 玻璃那条线 · flare 单高光 · 巨号金属数字的豁免 · 产品图槽)342. `references/canonical/launch.html` + 其它页型 — 对应页型的 canonical(含 self-diff 决策块)353. (规划中)`references/typography.md` / `layout-patterns.md` / `motion.md`3637## §5 发布前检查(MUST)3839```bash40~/.claude/skills/design-review/dr-cli --skill=eclat <your-page.html> # 四道机械检查(结构/渲染/可达性/截图)41~/.claude/skills/design-review/dr-cli --skill=eclat --critic <your-page.html> # 再加 LLM critic · 口味评审(四道之外)42```4344任一 error = 任务没完成。canonical 自回归:verify + visual-audit 必须 0 error。页内 `</body>` 前 embed `design-review:self-diff v1` 注释块(canonical 必须)。4546## §6 eclat 专属要点(机器检查 + critic 会抓)4748- **哑光铁律**:零 `backdrop-filter`、零 aurora blob。戏剧靠 radial 聚光 + vignette + 地面反射。出现毛玻璃面板 = cross-skill smell(和 glass 撞)。49- **单 flare 高光**:`--eclat-flare #ff5b34` 只活在 CTA 填充、一颗直播红点(用 flare 本色,别另起第二种红)、至多一个被强调的 hero 数字(`.eclat-hl`)、产品 UI mock 内的产品自身强调色。其它前景颜色一律来自冷白聚光 / 暖橙边光。第二个 UI 高光色 = 创业公司模板味。50- **巨号金属数字是唯一豁免的文字渐变**:`.eclat-bignum`(满屏单数字"时刻")可用 `linear-gradient` 金属填充 —— 这是 keynote 招牌,且是**非阅读**的装饰字。其它任何文字渐变都禁(是 slop tell)。豁免按 class 锁死。51- **满屏时刻节奏**:hero 与 "one more thing" 各占 100vh,一屏一个气口。别把它堆成密集 above-the-fold 落地页(那是通用 SaaS 默认,会丢掉 keynote 调性)。52- **产品 hero 必有**:`.eclat-stage` 不能空。SVG 抽象物要有真实光影(rim 高光 + 地面反射 + 聚光锥),不是扁平占位图标(扁平笔记本+打钩=slop)。53- **never pure #000**:画布用 `--eclat-ink #040406`(暖近黑),纯黑杀掉景深。54- **双语全角标点**:zh span 内 `,;:` 一律全角 `，；：`(verify §1.22 抓)。55- **巨字铁律**:hero h1 用 `clamp(64px, 12.5vw, 176px)`;4 行以上是灾难,改窄容器 / 小一档 clamp,别硬塞。
TbusOS