admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

Browse Source 
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
This commit is contained in:
admin committed 2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
4184 files changed
+326 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

open-design/design-templates/waitlist-page/SKILL.md
+228
View File
@@ -0,0 +1,228 @@
---
name: waitlist-page
description: |
Minimal pre-launch landing with email capture, brand logo, and optional decorative layer.
Reads DESIGN.md for colors, typography, and layout rules.
Best for: product launches, beta signups, early access programs, indie projects.
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 color expression for background (e.g., '#FDE8DF' or 'rgba(...)')."
required: true
- name: fg_expression
type: string
description: "CSS color expression for text and primary shapes (e.g., '#1A1410' or 'rgba(...)')."
required: true
- name: accent_expression
type: string
description: "CSS color expression for brand badge and highlights."
required: true
- name: deco_expression
type: string
description: "CSS color expression for decoration primary."
required: true
- name: stripe_expression
type: string
description: "CSS color expression for accent stripe."
required: true
- name: border_expression
type: string
description: "CSS color expression for input borders (e.g., 'rgba(100,50,30,0.38)' or 'color-mix(in srgb, var(--fg) 38%, transparent)'). Must be valid CSS."
required: true
- name: success_expression
type: string
description: "CSS color expression for success message. Defaults to #2D6A4F if not in DESIGN.md."
required: true
- name: btn_label_expression
type: string
description: "CSS color expression for button label text (e.g., 'rgba(255,255,255,1)' or '#fff'). Ensure WCAG AA contrast."
required: true
- name: ticker_bg_expression
type: string
description: "CSS color expression for ticker background (e.g., 'rgba(0,0,0,0.9)'). Must be valid CSS."
required: true
- name: ticker_fg_expression
type: string
description: "CSS color expression for ticker text (e.g., 'rgba(255,255,255,0.9)'). Ensure contrast."
required: true
- name: deco_stroke_expression
type: string
description: "CSS color expression for SVG strokes (e.g., 'rgba(0,0,0,0.12)'). Typically a muted foreground or neutral."
required: true
- name: logo_shadow_expression
type: string
description: "CSS color expression for logo container shadow (e.g., 'rgba(0,0,0,0.08)'). Typically a subtle foreground shade."
required: true
- name: logo_fg_expression
type: string
description: "CSS color expression for logo text/initials (e.g., 'rgba(255,255,255,1)' or '#fff'). Ensure contrast against accent."
required: true
- name: logo_mark
type: string
description: "Text initials are HTML-escaped by default. Inline SVG is allowed only after strict allowlist-based sanitization (removing scripts, event handlers, foreignObject, and external references); unsafe input falls back to escaped text."
required: false
- name: display_font_url
type: string
description: "Display font name with spaces encoded as '+' (e.g., 'Syne', 'DM+Sans'). Used in Google Fonts URL."
required: true
- name: display_font_css
type: string
description: "Display font name as it appears in CSS (e.g., 'Syne', 'DM Sans'). Already quoted if needed; no extra quotes in template."
required: true
- name: body_font_url
type: string
description: "Body font name with spaces encoded as '+' (e.g., 'DM+Sans', 'IBM+Plex+Serif'). Used in Google Fonts URL."
required: true
- name: body_font_css
type: string
description: "Body font name as it appears in CSS (e.g., 'DM Sans', 'IBM Plex Serif'). Already quoted if needed; no extra quotes in template."
required: true
outputs:
primary: index.html
capabilities_required:
- file_write
example_prompt: "Make a waitlist page for a design tool — clean, minimal, with a custom logo and one call-to-action."
---
# Waitlist Page 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.
## Workflow
### Preflight: Load hardened template and brand foundation
0. **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.
1. **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.
### Steps: Token replacement with validation and escaping
2. **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.
3. **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)
4. **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.
### Validation: Run hardened quality gates before emitting
5. **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.
6. **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
### Output
7. **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.
## 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.
## 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.
open-design/design-templates/waitlist-page/assets/template.html
+457
View File
@@ -0,0 +1,457 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{PRODUCT_NAME}} — Coming Soon</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family={{DISPLAY_FONT_URL}}:wght@700;800&family={{BODY_FONT_URL}}:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg: {{BG_EXPRESSION}};
--fg: {{FG_EXPRESSION}};
--accent: {{ACCENT_EXPRESSION}};
--deco: {{DECO_EXPRESSION}};
--deco-stripe: {{STRIPE_EXPRESSION}};
--input-border: {{BORDER_EXPRESSION}};
--success: {{SUCCESS_EXPRESSION}};
--btn-label: {{BTN_LABEL_EXPRESSION}};
--ticker-bg: {{TICKER_BG_EXPRESSION}};
--ticker-fg: {{TICKER_FG_EXPRESSION}};
--deco-stroke: {{DECO_STROKE_EXPRESSION}};
--logo-shadow: {{LOGO_SHADOW_EXPRESSION}};
--logo-fg: {{LOGO_FG_EXPRESSION}};
--font-body: {{BODY_FONT_CSS}}, sans-serif;
--font-display: {{DISPLAY_FONT_CSS}}, serif;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow-x: hidden;
}
body {
font-family: var(--font-body);
background-color: var(--bg);
color: var(--fg);
display: flex;
flex-direction: column;
min-height: 100svh;
overflow-x: hidden;
overflow-y: auto;
}
/* Logo — reusable component */
.logo {
position: absolute;
top: 20px;
left: 24px;
display: flex;
align-items: center;
gap: 12px;
z-index: 10;
}
.logo-container {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: var(--logo-fg);
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
}
.logo-container svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.logo-text {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.logo-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
color: var(--fg);
}
.logo-dot {
font-size: 8px;
color: var(--accent);
opacity: 0.6;
}
/* Upper section — hero */
.upper {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 24px 40px;
position: relative;
z-index: 2;
}
.headline {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(48px, 7vw, 80px);
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--fg);
max-width: 900px;
margin: 0 auto 18px;
}
.subtext {
font-size: clamp(14px, 1.3vw, 16px);
font-weight: 400;
line-height: 1.5;
color: var(--fg);
opacity: 0.75;
max-width: 480px;
margin-bottom: 40px;
}
/* Form */
.form-row {
display: flex;
gap: 8px;
width: 100%;
max-width: 560px;
justify-content: center;
}
.form-row input {
flex: 1;
min-width: 0;
padding: 14px 16px;
font-family: var(--font-body);
font-size: 14px;
color: var(--fg);
background: transparent;
border: 1.5px solid var(--input-border);
border-radius: 3px;
outline: none;
transition: border-color 0.2s;
}
.form-row input::placeholder {
color: var(--input-border);
opacity: 0.7;
}
.form-row input:focus {
border-color: var(--fg);
outline: 2px solid var(--fg);
outline-offset: 2px;
}
.form-row button {
flex-shrink: 0;
padding: 14px 24px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--btn-label);
background: var(--fg);
border: none;
border-radius: 2px;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.15s;
}
.form-row button:hover {
opacity: 0.85;
}
.success-msg {
display: none;
margin-top: 16px;
font-size: 14px;
font-weight: 500;
color: var(--success);
}
.success-msg.visible {
display: block;
}
/* Decoration section */
.deco-section {
flex: 1;
position: relative;
overflow: hidden;
min-height: 25vh;
display: flex;
flex-direction: column;
}
/* Coil pattern */
.coil-row {
display: block;
width: 100%;
height: 60px;
flex-shrink: 0;
background: var(--bg);
}
/* Accent stripe */
.stripe {
width: 100%;
height: 12px;
background: var(--deco-stripe);
flex-shrink: 0;
}
/* Floor with grid */
.grid-floor {
flex: 1;
position: relative;
background-color: var(--deco);
min-height: 80px;
}
.grid-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Ticker ribbon */
.ticker-wrap {
width: 100%;
overflow: hidden;
background: var(--ticker-bg);
padding: 10px 0;
flex-shrink: 0;
}
.ticker-track {
display: flex;
gap: 24px;
white-space: nowrap;
animation: ticker-scroll 20s linear infinite;
}
.ticker-unit {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ticker-fg);
flex-shrink: 0;
display: flex;
align-items: center;
gap: 12px;
margin-right: -12px;
}
.ticker-star {
color: var(--deco-stripe);
margin-right: 4px;
}
@keyframes ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ticker-track {
animation: none;
}
}
/* Responsive */
@media (max-width: 600px) {
.logo {
left: 16px;
top: 16px;
}
.logo-container {
width: 40px;
height: 40px;
}
.logo-name {
font-size: 13px;
}
.upper {
padding: 50px 20px 30px;
}
.headline {
margin: 0 auto 12px;
}
.subtext {
margin-bottom: 30px;
}
.form-row {
flex-direction: column;
align-items: stretch;
}
.form-row input,
.form-row button {
width: 100%;
}
}
</style>
</head>
<body>
<!-- Logo placeholder — replace or customize -->
<div class="logo">
<div class="logo-container" data-od-id="logo-mark">
{{LOGO_MARK}}
</div>
<div class="logo-text">
<span class="logo-name" data-od-id="logo-name">{{PRODUCT_NAME}}</span>
<span class="logo-dot">·</span>
</div>
</div>
<!-- Hero section -->
<section class="upper">
<h1 class="headline" data-od-id="headline">{{PRODUCT_NAME}}<br>is launching</h1>
<p class="subtext" data-od-id="tagline">{{TAGLINE}}</p>
<form class="form-row" id="waitlist-form" data-od-id="form">
<input type="text" name="firstname" placeholder="First name">
<input type="email" name="email" placeholder="Work email" required>
<button type="submit">Join Waitlist</button>
</form>
<p class="success-msg" id="success-msg" role="status">You're on the list. We'll be in touch.</p>
</section>
<!-- Decorative section -->
<div class="deco-section">
<!-- Coil pattern (optional) -->
<svg class="coil-row" viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" data-od-id="coil">
<g fill="none" style="stroke: var(--deco-stroke);" stroke-width="1.5">
<path d="M 9,60 A 41,30 0 0 1 91,60"/>
<path d="M 94,60 A 41,30 0 0 1 176,60"/>
<path d="M 179,60 A 41,30 0 0 1 261,60"/>
<path d="M 264,60 A 41,30 0 0 1 346,60"/>
<path d="M 349,60 A 41,30 0 0 1 431,60"/>
<path d="M 434,60 A 41,30 0 0 1 516,60"/>
<path d="M 519,60 A 41,30 0 0 1 601,60"/>
<path d="M 604,60 A 41,30 0 0 1 686,60"/>
<path d="M 689,60 A 41,30 0 0 1 771,60"/>
<path d="M 774,60 A 41,30 0 0 1 856,60"/>
<path d="M 859,60 A 41,30 0 0 1 941,60"/>
<path d="M 944,60 A 41,30 0 0 1 1026,60"/>
<path d="M 1029,60 A 41,30 0 0 1 1111,60"/>
<path d="M 1114,60 A 41,30 0 0 1 1196,60"/>
<path d="M 1199,60 A 41,30 0 0 1 1281,60"/>
<path d="M 1284,60 A 41,30 0 0 1 1366,60"/>
<path d="M 1369,60 A 41,30 0 0 1 1451,60"/>
</g>
</svg>
<!-- Accent stripe -->
<div class="stripe" data-od-id="stripe"></div>
<!-- Floor with perspective grid -->
<div class="grid-floor">
<svg class="grid-svg" viewBox="0 0 1280 400" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" data-od-id="grid">
<g style="stroke: var(--deco-stroke);" stroke-width="1" fill="none">
<!-- Radiating lines from center top -->
<line x1="640" y1="0" x2="0" y2="400"/>
<line x1="640" y1="0" x2="128" y2="400"/>
<line x1="640" y1="0" x2="256" y2="400"/>
<line x1="640" y1="0" x2="384" y2="400"/>
<line x1="640" y1="0" x2="512" y2="400"/>
<line x1="640" y1="0" x2="640" y2="400"/>
<line x1="640" y1="0" x2="768" y2="400"/>
<line x1="640" y1="0" x2="896" y2="400"/>
<line x1="640" y1="0" x2="1024" y2="400"/>
<line x1="640" y1="0" x2="1152" y2="400"/>
<line x1="640" y1="0" x2="1280" y2="400"/>
<!-- Horizontal grid lines -->
<line x1="0" y1="80" x2="1280" y2="80"/>
<line x1="0" y1="160" x2="1280" y2="160"/>
<line x1="0" y1="240" x2="1280" y2="240"/>
<line x1="0" y1="320" x2="1280" y2="320"/>
</g>
</svg>
</div>
</div>
<!-- Ticker ribbon -->
<div class="ticker-wrap" aria-hidden="true" data-od-id="ticker">
<div class="ticker-track">
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<!-- Duplicate for seamless loop -->
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✦</span></span>
</div>
</div>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
if (!this.checkValidity()) {
this.reportValidity();
return;
}
this.style.display = 'none';
document.getElementById('success-msg').classList.add('visible');
});
</script>
</body>
</html>
open-design/design-templates/waitlist-page/example.html
+400
View File
@@ -0,0 +1,400 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meridian — Coming Soon</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg: #FDE8DF;
--fg: #1A1410;
--color-ink: #1A1410;
--accent: #1A1410;
--deco: #E8835A;
--deco-logo: #E8522A;
--deco-stripe: #F5A623;
--input-border: rgba(196, 169, 154, 0.38);
--success: #2D6A4F;
--btn-label: #FDE8DF;
--ticker-bg: rgba(0, 0, 0, 0.9);
--ticker-fg: rgba(255, 255, 255, 0.9);
--deco-stroke: rgba(0, 0, 0, 0.12);
--logo-shadow: rgba(0, 0, 0, 0.08);
--font-body: 'DM Sans', sans-serif;
--font-display: 'Syne', sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow-x: hidden;
}
.logo {
position: absolute;
top: 20px;
left: 24px;
display: flex;
align-items: center;
gap: 14px;
z-index: 10;
}
.logo-container {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, var(--deco-logo) 0%, var(--deco) 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 2px 8px var(--logo-shadow);
}
.logo-svg {
width: 100%;
height: 100%;
object-fit: contain;
padding: 2px;
}
.logo-text {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.logo-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.02em;
color: var(--color-ink);
}
.logo-dot {
font-size: 10px;
color: var(--deco-logo);
opacity: 0.6;
}
body {
font-family: var(--font-body);
background-color: var(--bg);
color: var(--fg);
display: flex;
flex-direction: column;
min-height: 100svh;
overflow-x: hidden;
overflow-y: auto;
}
.upper {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 24px 40px;
position: relative;
z-index: 2;
}
.headline {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(56px, 8vw, 96px);
letter-spacing: -0.03em;
line-height: 1.0;
color: var(--fg);
text-align: center;
max-width: 900px;
margin: 0 auto 22px;
}
.subtext {
font-size: clamp(15px, 1.5vw, 18px);
font-weight: 400;
line-height: 1.6;
color: var(--fg);
max-width: 420px;
margin-bottom: 44px;
}
.form-row {
display: flex;
gap: 8px;
width: 100%;
max-width: 560px;
justify-content: center;
}
.form-row input {
flex: 1;
min-width: 0;
padding: 14px 18px;
font-family: var(--font-body);
font-size: 15px;
color: var(--color-ink);
background: transparent;
border: 1.5px solid var(--input-border);
border-radius: 4px;
outline: none;
transition: border-color 0.2s;
}
.form-row input::placeholder {
color: var(--input-border);
}
.form-row input:focus {
border-color: var(--fg);
outline: 2px solid var(--fg);
outline-offset: 2px;
}
.form-row button {
flex-shrink: 0;
padding: 14px 22px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
color: var(--btn-label);
background: var(--accent);
border: none;
border-radius: 2px;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.15s, transform 0.1s;
}
.form-row button:hover {
opacity: 0.85;
}
.form-row button:active {
transform: scale(0.98);
}
.success-msg {
display: none;
margin-top: 18px;
font-size: 15px;
font-weight: 500;
color: var(--success);
}
.success-msg.visible {
display: block;
}
.deco-section {
flex: 1;
position: relative;
overflow: hidden;
min-height: 25vh;
display: flex;
flex-direction: column;
}
.coil-row {
display: block;
width: 100%;
height: 60px;
flex-shrink: 0;
background: var(--bg);
}
.stripe {
width: 100%;
height: 14px;
background: var(--deco-stripe);
flex-shrink: 0;
}
.grid-floor {
flex: 1;
position: relative;
background-color: var(--deco);
min-height: 80px;
}
.grid-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.ticker-wrap {
width: 100%;
overflow: hidden;
background: var(--ticker-bg);
padding: 10px 0;
flex-shrink: 0;
}
.ticker-track {
display: flex;
gap: 24px;
white-space: nowrap;
animation: ticker-scroll 20s linear infinite;
}
.ticker-unit {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ticker-fg);
flex-shrink: 0;
display: flex;
align-items: center;
gap: 12px;
margin-right: -12px;
}
.ticker-star {
color: var(--deco-stripe);
margin-right: 4px;
}
@keyframes ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ticker-track {
animation: none;
}
}
@media (max-width: 600px) {
.logo {
left: 16px;
top: 16px;
gap: 10px;
}
.logo-container {
width: 40px;
height: 40px;
}
.logo-name {
font-size: 14px;
}
.upper {
padding: 30px 16px;
flex: 0 0 50vh;
}
.form-row {
flex-direction: column;
align-items: stretch;
}
.form-row input,
.form-row button {
width: 100%;
}
}
</style>
</head>
<body>
<div class="logo">
<div class="logo-container">
<svg class="logo-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="48" fill="var(--deco-logo)"/>
<text x="50" y="60" font-family="'DM Sans', sans-serif" font-size="42" font-weight="700" text-anchor="middle" fill="var(--btn-label)" letter-spacing="-1">Md</text>
</svg>
</div>
<div class="logo-text">
<span class="logo-name">Meridian</span>
<span class="logo-dot">·</span>
</div>
</div>
<section class="upper">
<h1 class="headline">Meridian is<br>almost here</h1>
<p class="subtext">The workspace that connects your ideas before you've finished thinking them.</p>
<form class="form-row" id="waitlist-form">
<input type="text" name="firstname" placeholder="First name" autocomplete="given-name">
<input type="email" name="email" placeholder="Work email" autocomplete="email" required>
<button type="submit">Join the Waitlist</button>
</form>
<p class="success-msg" id="success-msg" role="status">You're on the list! We'll be in touch.</p>
</section>
<div class="deco-section">
<svg class="coil-row" viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<g fill="none" style="stroke: var(--deco-stroke);" stroke-width="1.5">
<path d="M 9,60 A 41,30 0 0 1 91,60"/>
<path d="M 94,60 A 41,30 0 0 1 176,60"/>
<path d="M 179,60 A 41,30 0 0 1 261,60"/>
<path d="M 264,60 A 41,30 0 0 1 346,60"/>
<path d="M 349,60 A 41,30 0 0 1 431,60"/>
<path d="M 434,60 A 41,30 0 0 1 516,60"/>
<path d="M 519,60 A 41,30 0 0 1 601,60"/>
<path d="M 604,60 A 41,30 0 0 1 686,60"/>
<path d="M 689,60 A 41,30 0 0 1 771,60"/>
<path d="M 774,60 A 41,30 0 0 1 856,60"/>
<path d="M 859,60 A 41,30 0 0 1 941,60"/>
<path d="M 944,60 A 41,30 0 0 1 1026,60"/>
<path d="M 1029,60 A 41,30 0 0 1 1111,60"/>
<path d="M 1114,60 A 41,30 0 0 1 1196,60"/>
<path d="M 1199,60 A 41,30 0 0 1 1281,60"/>
<path d="M 1284,60 A 41,30 0 0 1 1366,60"/>
<path d="M 1369,60 A 41,30 0 0 1 1451,60"/>
</g>
</svg>
<div class="stripe"></div>
<div class="grid-floor">
<svg class="grid-svg" viewBox="0 0 1280 400" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<g style="stroke: var(--deco-stroke);" stroke-width="1" fill="none">
<line x1="640" y1="0" x2="0" y2="400"/>
<line x1="640" y1="0" x2="128" y2="400"/>
<line x1="640" y1="0" x2="256" y2="400"/>
<line x1="640" y1="0" x2="384" y2="400"/>
<line x1="640" y1="0" x2="512" y2="400"/>
<line x1="640" y1="0" x2="640" y2="400"/>
<line x1="640" y1="0" x2="768" y2="400"/>
<line x1="640" y1="0" x2="896" y2="400"/>
<line x1="640" y1="0" x2="1024" y2="400"/>
<line x1="640" y1="0" x2="1152" y2="400"/>
<line x1="640" y1="0" x2="1280" y2="400"/>
<line x1="0" y1="80" x2="1280" y2="80"/>
<line x1="0" y1="160" x2="1280" y2="160"/>
<line x1="0" y1="240" x2="1280" y2="240"/>
<line x1="0" y1="320" x2="1280" y2="320"/>
<line x1="0" y1="390" x2="1280" y2="390"/>
</g>
</svg>
</div>
</div>
<div class="ticker-wrap" aria-hidden="true">
<div class="ticker-track">
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
<span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
</div>
</div>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
if (!this.checkValidity()) {
this.reportValidity();
return;
}
this.style.display = 'none';
document.getElementById('success-msg').classList.add('visible');
});
</script>
</body>
</html>
open-design/design-templates/waitlist-page/references/checklist.md
+42
View File
@@ -0,0 +1,42 @@
# Checklist — Waitlist Page
## P0 — Must pass before emitting `<artifact>`
- [ ] Page has exactly one primary CTA (the email field + submit button)
- [ ] No hero gradient that spans more than 20% of the viewport height
- [ ] Email input has a visible label or meaningful placeholder — not just "Email"
- [ ] No invented social proof numbers (e.g., "10,000 people waiting")
- [ ] **No countdown timer present** — countdown timers are an explicit anti-pattern for this skill (see SKILL.md §Quality gates)
- [ ] No horizontal scroll at 375px viewport
- [ ] No generic emoji icons used as decorative elements
- [ ] Typography uses at most two font families (display + body)
- [ ] First name field has no `required` attribute
- [ ] Work email field has `type="email"` and `required`
- [ ] Form does **not** use `novalidate`; JS guard calls `checkValidity()` before showing success state
- [ ] Success message uses `role="status"` or `aria-live="polite"` so screen readers announce it
- [ ] All color values derived from DESIGN.md; only allowed hardcoded exception is `#2D6A4F` for `--success`
- [ ] All user-supplied text tokens are HTML-escaped; color tokens adhere to strict grammar (`#hex`, `rgb/hsl/oklch`, `color-mix()`) and contain no unsafe characters (`;`, `{}`, `<`, `>`, `/*`, `@`, `url(`); font name tokens are URL-encoded in the Google Fonts URL; `{{LOGO_MARK}}` is escaped text initials or strictly sanitized inline SVG (no scripts/events)
## P1 — Should pass for quality submission
- [ ] Hero section is visually distinct and above-the-fold
- [ ] Email submit button has hover and active states
- [ ] Form validation provides clear inline feedback on error (native `reportValidity()` is acceptable)
- [ ] Page is scrollable (not clipped) at 375×667 and 390×844; CTA visible without scroll at those sizes
- [ ] Ticker animation is paused or removed under `prefers-reduced-motion: reduce`
- [ ] All interactive elements have visible focus styles (not just `outline: none`)
- [ ] Keyboard: Tab reaches each form field and the submit button; Enter submits the form
- [ ] Color contrast of body text on background meets WCAG AA (≥ 4.5:1)
- [ ] Color contrast of button label on button background meets WCAG AA (≥ 4.5:1)
- [ ] Color contrast of logo text/initials on logo container background meets WCAG AA (≥ 4.5:1)
- [ ] Logo alt text or `aria-label` present if logo is an `<img>` or meaningful SVG
- [ ] Ticker ribbon has `aria-hidden="true"` (decorative, not meaningful content)
- [ ] `<html lang="">` attribute is set to the correct language code
## P2 — Nice-to-have polish
- [ ] Google Fonts loaded with `display=swap` to avoid FOIT
- [ ] Form inputs have matching `autocomplete` attributes (`given-name`, `email`)
- [ ] Subtle micro-animation on button hover (scale or opacity only — no layout shift)
- [ ] Decoration zone does not cover or overlap the form at any viewport width
- [ ] Page title is `{{PRODUCT_NAME}} — Coming Soon`, not a generic placeholder