候补名单页面技能
预发布页面是与未来用户的第一次握手。本技能构建一个专注、诚实的入口：你的品牌标识、你所构建的产品、以及一条明确的加入早期名单的路径。没有人为制造的稀缺感、没有虚假倒计时、没有营销夸大策略——只有一个干净、移动优先的容器，用于承载真实的兴趣。
工作流程
预检：加载稳固模板和品牌基础
- 加载品牌标识 — 读取
DESIGN.md文件以获取配色系统、字体搭配和空间规则。这是你的基础。一个候补名单页面的成败取决于与其所代表品牌的一致性。如果DESIGN.md缺失，请在继续之前要求用户提供一个。 - 读取并复制可复用模板 — 读取
assets/template.html。此模板是所有输出的稳固种子。将其复制到index.html作为你的基础。不要从头编写 HTML 或偏离此结构。模板已包含所有必需的布局、表单结构、装饰、焦点样式和无障碍脚手架。
步骤：带验证和转义的令牌替换
- 根据输入映射令牌 — 对于模板中的每个占位符（例如
{{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。按原样插入到:rootCSS 变量中。如果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 格式是否正确。
- 文本令牌 (
- 验证令牌映射规则 — 所有颜色令牌现在都在 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 容器阴影，微妙的背景色调）--logo-fg={{LOGO_FG_EXPRESSION}}（Logo 首字母的对比色文字颜色）
- 响应式布局 — 模板包含移动优先缩放：
- 375px: 表单堆叠为单列，Logo 缩小至 40px，装饰压缩，无水平滚动。
- 768px: 舒适的两列呼吸空间。
- 1440px+: 居中布局，留白充足。
- 验证所有文本保持可读，并在 375×667 和 390×844 视口下，邮件输入框和按钮完全可见（无裁剪）。
验证：输出前运行硬性质量门
- 运行质量检查清单 — 读取
references/checklist.md。在输出之前，验证每一项 P0 门控：- 恰好一个 CTA（电子邮件表单）
- 无倒计时，无虚假社交证明，无 emoji
- 在 375px 宽度下无水平滚动
- 邮件输入有
type="email"和required；名字输入无required - 表单不使用
novalidate；JS 使用checkValidity()防护 - 成功消息有
role="status"或aria-live="polite" - 所有颜色来自
DESIGN.md或允许的回退值；无发明 hex 值 - 所有用户文本已 HTML 转义；颜色令牌遵循严格语法；字体已 URL 编码
- 通过 P0，否则不输出。 如果任何 P0 门控失败，请询问用户或修复令牌映射并重试。
- 验证 P1 门控 以保证质量提交（推荐）：
- 提交按钮的悬停和活动状态
- 带清晰反馈的表单验证
- 消息栏动画尊重
prefers-reduced-motion: reduce - 所有交互元素具有可见的焦点样式（input:focus 包含
outline） - Tab/Enter 键盘支持
- WCAG AA 对比度：正文字体（≥4.5:1），按钮标签（≥4.5:1）
- Logo 有 alt/aria-label 属性；消息栏有
aria-hidden="true" <html lang="">已设置
输出
- 输出干净 HTML — 单个文件，CSS 内联，图形使用 SVG。为交互元素标记
data-od-id属性（标题、表单、Logo、消息栏、网格等），以便代理无需解析即可进行自定义。
质量门控
本技能强制执行基于模板的稳固工作流程，确保合规性。你必须遵循此执行路径；偏离模板将使输出不合格。
必须基于模板执行：
- 以
assets/template.html为基础；不要从头编写 HTML。 - 将其复制到
index.html，并仅将{{PLACEHOLDER}}令牌替换为已验证/转义的值。 - 在输出前，运行
references/checklist.md中的每一项 P0 门控；如果任何一项失败，请修复并重新验证。
P0 门控（必须通过）：
- 单一 CTA：电子邮件表单是唯一的交互元素。无导航、无次要按钮、无社交链接。
- Logo 位置：固定在左上角，匹配 DESIGN.md 中的强调色，在移动端缩放（50px → 40px）。
- 颜色一致性：每个颜色均来自 DESIGN.md 调色板。唯一允许硬编码的例外：
--success的#2D6A4F。 - 无反模式：无倒计时，无虚假社交证明，无 emoji 图标，无 lorem ipsum。
- 内容完整性：标题和文案直接对应
product_name和tagline输入——无填充文案。 - 移动端适配：在 375px 宽度下无水平滚动。在 375×667 和 390×844 下，邮件输入框和提交按钮完全可见（无裁剪）。垂直溢出可滚动，而非隐藏。
- 排版纪律：仅使用显示字体 + 正文字体（2 字体制）。跨部分尺寸一致。
- 表单结构：两个字段（名字可选，电子邮件必填），
checkValidity()防护，成功消息带role="status"。 - 令牌转义：所有用户提供的文本已 HTML 转义；颜色令牌遵循严格语法且不包含不安全字符（
;,{},<,>,/*,@,url(）；字体名称已 URL 编码；{{LOGO_MARK}}是转义后的文本首字母或已严格净化的内联 SVG（无脚本、无事件处理器、无 foreignObject、无外部 hrefs）。
P1 门控（建议通过以保证质量）：
- 英雄区域视觉上与众不同且位于首屏。
- 邮件提交按钮有悬停和活动状态。
- 表单验证提供清晰反馈。
- 页面在所有移动视口下可滚动（无裁剪）；CTA 无需滚动即可见。
- 在
prefers-reduced-motion: reduce下，消息栏动画暂停/移除。 - 所有交互元素具有可见的焦点样式（outline，而非仅 outline:none）。
- 键盘：Tab 键可到达每个表单字段；Enter 键提交。
- WCAG AA 对比度：正文字体 ≥4.5:1，按钮标签 ≥4.5:1。
- Logo 有 alt/aria-label 属性；消息栏有
aria-hidden="true"。 <html lang="">设置为正确的语言代码。
装饰约束：
- 下方区域增强效果不分散注意力。不透明度低、描边柔和、动画低调。
- 无渐变跨越超过视口高度的 20%。
- 线圈、条纹、网格或消息栏仅使用 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 检查清单门控。在迭代中不得跳过验证。