waitlist-page

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Waitlist Page Skill

等待列表页面Skill

Pre-launch pages are your first handshake with future users. This skill builds a focused, honest entrance: your brand identity, what you're making, one clear path to join the early list. No artificial scarcity, no fake countdown, no inflation tactics—just a clean, mobile-first vessel for genuine interest.

预发布页面是你与未来用户的第一次互动。本Skill可构建一个聚焦、真诚的入口：展示你的品牌标识、产品介绍，以及一条清晰的加入早期用户列表的路径。不使用人为稀缺手段、虚假倒计时或夸大策略——仅打造一个简洁、移动端优先的载体，用于收集真实的用户兴趣。

Workflow

工作流程

Preflight: Load hardened template and brand foundation

准备阶段：加载加固模板与品牌基础

Load the brand identity — Read
```
DESIGN.md
```
for the color system, font pairing, and spatial rules. This is your foundation. A waitlist page lives or dies by consistency with the brand it represents. If
```
DESIGN.md
```
is missing, ask the user to provide one before you proceed.
Read and copy the reusable template — Read
```
assets/template.html
```
. This template is the hardened seed for all outputs. Copy it to
```
index.html
```
as your base. Do not write HTML from scratch or deviate from this structure. The template has all required layout, form structure, decorations, focus styles, and accessibility scaffolding baked in.

加载品牌标识 — 读取
```
DESIGN.md
```
文件获取配色系统、字体搭配及布局规则，这是你的基础。等待列表页面的成败取决于其与所代表品牌的一致性。若缺少
```
DESIGN.md
```
，请先要求用户提供该文件再继续。
读取并复制可复用模板 — 读取
```
assets/template.html
```
文件。该模板是所有输出内容的加固基础，将其复制到
```
index.html
```
作为你的基准文件。请勿从零开始编写HTML或偏离此结构。模板已内置所有必需的布局、表单结构、装饰、焦点样式及无障碍支持框架。

Steps: Token replacement with validation and escaping

步骤：带验证与转义的令牌替换

Map tokens from inputs — For each placeholder in the template (e.g.,
```
{{PRODUCT_NAME}}
```
,
```
{{BG_EXPRESSION}}
```
,
```
{{BORDER_EXPRESSION}}
```
,
```
{{LOGO_MARK}}
```
), follow the replacement rules below:
- Text tokens (
```
{{PRODUCT_NAME}}
```
  ,
```
{{TAGLINE}}
```
  ): HTML-escape
```
<
```
  ,
```
>
```
  ,
```
&
```
  ,
```
"
```
  ,
```
'
```
  before insertion into HTML text nodes or attribute values.
- HTML tokens (
```
{{LOGO_MARK}}
```
  ): If using text initials, HTML-escape them by default. If using inline SVG, you must strictly sanitize it using an allowlist: strip
```
<script>
```
  tags, event handlers (
```
on*
```
  ),
```
<foreignObject>
```
  , external refs (
```
href
```
  ,
```
xlink:href
```
  ,
```
url()
```
  ), and any disallowed attributes/elements before insertion. If the SVG cannot be safely sanitized, fallback to escaped text initials. Never emit raw, unsanitized arbitrary HTML. Ensure any SVG scales cleanly within its container.
- Color expression tokens (
```
{{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}}
```
  ): Must strictly adhere to an explicit color grammar (
```
#hex
```
  ,
```
rgb
```
  /
```
rgba
```
  ,
```
hsl
```
  /
```
hsla
```
  ,
```
oklch
```
  , or
```
color-mix()
```
  using only local variables). Hard reject any input containing
```
;
```
  ,
```
{}
```
  ,
```
<
```
  ,
```
>
```
  , comments (
```
/*
```
  ),
```
@
```
  ,
```
url(
```
  , or external refs to prevent CSS injection. Do not wrap in
```
#
```
  or add extra quotes. Examples:
```
rgba(196, 169, 154, 0.38)
```
  ,
```
color-mix(in srgb, var(--fg) 38%, transparent)
```
  ,
```
#FDE8DF
```
  . Insert as-is into
```
:root
```
  CSS variables. Derive
```
--success
```
  from DESIGN.md if present; otherwise use the allowed fallback
```
#2D6A4F
```
  only.
- Font name tokens (
```
{{DISPLAY_FONT_CSS}}
```
  ,
```
{{BODY_FONT_CSS}}
```
  ): These are CSS font-family values, already quoted if they contain spaces (e.g.,
```
'DM Sans'
```
  ,
```
Syne
```
  ). Insert as-is into
```
--font-display
```
  and
```
--font-body
```
  declarations; do NOT add extra quotes.
- Font URL tokens (
```
{{DISPLAY_FONT_URL}}
```
  ,
```
{{BODY_FONT_URL}}
```
  ): Spaces must be encoded as
```
+
```
  for the Google Fonts URL (e.g.,
```
DM+Sans
```
  ,
```
IBM+Plex+Serif
```
  ). Validate the URL is well-formed before insertion.

Verify token mapping rules — All color tokens are now in CSS variables:

```
--bg
```
=
```
{{BG_EXPRESSION}}
```
(e.g.,
```
#FDE8DF
```
)
```
--fg
```
=
```
{{FG_EXPRESSION}}
```
(e.g.,
```
#1A1410
```
)
```
--accent
```
=
```
{{ACCENT_EXPRESSION}}
```
(brand badge)
```
--deco
```
=
```
{{DECO_EXPRESSION}}
```
(decoration primary)
```
--deco-stripe
```
=
```
{{STRIPE_EXPRESSION}}
```
(accent stripe)
```
--input-border
```
=
```
{{BORDER_EXPRESSION}}
```
(full CSS expression with opacity)
```
--success
```
=
```
{{SUCCESS_EXPRESSION}}
```
or
```
#2D6A4F
```
fallback
```
--btn-label
```
=
```
{{BTN_LABEL_EXPRESSION}}
```
(button text color for contrast)
```
--ticker-bg
```
=
```
{{TICKER_BG_EXPRESSION}}
```
(animated ticker background)
```
--ticker-fg
```
=
```
{{TICKER_FG_EXPRESSION}}
```
(animated ticker text)
```
--deco-stroke
```
=
```
{{DECO_STROKE_EXPRESSION}}
```
(SVG strokes, typically muted with 12–15% opacity)
```
--logo-shadow
```
=
```
{{LOGO_SHADOW_EXPRESSION}}
```
(logo container shadow, subtle foreground shade)
```
--logo-fg
```
=
```
{{LOGO_FG_EXPRESSION}}
```
(contrasting text color for logo initials)

Responsive layout — The template includes mobile-first scaling:
- 375px: form stacks to single column, logo shrinks to 40px, decoration compresses, no horizontal scroll.
- 768px: comfortable two-column breathing room.
- 1440px+: centered layout with generous whitespace.
- Verify all text remains readable and the email input + button are fully visible (no clipping) at 375×667 and 390×844.

根据输入映射令牌 — 针对模板中的每个占位符（如
```
{{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格式是否正确。
验证令牌映射规则 — 所有颜色令牌现已转换为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分辨率下，所有文本保持可读，邮箱输入框和按钮完全可见（无裁切）。

Validation: Run hardened quality gates before emitting

验证阶段：输出前运行加固质量检查

Run the quality checklist — Read
```
references/checklist.md
```
. Validate every P0 gate before emitting:
- Exactly one CTA (email form)
- No countdown timer, no fake social proof, no emoji
- No horizontal scroll at 375px
- Email input has
```
type="email"
```
  and
```
required
```
  ; first name has no
```
required
```
- Form does NOT use
```
novalidate
```
  ; JS uses
```
checkValidity()
```
  guard
- Success message has
```
role="status"
```
  or
```
aria-live="polite"
```
- All colors from DESIGN.md or allowed fallback; no invented hex values
- All user text is HTML-escaped; color tokens adhere to strict grammar; fonts are URL-encoded
- Pass P0 or do not emit. If any P0 gate fails, ask the user or fix the token mappings and try again.
Verify P1 gates for quality submission (recommended):
- Hover and active states on submit button
- Form validation with clear feedback
- Ticker animation respects
```
prefers-reduced-motion: reduce
```
- All interactive elements have visible focus styles (input:focus includes
```
outline
```
  )
- Tab/Enter keyboard support
- WCAG AA contrast for body text (≥4.5:1) and button label (≥4.5:1)
- Logo alt/aria-label present; ticker has
```
aria-hidden="true"
```
- ```
<html lang="">
```
  is set

运行质量检查清单 — 读取
```
references/checklist.md
```
文件。输出前验证所有P0级检查项：
- 仅包含一个CTA（邮箱表单）
- 无倒计时器、虚假社交证明、表情符号
- 375px分辨率下无横向滚动
- 邮箱输入框设置
```
type="email"
```
  和
```
required
```
  ；名字输入框无
```
required
```
  属性
- 表单不使用
```
novalidate
```
  ；JS代码使用
```
checkValidity()
```
  校验
- 成功提示信息设置
```
role="status"
```
  或
```
aria-live="polite"
```
- 所有颜色来自DESIGN.md或允许的回退值；不得自行创建十六进制颜色值
- 所有用户提供的文本已进行HTML转义；颜色令牌遵循严格语法；字体已进行URL编码
- 必须通过所有P0级检查项才能输出。若任何P0级检查项未通过，请询问用户或修正令牌映射后重试。
验证P1级检查项以提交高质量成果（推荐）：
- 提交按钮的悬停和激活状态
- 表单验证提供清晰反馈
- 滚动提示条动画遵循
```
prefers-reduced-motion: reduce
```
  设置
- 所有交互元素具有可见的焦点样式（input:focus包含
```
outline
```
  ）
- 支持Tab/Enter键盘操作
- 正文文本符合WCAG AA级对比度（≥4.5:1），按钮标签符合WCAG AA级对比度（≥4.5:1）
- Logo包含alt/aria-label属性；滚动提示条设置
```
aria-hidden="true"
```
- 设置
```
<html lang="">
```
  属性

Output

输出

Emit clean HTML — Single file, CSS inlined, SVG for graphics. Mark interactive elements with
```
data-od-id
```
(headline, form, logo, ticker, grid, etc.) so agents can customize without parsing.

输出干净的HTML — 单文件，CSS内联，使用SVG作为图形资源。为交互元素标记
```
data-od-id
```
（标题、表单、Logo、滚动提示条、网格等），以便Agent无需解析即可进行自定义。

Quality gates

质量检查项

This skill enforces a hardened, template-based workflow to ensure compliance. You must follow this execution path; deviating from the template disqualifies the output.

Mandatory template-based execution:

Read
```
assets/template.html
```
as your base; do not write HTML from scratch.
Copy it to
```
index.html
```
and replace only the
```
{{PLACEHOLDER}}
```
tokens with validated/escaped values.
Run every P0 gate in
```
references/checklist.md
```
before emitting; if any fail, fix and re-validate.

P0 gates (must pass):

Single CTA: Email form is the only interactive element. No nav, no secondary buttons, no social links.
Logo placement: Fixed top-left, matches DESIGN.md accent color, scales down on mobile (50px → 40px).
Color consistency: Every color from DESIGN.md palette. Only allowed hardcoded exception:
```
#2D6A4F
```
for
```
--success
```
.
No anti-patterns: No countdown timer, no fake social proof, no emoji icons, no lorem ipsum.
Content integrity: Headline and copy tie directly to
```
product_name
```
and
```
tagline
```
inputs—no filler copy.
Mobile fit: No horizontal scroll at 375px. Email input and submit button are fully visible (no clipping) at 375×667 and 390×844. Vertical overflow is scrollable, not hidden.
Typographic discipline: Display + body fonts only (2-font rule). Consistent sizing across sections.
Form structure: Two fields (first name optional, email required),
```
checkValidity()
```
guard, success message with
```
role="status"
```
.
Token escaping: All user-supplied text HTML-escaped; color tokens adhere to strict grammar and contain no unsafe characters (
```
;
```
,
```
{}
```
,
```
<
```
,
```
>
```
,
```
/*
```
,
```
@
```
,
```
url(
```
); font names are URL-encoded;
```
{{LOGO_MARK}}
```
is escaped text initials or strictly sanitized inline SVG (no scripts, no event handlers, no foreignObject, no external hrefs).

P1 gates (should pass for quality submission):

Hero section visually distinct and above-the-fold.
Email submit button has hover and active states.
Form validation provides clear feedback.
Page scrollable (not clipped) at all mobile viewports; CTA visible without scroll.
Ticker animation paused/removed under
```
prefers-reduced-motion: reduce
```
.
All interactive elements have visible focus styles (outline, not just outline:none).
Keyboard: Tab reaches each form field; Enter submits.
WCAG AA contrast: Body text ≥4.5:1, button label ≥4.5:1.
Logo alt/aria-label present; ticker has
```
aria-hidden="true"
```
.
```
<html lang="">
```
set to correct language code.

Decoration restraint:

Lower zone enhances without distraction. Opacity, subtle strokes, muted animation.
No gradient that spans more than 20% of viewport height.
Coil, stripe, grid, or ticker all use colors from DESIGN.md only.

本Skill强制执行基于模板的加固工作流程，以确保合规性。你必须遵循此执行路径；偏离模板的输出将被视为不合格。

强制基于模板执行：

以
```
assets/template.html
```
为基础；请勿从零开始编写HTML。
将其复制到
```
index.html
```
，仅将
```
{{PLACEHOLDER}}
```
令牌替换为经过验证/转义的值。
输出前运行
```
references/checklist.md
```
中的所有P0级检查项；若任何项未通过，修正后重新验证。

P0级检查项（必须通过）：

单一CTA：邮箱表单是唯一的交互元素。无导航栏、无次要按钮、无社交链接。
Logo位置：固定在左上角，匹配DESIGN.md中的强调色，移动端缩小（50px → 40px）。
颜色一致性：所有颜色来自DESIGN.md调色板。唯一允许的硬编码例外：
```
--success
```
使用
```
#2D6A4F
```
。
无反模式：无倒计时器、无虚假社交证明、无表情符号图标、无占位文本。
内容完整性：标题和文案直接关联
```
product_name
```
和
```
tagline
```
输入内容——无填充文案。
移动端适配：375px分辨率下无横向滚动。在375×667和390×844分辨率下，邮箱输入框和提交按钮完全可见（无裁切）。垂直内容可滚动，不隐藏。
排版规范：仅使用展示字体+正文字体（双字体规则）。各部分尺寸一致。
表单结构：两个字段（名字可选，邮箱必填），包含
```
checkValidity()
```
校验，成功提示信息设置
```
role="status"
```
。
令牌转义：所有用户提供的文本已进行HTML转义；颜色令牌遵循严格语法且不含不安全字符（
```
;
```
、
```
{}
```
、
```
<
```
、
```
>
```
、
```
/*
```
、
```
@
```
、
```
url(
```
）；字体名称已进行URL编码；
```
{{LOGO_MARK}}
```
为转义后的文本首字母或严格清理后的内联SVG（无脚本、无事件处理器、无foreignObject、无外部href）。

P1级检查项（高质量提交应通过）：

Hero区块视觉突出且位于首屏。
邮箱提交按钮具有悬停和激活状态。
表单验证提供清晰反馈。
在所有移动端视口下页面可滚动（无裁切）；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中的颜色。

Output

输出

Only emit after all P0 gates in
references/checklist.md
pass.

Emit the artifact between tags:

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

One line of description above the artifact; nothing below.

Post-emission: If the user asks for changes, update the index.html in-place and re-run the P0 checklist gates before emitting the next version. Do not skip validation on iterations.

仅在通过
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级检查项后再输出新版本。迭代过程中请勿跳过验证。