waitlist-page

候补名单页面技能

预发布页面是你与未来用户的首次握手。这项技能旨在打造一个专注、诚恳的入口：展示你的品牌形象、你正在打造的产品，以及加入早期名单的明确途径。不制造人为的稀缺感，不设置虚假的倒计时，也不玩夸大其词的把戏——只提供一个简洁、优先适配移动设备的页面，承接用户真诚的兴趣。

工作流

预检：加载加固模板和品牌基础

0. 加载品牌形象 — 阅读 DESIGN.md，了解配色系统、字体搭配和空间规则。这是基础。候补名单页面能否成功，取决于它是否与所代表的品牌保持一致。如果缺少 DESIGN.md，请先让用户提供，再继续操作。
1. 读取并复制可复用模板 — 阅读 assets/template.html。该模板是所有输出的加固基础。将其复制为 index.html，作为基础文件。不要从头编写 HTML，也不要偏离此结构。模板已内置所有必需的布局、表单结构、装饰元素、焦点样式和无障碍辅助框架。

步骤：经过验证和转义的令牌替换

2. 映射输入中的令牌 — 对于模板中的每个占位符（例如 {{PRODUCT_NAME}}、{{BG_EXPRESSION}}、{{BORDER_EXPRESSION}}、{{LOGO_MARK}}），请遵循以下替换规则：
   • 文本令牌（{{PRODUCT_NAME}}、{{TAGLINE}}）：插入 HTML 文本节点或属性值之前，对 <、>、&、"、' 进行 HTML 转义。
   • HTML 令牌（{{LOGO_MARK}}）：如果使用文本首字母，默认对其进行 HTML 转义。如果使用内联 SVG，必须严格使用允许列表对其进行净化：移除 <script> 标签、事件处理程序（on*）、<foreignObject>、外部引用（href、xlink:href、url()），以及任何不允许的属性或元素，然后再插入。如果无法安全净化 SVG，则回退为经过转义的文本首字母。绝不输出未经净化的任意原始 HTML。确保 SVG 在其容器中能够平滑缩放。
   • 颜色表达式令牌（{{BG_EXPRESSION}}、{{FG_EXPRESSION}}、{{ACCENT_EXPRESSION}}、{{DECO_EXPRESSION}}、{{STRIPE_EXPRESSION}}、{{SUCCESS_EXPRESSION}}、{{BORDER_EXPRESSION}}、{{BTN_LABEL_EXPRESSION}}、{{TICKER_BG_EXPRESSION}}、{{TICKER_FG_EXPRESSION}}、{{DECO_STROKE_EXPRESSION}}、{{LOGO_SHADOW_EXPRESSION}}、{{LOGO_FG_EXPRESSION}}）：必须严格遵循明确的颜色语法（#hex、rgb/rgba、hsl/hsla、oklch 或仅使用局部变量的 color-mix()）。严格拒绝任何包含 ;、{}、<、>、注释（/*）、@、url( 或外部引用的输入，以防止 CSS 注入。不要添加 # 包装，也不要添加额外引号。示例：rgba(196, 169, 154, 0.38)、color-mix(in srgb, var(--fg) 38%, transparent)、#FDE8DF。原样插入 :root CSS 变量中。如果存在 DESIGN.md，则从中推导 --success；否则只能使用允许的回退值 #2D6A4F。
   • 字体名称令牌（{{DISPLAY_FONT_CSS}}、{{BODY_FONT_CSS}}）：这些是 CSS font-family 值，如果包含空格则已加引号（例如 'DM Sans'、Syne）。原样插入 --font-display 和 --font-body 声明；不要添加额外引号。
   • 字体 URL 令牌（{{DISPLAY_FONT_URL}}、{{BODY_FONT_URL}}）：Google Fonts URL 中的空格必须编码为 +（例如 DM+Sans、IBM+Plex+Serif）。插入前验证 URL 格式正确。
3. 验证令牌映射规则 — 所有颜色令牌现在都位于 CSS 变量中：
   • --bg = {{BG_EXPRESSION}}（例如 #FDE8DF）
   • --fg = {{FG_EXPRESSION}}（例如 #1A1410）
   • --accent = {{ACCENT_EXPRESSION}}（品牌徽章）
   • --deco = {{DECO_EXPRESSION}}（主要装饰）
   • --deco-stripe = {{STRIPE_EXPRESSION}}（强调条纹）
   • --input-border = {{BORDER_EXPRESSION}}（包含不透明度的完整 CSS 表达式）
   • --success = {{SUCCESS_EXPRESSION}} 或回退值 #2D6A4F
   • --btn-label = {{BTN_LABEL_EXPRESSION}}（用于确保对比度的按钮文本颜色）
   • --ticker-bg = {{TICKER_BG_EXPRESSION}}（动画字幕背景）
   • --ticker-fg = {{TICKER_FG_EXPRESSION}}（动画字幕文本）
   • --deco-stroke = {{DECO_STROKE_EXPRESSION}}（SVG 描边，通常使用 12–15% 的弱化不透明度）
   • --logo-shadow = {{LOGO_SHADOW_EXPRESSION}}（徽标容器阴影，采用微妙的前景色调）
   • --logo-fg = {{LOGO_FG_EXPRESSION}}（徽标首字母的对比文本颜色）
4. 响应式布局 — 模板采用移动端优先的缩放设计：
   • 375px：表单堆叠为单列，徽标缩小至 40px，装饰元素收缩，不出现水平滚动。
   • 768px：两列布局留有舒适的间距。
   • 1440px 及以上：居中布局，留白充足。
   • 验证在 375×667 和 390×844 尺寸下，所有文本均保持可读，且电子邮件输入框和按钮完全可见（无裁切）。

验证：输出前运行强化质量门禁

5. 运行质量检查清单 — 阅读 references/checklist.md。输出前验证每项 P0 门禁：
   • 恰好一个 CTA（电子邮件表单）
   • 没有倒计时器、虚假社会认同或表情符号
   • 在 375px 宽度下没有水平滚动
   • 电子邮件输入框具有 type="email" 和 required；名字字段没有 required
   • 表单未使用 novalidate；JS 使用 checkValidity() 守卫
   • 成功消息具有 role="status" 或 aria-live="polite"
   • 所有颜色均来自 DESIGN.md 或允许的备用值；不得臆造十六进制值
   • 所有用户文本均经过 HTML 转义；颜色令牌符合严格语法；字体 URL 已编码
   • 通过 P0 才能输出。 如果任何 P0 门禁未通过，请询问用户或修正令牌映射，然后重试。
6. 验证 P1 门禁以确保提交质量（建议）：
   • 提交按钮具有悬停和激活状态
   • 表单验证提供清晰反馈
   • Ticker 动画遵循 prefers-reduced-motion: reduce
   • 所有交互元素都有可见的焦点样式（input:focus 包含 outline）
   • 支持 Tab/Enter 键盘操作
   • 正文文本符合 WCAG AA 对比度（≥4.5:1），按钮标签符合 WCAG AA 对比度（≥4.5:1）
   • 提供 Logo 的 alt/aria-label；Ticker 具有 aria-hidden="true"
   • 已设置 <html lang="">

输出

7. 输出简洁的 HTML — 单个文件，CSS 内联，图形使用 SVG。为交互元素标记 data-od-id（标题、表单、Logo、Ticker、网格等），以便 Agent 无需解析即可自定义。

质量门槛

此技能强制执行经过强化的模板工作流，以确保合规。必须遵循此执行路径；偏离模板将导致输出不合格。

必须基于模板执行：

• 将 assets/template.html 作为基础文件阅读；不要从头编写 HTML。
• 将其复制为 index.html，并且只替换 {{PLACEHOLDER}} 标记为经过验证/转义的值。
• 在输出前运行 references/checklist.md 中的每项 P0 门槛；如果有任何一项未通过，请修复并重新验证。

P0 门槛（必须通过）：

• 单一 CTA：电子邮件表单是唯一的交互元素。没有导航、次要按钮或社交链接。
• Logo 位置：固定在左上角，符合 DESIGN.md 强调色，在移动设备上缩小（50px → 40px）。
• 颜色一致性：所有颜色均来自 DESIGN.md 调色板。唯一允许的硬编码例外：#2D6A4F，用于 --success。
• 无反模式：没有倒计时器、虚假的社会认同或表情符号图标，也没有 lorem ipsum。
• 内容完整性：标题和文案直接关联 product_name 和 tagline 输入；不包含填充文案。
• 移动端适配：在 375px 宽度下没有水平滚动。在 375×667 和 390×844 尺寸下，电子邮件输入框和提交按钮完全可见（不会被裁切）。垂直溢出应可滚动，而非隐藏。
• 字体规范：仅使用展示字体和正文字体（2 种字体规则）。各个版块的字号保持一致。
• 表单结构：两个字段（名为可选，电子邮件为必填），使用 checkValidity() 进行检查，并通过 role="status" 显示成功消息。
• 标记转义：所有用户提供的文本均进行 HTML 转义；颜色标记符合严格语法，且不包含不安全字符（;、{}、<、>、/*、@、url(）；字体名称进行 URL 编码；{{LOGO_MARK}} 为已转义的文本首字母，或经过严格净化的内联 SVG（不含脚本、事件处理程序、foreignObject 或外部 href）。

P1 门槛（质量提交应通过）：

• Hero 区域在视觉上有所区分，并位于首屏范围内。
• 电子邮件提交按钮具有悬停和激活状态。
• 表单验证提供清晰的反馈。
• 所有移动视口下页面均可滚动（不会被裁切）；无需滚动即可看到 CTA。
• 在 prefers-reduced-motion: reduce 下暂停/移除滚动字幕动画。
• 所有交互元素都有可见的焦点样式（使用轮廓，而不只是 outline:none）。
• 键盘操作：按 Tab 可到达每个表单字段；按 Enter 可提交。
• WCAG AA 对比度：正文文本 ≥4.5:1，按钮标签 ≥4.5:1。
• Logo 存在 alt/aria-label；滚动字幕设置 aria-hidden="true"。
• <html lang=""> 设置为正确的语言代码。

装饰克制：

• 下方区域起到增强效果，但不喧宾夺主。透明度适中、描边细微、动画柔和。
• 渐变覆盖的视口高度不得超过 20%。
• Coil、stripe、grid 或 ticker 均只能使用 DESIGN.md 中的颜色。

输出

只有在 references/checklist.md 中所有 P0 门槛均通过后，才能输出。

将生成内容放在以下标记之间：

<artifact identifier="waitlist-id" type="text/html" title="Coming Soon — {{PRODUCT_NAME}}">
<!doctype html>
<html lang="en">
...
</html>
</artifact>

在生成内容上方写一行描述；下方不得有任何内容。

**输出后：**如果用户要求修改，请直接更新 index.html，并在输出下一版本前重新运行 P0 检查清单门槛。每次迭代都不得跳过验证。