From 574cb6e45cc615d97b963566e1c83d7f9b4c80ae Mon Sep 17 00:00:00 2001 From: wehub-skill-sync Date: Mon, 13 Jul 2026 21:35:40 +0800 Subject: [PATCH] chore: import zh skill waitlist-page --- README.wehub.md | 9 + SKILL.md | 228 ++++++++++++++++++++ assets/template.html | 457 ++++++++++++++++++++++++++++++++++++++++ example.html | 400 +++++++++++++++++++++++++++++++++++ references/checklist.md | 46 ++++ 5 files changed, 1140 insertions(+) create mode 100644 README.wehub.md create mode 100644 SKILL.md create mode 100644 assets/template.html create mode 100644 example.html create mode 100644 references/checklist.md diff --git a/README.wehub.md b/README.wehub.md new file mode 100644 index 0000000..c52be84 --- /dev/null +++ b/README.wehub.md @@ -0,0 +1,9 @@ +# WeHub 来源说明 + +- Skill 名称：`waitlist-page` +- 中文类目：转化页（定价 / waitlist） +- 上游仓库：`nexu-io__open-design` +- 上游路径：`design-templates/waitlist-page/SKILL.md` +- 上游链接：https://github.com/nexu-io/open-design/blob/HEAD/design-templates/waitlist-page/SKILL.md +- 本仓库为 WeHub 中文 Skill 汉化包，基于 skill 市场筛选 Top200 清单整理 +- 原作者、版权和许可证信息以上游仓库为准 diff --git a/SKILL.md b/SKILL.md new file mode 100644 index 0000000..2198be3 --- /dev/null +++ b/SKILL.md @@ -0,0 +1,228 @@ +--- +name: waitlist-page +description: | + 简洁的预发布着陆页，支持邮件捕获、品牌标志和可选的装饰图层。 + 读取 DESIGN.md 以获取颜色、字体和布局规则。 + 适用于：产品发布、Beta 版注册、早期访问计划、独立项目。 +triggers: + - "waitlist page" + - "coming soon page" + - "pre-launch landing page" + - "email capture page" + - "launch page" +od: + mode: prototype + platform: desktop + scenario: marketing + preview: + type: html + entry: example.html + design_system: + requires: true + sections: [color, typography, layout, components] + inputs: + - name: product_name + type: string + required: true + - name: tagline + type: string + required: true + - name: bg_expression + type: string + description: "背景的 CSS 颜色表达式（例如 '#FDE8DF' 或 'rgba(...)'）。" + required: true + - name: fg_expression + type: string + description: "文字和主要形状的 CSS 颜色表达式（例如 '#1A1410' 或 'rgba(...)'）。" + required: true + - name: accent_expression + type: string + description: "品牌徽章和高亮的 CSS 颜色表达式。" + required: true + - name: deco_expression + type: string + description: "主要装饰元素的 CSS 颜色表达式。" + required: true + - name: stripe_expression + type: string + description: "强调条纹的 CSS 颜色表达式。" + required: true + - name: border_expression + type: string + description: "输入框边框的 CSS 颜色表达式（例如 'rgba(100,50,30,0.38)' 或 'color-mix(in srgb, var(--fg) 38%, transparent)'）。必须是有效的 CSS。" + required: true + - name: success_expression + type: string + description: "成功消息的 CSS 颜色表达式。如果 DESIGN.md 中未定义，默认为 #2D6A4F。" + required: true + - name: btn_label_expression + type: string + description: "按钮标签文字的 CSS 颜色表达式（例如 'rgba(255,255,255,1)' 或 '#fff'）。确保满足 WCAG AA 对比度要求。" + required: true + - name: ticker_bg_expression + type: string + description: "滚动条背景的 CSS 颜色表达式（例如 'rgba(0,0,0,0.9)'）。必须是有效的 CSS。" + required: true + - name: ticker_fg_expression + type: string + description: "滚动条文字的 CSS 颜色表达式（例如 'rgba(255,255,255,0.9)'）。确保满足对比度要求。" + required: true + - name: deco_stroke_expression + type: string + description: "SVG 描边的 CSS 颜色表达式（例如 'rgba(0,0,0,0.12)'）。通常为柔化后的前景色或中性色。" + required: true + - name: logo_shadow_expression + type: string + description: "Logo 容器阴影的 CSS 颜色表达式（例如 'rgba(0,0,0,0.08)'）。通常为微妙的前景色调。" + required: true + - name: logo_fg_expression + type: string + description: "Logo 文字/缩写的 CSS 颜色表达式（例如 'rgba(255,255,255,1)' 或 '#fff'）。确保与强调色之间满足对比度要求。" + required: true + - name: logo_mark + type: string + description: "文字缩写在默认情况下会进行 HTML 转义。仅在经过严格的允许列表过滤（移除脚本、事件处理器、foreignObject 和外部引用）后，才允许内联 SVG；不安全的输入会回退为转义后的文本。" + required: false + - name: display_font_url + type: string + description: "展示字体的名称，空格编码为 '+'（例如 'Syne'、'DM+Sans'）。用于 Google Fonts URL。" + required: true + - name: display_font_css + type: string + description: "展示字体在 CSS 中显示的名称（例如 'Syne'、'DM Sans'）。如需引号已在值中自带；模板中不额外添加引号。" + required: true + - name: body_font_url + type: string + description: "正文字体的名称，空格编码为 '+'（例如 'DM+Sans'、'IBM+Plex+Serif'）。用于 Google Fonts URL。" + required: true + - name: body_font_css + type: string + description: "正文字体在 CSS 中显示的名称（例如 'DM Sans'、'IBM Plex Serif'）。如需引号已在值中自带；模板中不额外添加引号。" + required: true + outputs: + primary: index.html + capabilities_required: + - file_write + example_prompt: "为某个设计工具制作一个等待名单页面——简洁、极简，带自定义 Logo 和一个行动号召按钮。" +--- + +# 等待名单页面技能 + +预发布页面是你与未来用户的首次握手。该技能打造一个聚焦、真诚的入口：你的品牌标识、你的产品介绍、一条加入早期名单的清晰路径。没有人为制造的稀缺感，没有虚假倒计时，没有诱导式营销——只是一个干净、移动端优先的容器，承载真实的兴趣。 + +## 工作流程 + +### 前置准备：加载加固模板和品牌基础 + +0. **加载品牌标识**——读取 `DESIGN.md`，获取颜色系统、字体搭配和空间规则。这是你的基础。等待名单页面的成败取决于与其所代表品牌的一致性。如果 `DESIGN.md` 不存在，请要求用户提供后再继续。 +1. **读取并复制可复用模板**——读取 `assets/template.html`。此模板是经过加固的种子文件，适用于所有输出。将其复制到 `index.html` 作为基础文件。不要从头编写 HTML，也不要偏离此结构。模板已包含所有必需的布局、表单结构、装饰、焦点样式和无障碍访问支架。 + +### 步骤：带验证和转义的 Token 替换 + +2. **根据输入映射 Token**——对于模板中的每个占位符（例如 `{{PRODUCT_NAME}}`、`{{BG_EXPRESSION}}`、`{{BORDER_EXPRESSION}}`、`{{LOGO_MARK}}`），按照以下替换规则处理： + - **文字 Token**（`{{PRODUCT_NAME}}`、`{{TAGLINE}}`）：在插入 HTML 文本节点或属性值之前，对 `<`、`>`、`&`、`"`、`'` 进行 HTML 转义。 + - **HTML Token**（`{{LOGO_MARK}}`）：如果使用文字缩写，默认进行 HTML 转义。如果使用内联 SVG，必须使用允许列表严格进行过滤：移除 ` + + + diff --git a/example.html b/example.html new file mode 100644 index 0000000..51de52c --- /dev/null +++ b/example.html @@ -0,0 +1,400 @@ + + + + + + Meridian — 即将上线 + + + + + + + + + +
+

Meridian 即将
上线

+

在你还没想完的时候，这个工作空间就已经把你的想法串联起来了。

+ +
+ + + +
+

你已在名单上！我们会与你联系。

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + diff --git a/references/checklist.md b/references/checklist.md new file mode 100644 index 0000000..f0ccd60 --- /dev/null +++ b/references/checklist.md @@ -0,0 +1,46 @@ +# 检查清单 — Waitlist 页面 + +## P0 — 在输出 `` 之前必须通过 + +- [ ] 页面有且只有一个主要 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 是 `` 或有意义的 SVG，则存在 Logo 的 `alt` 文本或 `aria-label` +- [ ] 滚动字幕条带有 `aria-hidden="true"`（装饰性，非有意义内容） +- [ ] `` 属性已设置为正确的语言代码 + +## P2 — 加分打磨项 + +- [ ] Google Fonts 使用 `display=swap` 加载，避免 FOIT +- [ ] 表单输入框有匹配的 `autocomplete` 属性（`given-name`、`email`） +- [ ] 按钮悬停时有细微的微动效（仅缩放或透明度——不引起布局偏移） +- [ ] 装饰区域在任何视口宽度下均不覆盖或重叠表单 +- [ ] 页面标题为 `{{PRODUCT_NAME}} — Coming Soon`，而非通用的占位符 + +--- + +翻译完成。请问还需要在这个项目里做什么工作？