Eclat design

Skill TbusOS/sky-skills/skills/eclat-design

产品发布会 / keynote 风格的 HTML 页面生成 —— 近黑哑光画布 + 满屏巨字 + 聚光/地面反射 + 单一 flare 高光 + 产品 hero(SVG 抽象或真渲染图)+ 满屏"时刻"叙事。暗调电影感,克制如熄了灯的发布厅。TRIGGER 当用户提到发布会 / 产品发布 / keynote / 新品发布 / 苹果发布会风格 / launch event / product launch / 暗调电影感发布页 / "one more thing" 风格时使用。DO NOT TRIGGER:玻璃拟态/aurora(用 glass)、会议室/商务汇报 deck(用 lectern)、浅白消费极简官网(用 apple)。From its SKILL.md

Install

npx -y skills add TbusOS/sky-skills --skill eclat-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

5.3 KB, as published. Nobody here has run it

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,别硬塞。