发布会主题

STYLEKIT_STYLE_REFERENCE
style_name: 发布会主题
style_slug: launch-keynote
style_source: /styles/launch-keynote

# Hard Prompt

## 什么时候用
当你希望 AI 严格按风格规则生成代码时使用。它是生产界面最稳的默认选择。

## 怎么用
- 把完整提示词复制到 ChatGPT、Claude、Cursor 或其他编码助手。
- 在提示词后追加具体产品、页面或组件需求。
- 生成后按禁止项和交互状态检查，确认没有风格漂移。

请严格遵守以下风格规则并保持一致性，禁止风格漂移。

## 执行要求

- 优先保证风格一致性，其次再做创意延展。
- 遇到冲突时以禁止项为最高优先级。
- 输出前自检：颜色、排版、间距、交互是否仍属于该风格。

## Style Rules

# 发布会主题设计系统

你是一位专精于苹果发布会式产品揭幕界面的前端开发专家。生成的所有代码都必须严格遵守以下规范。

## 绝对禁止

- 禁止多彩渐变或第二支强调色（唯一电蓝之外全是黑白灰）
- 禁止在滚动处理器里逐帧读 offsetTop / getBoundingClientRect（layout thrash）
- 禁止页面一载就预载全部 96 帧（必须 IO 懒加载，否则流量灾难）
- 禁止把关键信息烘焙进帧图里（帧可能没加载、reduced-motion 只显一帧）
- 禁止卡片边框、圆角装饰堆砌破坏纯黑舞台的无限深
- 禁止忽略 prefers-reduced-motion 与 devicePixelRatio 封顶

## 必须遵守

- 纯黑 #000000 舞台，无边框无纹理，产品自己发光，留白即张力
- 一屏一产品一句话：每个视口只承载一个主张，滚动是叙事节拍
- 逐帧揭幕：sticky 满屏 canvas 随滚动播放 webp 帧序列，滚动条即播放头
- 帧序列进视口才懒加载（IntersectionObserver），poster 先画防白屏
- 巨字紧字距 hero：系统 SF 级无衬线，clamp ~7rem，tracking -0.03em
- 唯一电蓝 #2997FF 强调：链接/CTA/关键数字；其余黑、近白 #F5F5F7、中灰 #86868B
- 规格用大数字网格呈现，冷静克制可信；显式 aspect-ratio 防 CLS
- prefers-reduced-motion 下静态渲染最终帧、callout 全可见

## 风格身份
- **名称**：Launch Keynote（发布会主题）
- **本质**：页面是一场产品揭幕——纯黑舞台、滚动逐帧擦除的画面序列，一屏只讲一个产品、一句话
- **气质**：高端、电影感、克制，万亿市值公司级别的产品页
- **灵感来源**：apple.com 的产品页、发布会揭幕、旗舰硬件发布

---

## 绝对禁止

| 模式 | 原因 |
|---------|--------|
| 彩虹渐变或第二支强调色 | 唯一的电蓝之外，必须全是黑/白/灰 |
| 在滚动处理器里逐帧读取 offsetTop / getBoundingClientRect | layout thrash（布局抖动） |
| 页面一载就预载全部帧 | 流量灾难；必须通过 IntersectionObserver 懒加载 |
| 把关键信息烘焙进帧图里 | 帧可能没加载；reduced-motion 下只显示一帧 |
| 堆砌卡片边框和圆角装饰 | 破坏纯黑舞台的无限深邃感 |
| 忽略 prefers-reduced-motion 或 devicePixelRatio 封顶 | 无障碍失效、内存爆炸 |

## 必须遵守

### 纯黑舞台 + 唯一电蓝
- 背景恒为 #000000，抬升面 #1D1D1F，文字近白 #F5F5F7，次要文字中灰 #86868B
- 全站只有一支强调色 #2997FF（按下态 #0071E3）：用于链接、CTA、关键规格数字
- 无装饰纹理；留白即戏剧张力；一屏只承载一个产品、一句话

### 招牌技法：滚动逐帧序列
结构 = 一个约 350vh 高的 section，内含一个 sticky top-0 h-screen 的 canvas：
```html
<section class="relative h-[350vh]">
  <div class="sticky top-0 h-screen flex items-center justify-center">
    <canvas aria-hidden="true"></canvas>
  </div>
</section>
```

懒加载（仅在进入视口时预载 96 张 webp 帧）：
```js
const io = new IntersectionObserver(([e]) => {
  if (!e.isIntersecting) return; io.disconnect();
  for (let i = 0; i < 96; i++) {
    const img = new Image();
    img.src = "/frames/frame-" + String(i).padStart(4, "0") + ".webp";
    frames[i] = img;
  }
}, { rootMargin: "50% 0px" });
io.observe(sectionEl);
```

rAF 擦除（每帧只读一次滚动位置）：
```js
let raf = 0;
function draw() {
  raf = 0;
  const rect = sectionEl.getBoundingClientRect();
  const total = rect.height - innerHeight;
  const p = Math.min(1, Math.max(0, -rect.top / total));
  const idx = Math.min(95, Math.floor(p * 95));
  const img = frames[idx];
  if (img && img.complete) paint(canvas, img); // keep last frame if not loaded
}
addEventListener("scroll", () => { if (!raf) raf = requestAnimationFrame(draw); }, { passive: true });
```

canvas 尺寸（感知 devicePixelRatio，封顶 2）：
```js
const dpr = Math.min(2, devicePixelRatio || 1);
canvas.width = w * dpr; canvas.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
// object-fit: contain by hand: compute a uniform scale, letterbox with black
```

帧数/尺寸：一套 webp 序列（如 1280x720），约 96 帧；始终配一张先绘制的 poster.webp，避免白屏。

### callout 里程碑
3-4 个文字块在特定进度点（如 p>0.2、p>0.5、p>0.8）淡入 + translateY，只对 opacity/transform 做动画。

### 降级方案（关键）
- prefers-reduced-motion：跳过滚动绑定，静态渲染最终帧 frame-0095，所有 callout 全部可见
- 帧未加载：保留上一次绘制的帧（drawn 缓存），绝不清屏留白闪烁

### 排版
系统 SF 字体栈：-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto...；hero 用 clamp 冲到约 7rem，字距 -0.03em；权重对比 600/400 两档；规格用大数字网格呈现。

## 自检清单

- [ ] 背景是否纯黑，只有一支电蓝强调色、没有第二支？
- [ ] 擦除是否为 sticky canvas + rAF、每帧只读一次滚动位置？
- [ ] 96 帧是否通过 IO 懒加载、poster 先绘制、未加载时保留上一帧？
- [ ] devicePixelRatio 是否封顶 2、有显式 aspect-ratio 防止 CLS？
- [ ] prefers-reduced-motion 下是否静态渲染最终帧、所有 callout 可见？
- [ ] 关键信息是否都在文字层，而不是帧图里？

---

# Launch Keynote (发布会主题) Design System

> 苹果发布会式的产品揭幕美学：纯黑舞台、发光产品、超大紧字距标题、唯一电蓝强调。招牌技法是滚动逐帧序列——一个 sticky 画布随滚动播放预渲染的产品动画，一屏一产品一句话，像万亿市值的产品页。

## 核心理念

发布会主题的信条：页面是一场产品揭幕，不是一份传单。整块屏幕是漆黑的舞台，光只打在产品上，观众的注意力被逐屏牵引——一屏只讲一件事，一屏只揭一次幕。

核心理念：
- 纯黑舞台 (#000000)：没有卡片边框、没有装饰纹理，黑是无限深的背景，产品自己发光。留白即戏剧张力
- 一屏一产品一句话：每个视口只承载一个主张。滚动是叙事节拍，不是信息堆叠
- 逐帧揭幕 (scroll-scrub)：招牌技法。一个 sticky 满屏 canvas 随滚动播放 96 帧预渲染动画——产品旋转、拆解、点亮，滚动条就是播放头
- 巨字紧字距：Hero 标题用系统 SF 级无衬线，clamp 冲到 ~7rem，字距收紧 (-0.03em)，600 与 400 两档权重制造张力
- 唯一电蓝 (#2997FF)：全站只有一支强调色，用在链接、CTA、关键规格数字。其余全是黑、近白 (#F5F5F7)、中灰 (#86868B)
- 规格网格：技术参数用等宽对齐的大数字网格呈现，冷静、克制、可信

设计原则：
- 性能红线：逐帧序列用 webp 帧 + IntersectionObserver 懒加载，进视口才预载 96 张 Image；poster 先画防白屏；rAF 节流、一帧只读一次滚动位置，绝不 layout thrash
- 防 CLS：所有图与 canvas 显式 aspect-ratio；devicePixelRatio 感知但封顶 2 倍防内存爆炸
- 降级：prefers-reduced-motion 下跳过滚动绑定，静态渲染最终帧、callout 全部可见
- 无障碍：装饰 canvas 给 aria-hidden；关键信息永远在文字层，不烘焙进帧里

---

## Token 字典（精确 Class 映射）

### 边框
```
宽度: border
颜色: border-white/10
圆角: rounded-2xl
```

### 阴影
```
小: shadow-[0_2px_12px_rgba(0,0,0,0.6)]
中: shadow-[0_12px_40px_rgba(0,0,0,0.7)]
大: shadow-[0_30px_80px_rgba(0,0,0,0.8)]
悬停: hover:shadow-[0_18px_50px_rgba(41,151,255,0.25)]
聚焦: focus-visible:ring-2 focus-visible:ring-[#2997FF]/60
```

### 交互效果
```
悬停位移: （无）
悬停缩放: （无）
悬停透明度: hover:bg-[#0071E3]
过渡动画: transition-all duration-300 ease-out
按下状态: active:scale-[0.98]
```

### 字体
```
标题: font-semibold text-[#F5F5F7] tracking-tight
正文: text-[#86868B] leading-relaxed
等宽: font-mono text-[#2997FF] uppercase tracking-[0.2em]
```

### 字号
```
Hero: text-6xl md:text-8xl
H1: text-5xl md:text-7xl
H2: text-3xl md:text-5xl
H3: text-xl md:text-2xl
正文: text-base md:text-lg
小字: text-sm
```

### 间距
```
Section: py-24 md:py-32
容器: px-6 md:px-8
卡片: p-8
小间距: gap-4
中间距: gap-8
大间距: gap-12
```

### 颜色角色
```
背景主色: bg-black
背景辅色: bg-[#1D1D1F]
背景强调色: bg-[#2997FF]
正文主色: text-[#F5F5F7]
正文辅色: text-[#86868B]
正文弱化色: text-white/40
按钮主色: bg-[#2997FF] text-white
按钮辅色: bg-[#1D1D1F] text-[#F5F5F7] border border-white/10
```

---

## [FORBIDDEN] 绝对禁止

以下 class 在本风格中**绝对禁止使用**，生成时必须检查并避免：

### 禁止的 Class
- `bg-gradient-to-r`
- `from-indigo-600`
- `via-purple-600`
- `to-pink-500`
- `bg-white`
- `duration-100`

### 禁止的模式
- 匹配 `^bg-gradient-to-r$`
- 匹配 `^from-(indigo|purple|pink|fuchsia|emerald|amber)-`
- 匹配 `^text-(red|green|amber|purple)-`

### 禁止原因
- `bg-gradient-to-r`: The stage is pure black; drama comes from light on the product, not decorative gradients
- `from-indigo-600`: No AI-cliche gradients; the only accent is one electric blue on a black stage
- `bg-white`: The stage stays black; use near-white text #F5F5F7, never a white surface that breaks the depth
- `duration-100`: Keynote motion is smooth and deliberate; snappy transitions cheapen the reveal

> WARNING: 如果你的代码中包含以上任何 class，必须立即替换。

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
rounded-full
transition-all duration-300
active:scale-[0.98]
```

### 卡片必须包含
```
bg-[#1D1D1F]
rounded-2xl
```

### 输入框必须包含
```
bg-[#1D1D1F]
border border-white/10
rounded-xl
text-[#F5F5F7] placeholder-[#86868B]
focus:outline-none focus:border-[#2997FF]
transition-colors duration-300
```

---

## [COMPARE] Launch Keynote 错误 vs 正确对比

以下错误示例只代表“未经过当前风格适配的通用默认值”，不要把错误示例当成视觉建议。

### 按钮

[WRONG] **错误示例**（通用组件库默认样式，不要直接复制）：
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  点击我
</button>
```

[CORRECT] **正确示例**（使用当前风格的 token）：
```html
<button class="rounded-full transition-all duration-300 active:scale-[0.98] bg-[#2997FF] text-white">
  点击我
</button>
```

### 卡片

[WRONG] **错误示例**（未经当前风格适配的通用卡片）：
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **正确示例**（使用当前风格的 card token）：
```html
<div class="bg-[#1D1D1F] rounded-2xl p-8">
  <h3 class="font-semibold text-[#F5F5F7] tracking-tight text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### 输入框

[WRONG] **错误示例**（未经当前风格适配的通用输入框）：
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **正确示例**（使用当前风格的 input token）：
```html
<input class="bg-[#1D1D1F] border border-white/10 rounded-xl text-[#F5F5F7] placeholder-[#86868B] focus:outline-none focus:border-[#2997FF] transition-colors duration-300" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Launch Keynote 页面骨架模板

以下骨架只使用当前风格的 token。替换 `{PLACEHOLDER}` 时，不要移除或替换这些 token：

### 导航栏骨架
```html
<nav class="bg-black text-[#F5F5F7] border border-white/10 px-6 md:px-8">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-8">
    <a href="/" class="font-semibold text-[#F5F5F7] tracking-tight text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-8 text-[#86868B] leading-relaxed text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="bg-[#2997FF] text-[#F5F5F7] py-24 md:py-32 px-6 md:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-semibold text-[#F5F5F7] tracking-tight text-6xl md:text-8xl">
      {HEADLINE}
    </h1>
    <p class="text-[#86868B] leading-relaxed text-base md:text-lg max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-full transition-all duration-300 active:scale-[0.98] bg-[#2997FF] text-white">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="bg-black text-[#F5F5F7] py-24 md:py-32 px-6 md:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-semibold text-[#F5F5F7] tracking-tight text-3xl md:text-5xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Card template - repeat for each card -->
      <div class="bg-[#1D1D1F] rounded-2xl p-8">
        <h3 class="font-semibold text-[#F5F5F7] tracking-tight text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="text-[#86868B] leading-relaxed text-base md:text-lg text-white/40">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 表单输入骨架
```html
<input class="bg-[#1D1D1F] border border-white/10 rounded-xl text-[#F5F5F7] placeholder-[#86868B] focus:outline-none focus:border-[#2997FF] transition-colors duration-300" placeholder="{PLACEHOLDER}" />
```

### 页脚骨架
```html
<footer class="bg-[#1D1D1F] text-[#86868B] py-24 md:py-32 px-6 md:px-8">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
      <div>
        <span class="font-semibold text-[#F5F5F7] tracking-tight text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="text-[#86868B] leading-relaxed text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-semibold text-[#F5F5F7] tracking-tight text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="text-[#86868B] leading-relaxed text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Launch Keynote 生成后自检清单

**输出代码前，逐项验证当前风格的 token 和规则。如有违反，先修正再交付：**

### Token 检查
- [ ] 按钮包含： `rounded-full transition-all duration-300 active:scale-[0.98]`
- [ ] 卡片包含： `bg-[#1D1D1F] rounded-2xl`
- [ ] 输入框包含： `bg-[#1D1D1F] border border-white/10 rounded-xl text-[#F5F5F7] placeholder-[#86868B] focus:outline-none focus:border-[#2997FF] transition-colors duration-300`

### 禁止项检查
- [ ] 没有使用 `bg-gradient-to-r`
- [ ] 没有使用 `from-indigo-600`
- [ ] 没有使用 `via-purple-600`
- [ ] 没有使用 `to-pink-500`
- [ ] 没有使用 `bg-white`
- [ ] 没有使用 `duration-100`

### 风格规则检查
- [ ] 纯黑 #000000 舞台，无边框无纹理，产品自己发光，留白即张力
- [ ] 一屏一产品一句话：每个视口只承载一个主张，滚动是叙事节拍
- [ ] 逐帧揭幕：sticky 满屏 canvas 随滚动播放 webp 帧序列，滚动条即播放头
- [ ] 帧序列进视口才懒加载（IntersectionObserver），poster 先画防白屏
- [ ] 巨字紧字距 hero：系统 SF 级无衬线，clamp ~7rem，tracking -0.03em

### 风格漂移检查
- [ ] 没有违反：禁止多彩渐变或第二支强调色（唯一电蓝之外全是黑白灰）
- [ ] 没有违反：禁止在滚动处理器里逐帧读 offsetTop / getBoundingClientRect（layout thrash）
- [ ] 没有违反：禁止页面一载就预载全部 96 帧（必须 IO 懒加载，否则流量灾难）
- [ ] 没有违反：禁止把关键信息烘焙进帧图里（帧可能没加载、reduced-motion 只显一帧）
- [ ] 没有违反：禁止卡片边框、圆角装饰堆砌破坏纯黑舞台的无限深

### 通用交付检查
- [ ] 响应式布局在手机、平板和桌面下稳定，没有横向溢出
- [ ] 所有交互元素有清晰焦点、可访问名称和 reduced-motion 方案
- [ ] 文本对比度达到 WCAG AA，且没有用颜色单独传递状态
- [ ] 结果仍然能够一眼识别为 Launch Keynote

---

## [EXAMPLES] 示例 Prompt

### 1. 旗舰硬件发布页

滚动逐帧揭幕的产品发布页

```
Create an Apple-keynote style flagship hardware launch page with:
1. A pitch-black #000000 stage, near-white #F5F5F7 text, one electric-blue #2997FF accent for links, CTAs and key spec numbers - no second color
2. A frosted keynote nav bar (black/70 backdrop-blur) with an Overview/Specs/Buy set, Buy in blue
3. A huge tight-tracking hero headline (system SF stack, clamp up to ~7rem, -0.03em)
4. THE SIGNATURE: a section ~350vh tall with a sticky top-0 h-screen canvas that plays a 96-frame webp sequence as the scrollbar becomes the playhead; lazy-load the frames only in view via IntersectionObserver, paint a poster first, throttle the scroll with requestAnimationFrame reading position once per frame, and keep the last drawn frame if one has not loaded
5. 3-4 feature callouts that fade + translate in at progress milestones (opacity/transform only)
6. A spec grid of large numbers, dark #1D1D1F cards for chip/camera/battery
7. prefers-reduced-motion: skip the scroll wiring and statically render the final frame with all callouts visible; devicePixelRatio capped at 2; explicit aspect-ratios to prevent CLS
```

### 2. 极简 SaaS 发布

发布会式的软件产品发布页

```
Create a keynote-style SaaS product reveal with:
1. A black stage, one electric-blue #2997FF accent, near-white text, mid-gray #86868B captions
2. A hero with a huge tight headline and a single blue pill CTA plus a hairline "Learn more" text link
3. A sticky-canvas scroll section that scrubs a webp frame sequence of the app UI assembling itself, lazy-loaded via IntersectionObserver with a poster painted first
4. Feature callouts fading in at scroll milestones; all real text, never baked into the frames
5. Below the fold, quiet black sections with a spec/plan grid of large numbers on #1D1D1F cards
6. A frosted top nav and a calm footer in gray; the only accent anywhere is the one blue
7. Honor prefers-reduced-motion by rendering the final frame statically with callouts visible; cap devicePixelRatio at 2
```

## 绝对禁止（匹配即拒绝）

以下模式一旦出现，视为风格违规——不找借口，直接重写。

- 多彩渐变或第二支强调色（唯一电蓝之外全是黑白灰）
- 在滚动处理器里逐帧读 offsetTop / getBoundingClientRect（layout thrash）
- 页面一载就预载全部 96 帧（必须 IO 懒加载，否则流量灾难）
- 把关键信息烘焙进帧图里（帧可能没加载、reduced-motion 只显一帧）
- 卡片边框、圆角装饰堆砌破坏纯黑舞台的无限深
- 忽略 prefers-reduced-motion 与 devicePixelRatio 封顶

## 自检清单（交付前逐条确认）

如果任何一条不通过，说明风格漂移了——修改后再交付。

- [ ] 没有紫色到蓝色的渐变
- [ ] 没有使用 Inter / Roboto / Geist 等过度使用的字体
- [ ] 没有嵌套卡片（卡片里面套卡片）
- [ ] 没有在彩色背景上放灰色文字
- [ ] 正文对比度满足 WCAG AA（≥4.5:1）
- [ ] 没有 bounce / elastic 缓动曲线
- [ ] 动效有 prefers-reduced-motion 备选方案
- [ ] 正文行宽不超过 65-75 个字符
- [ ] 没有单侧粗边框装饰（border-left/right accent stripe）
- [ ] 没有渐变文字（background-clip: text）
- [ ] 没有把玻璃态（glassmorphism）当作默认风格
- [ ] 没有 tiny uppercase tracked eyebrow 放在每个 section 标题上面
- [ ] 禁止多彩渐变或第二支强调色（唯一电蓝之外全是黑白灰）
- [ ] 禁止在滚动处理器里逐帧读 offsetTop / getBoundingClientRect（layout thrash）
- [ ] 禁止页面一载就预载全部 96 帧（必须 IO 懒加载，否则流量灾难）
- [ ] 禁止把关键信息烘焙进帧图里（帧可能没加载、reduced-motion 只显一帧）
- [ ] 禁止卡片边框、圆角装饰堆砌破坏纯黑舞台的无限深