skillhub-019-waitlist-page
wehub-skill-sync
47 行
3.1 KiB
Markdown
47 行
3.1 KiB
Markdown
# 检查清单 — Waitlist 页面
|
||
|
||
## P0 — 在输出 `<artifact>` 之前必须通过
|
||
|
||
- [ ] 页面有且只有一个主要 CTA（邮箱输入框 + 提交按钮）
|
||
- [ ] 首屏渐变区高度不超过视口高度的 20%
|
||
- [ ] 邮箱输入框有可见的标签或有意义的占位符——不只是"Email"
|
||
- [ ] 没有编造的社会证明数字（例如"10,000 人正在等待"）
|
||
- [ ] **不存在倒计时器**——倒计时器是本 skill 的明确反模式（见 SKILL.md §Quality gates）
|
||
- [ ] 在 375px 视口宽度下无水平滚动
|
||
- [ ] 没有使用通用 emoji 图标作为装饰元素
|
||
- [ ] 排版最多使用两种字体家族（展示字体 + 正文字体）
|
||
- [ ] 名字（First name）输入框没有 `required` 属性
|
||
- [ ] 工作邮箱输入框有 `type="email"` 和 `required`
|
||
- [ ] 表单**不**使用 `novalidate`；JS 守卫在展示成功状态前调用 `checkValidity()`
|
||
- [ ] 成功消息使用 `role="status"` 或 `aria-live="polite"`，以便屏幕阅读器播报
|
||
- [ ] 所有颜色值源自 DESIGN.md；唯一允许硬编码的例外是用于 `--success` 的 `#2D6A4F`
|
||
- [ ] 所有用户提供的文本令牌均已进行 HTML 转义；颜色令牌遵循严格语法（`#hex`、`rgb/hsl/oklch`、`color-mix()`），且不包含不安全字符（`;`、`{}`、`<`、`>`、`/*`、`@`、`url(`）；字体名称令牌在 Google Fonts URL 中进行 URL 编码；`{{LOGO_MARK}}` 为转义后的文本首字母或经过严格清理的内联 SVG（无脚本/事件）
|
||
|
||
## P1 — 高质量提交通常应满足
|
||
|
||
- [ ] Hero 区域视觉上清晰可辨，且在首屏可见
|
||
- [ ] 邮箱提交按钮有悬停和激活状态
|
||
- [ ] 表单验证在出错时提供清晰的内联反馈（原生 `reportValidity()` 亦可接受）
|
||
- [ ] 页面在 375×667 和 390×844 尺寸下可滚动（未被裁剪）；在这些尺寸下 CTA 无需滚动即可见
|
||
- [ ] 在 `prefers-reduced-motion: reduce` 下，滚动字幕动画已暂停或移除
|
||
- [ ] 所有可交互元素有可见的焦点样式（不仅仅是 `outline: none`）
|
||
- [ ] 键盘：Tab 键可到达每个表单字段和提交按钮；Enter 键可提交表单
|
||
- [ ] 正文文本在背景上的颜色对比度满足 WCAG AA（≥ 4.5:1）
|
||
- [ ] 按钮标签在按钮背景上的颜色对比度满足 WCAG AA（≥ 4.5:1）
|
||
- [ ] Logo 文本/首字母在 Logo 容器背景上的颜色对比度满足 WCAG AA（≥ 4.5:1）
|
||
- [ ] 如果 Logo 是 `<img>` 或有意义的 SVG，则存在 Logo 的 `alt` 文本或 `aria-label`
|
||
- [ ] 滚动字幕条带有 `aria-hidden="true"`（装饰性，非有意义内容）
|
||
- [ ] `<html lang="">` 属性已设置为正确的语言代码
|
||
|
||
## P2 — 加分打磨项
|
||
|
||
- [ ] Google Fonts 使用 `display=swap` 加载，避免 FOIT
|
||
- [ ] 表单输入框有匹配的 `autocomplete` 属性（`given-name`、`email`）
|
||
- [ ] 按钮悬停时有细微的微动效（仅缩放或透明度——不引起布局偏移）
|
||
- [ ] 装饰区域在任何视口宽度下均不覆盖或重叠表单
|
||
- [ ] 页面标题为 `{{PRODUCT_NAME}} — Coming Soon`，而非通用的占位符
|
||
|
||
---
|
||
|
||
翻译完成。请问还需要在这个项目里做什么工作？
|