Add initial project structure with essential files
- Created .gitignore to exclude build artifacts and dependencies. - Added index.html as the main entry point for the application. - Included LICENSE file with Apache 2.0 terms. - Initialized package.json and package-lock.json for project dependencies. - Added pnpm-lock.yaml for package management. - Created QUICKSTART.md for setup instructions. - Added README.md and README.zh-CN.md for project documentation in English and Chinese.
This commit is contained in:
pftom
@@ -0,0 +1,44 @@
|
||||
# Web prototype checklist
|
||||
|
||||
Run this before emitting `<artifact>`. P0 = must pass; P1 = should pass; P2 = nice to have.
|
||||
|
||||
## P0 — must pass
|
||||
|
||||
- [ ] **No raw hex outside `:root` token block.** Every color is `var(--bg)` / `var(--fg)` / `var(--muted)` / `var(--border)` / `var(--accent)` / `var(--surface)` (or a `color-mix()` of those). Grep `#[0-9a-fA-F]{3,8}` outside `:root{}` should return nothing.
|
||||
- [ ] **All headings use `var(--font-display)`.** No sans-serif `<h1>` / `<h2>`. Inter / Roboto / system-sans never serve as a display face.
|
||||
- [ ] **Accent appears at most twice per screen.** Count: eyebrow color, primary CTA fill, anything else? If three or more, demote one to `var(--fg)` or `var(--muted)`.
|
||||
- [ ] **No purple/violet gradient backgrounds.** No `linear-gradient(... #a855f7 / #8b5cf6 / purple ...)`. The seed template has no gradients on backgrounds — keep it that way.
|
||||
- [ ] **No emoji used as feature icons.** Use the inline SVG monoline marks shipped in Layout 3, or a tasteful single-character glyph in `--font-mono`. ✨ 🚀 🎯 are out.
|
||||
- [ ] **No invented metrics.** Every number on the page came from the user, the brief, or is clearly labelled as a placeholder (e.g. `[REPLACE] · 38×`). "10× faster", "99.9% uptime" without source = remove.
|
||||
- [ ] **No filler copy.** Zero "Feature One / Feature Two", lorem ipsum, "Lorem ipsum dolor". If a section feels empty, delete it; do not pad.
|
||||
- [ ] **`data-ocd-id` on every top-level `<section>`.** Used by comment mode to target sections.
|
||||
- [ ] **Mobile reflow works.** All `grid-2`, `grid-3`, `grid-4`, `grid-2-1`, `grid-1-2` collapse to one column at ≤920px (the default media query in `template.html` does this). Verify by mentally narrowing — no horizontal scroll.
|
||||
- [ ] **No `scrollIntoView()` calls.** Breaks the OCD preview iframe. Use `scrollTo({...})` if you need scroll behaviour.
|
||||
|
||||
## P1 — should pass
|
||||
|
||||
- [ ] **One decisive flourish.** A pull quote, a striking stat, a real-feeling photograph, one micro-animation on the hero. *One.* Not three.
|
||||
- [ ] **Section rhythm alternates.** No two stat rows in a row. No two feature triplets in a row. No two quote blocks in a row.
|
||||
- [ ] **Headlines under 14 words.** If longer, the writing is doing the design's job.
|
||||
- [ ] **Lead text under 56 ch / two sentences.** `max-width: 60ch` on `.lead` enforces this; don't override.
|
||||
- [ ] **CTA buttons say what happens.** "Start free" beats "Get Started". "Read the story" beats "Learn More".
|
||||
- [ ] **Hover states present** for all `<a>` and `.btn`. Seed template covers this.
|
||||
- [ ] **Numerics use `.num` (mono, tabular).** Prices, stats, version numbers, dates.
|
||||
- [ ] **One image style per page.** Don't mix square portrait headshots with widescreen product hero with vertical phone mock — pick a lane.
|
||||
|
||||
## P2 — nice to have
|
||||
|
||||
- [ ] **`text-wrap: pretty` / `balance`** on long paragraphs / headings (already on `<p>` and `h*` in seed).
|
||||
- [ ] **`color-mix()` for derived tones.** No additional `--accent-50` / `--accent-300` Bootstrap-style tokens — derive on the spot.
|
||||
- [ ] **Sticky topnav has frosted glass** (already in seed via `backdrop-filter: blur()`).
|
||||
- [ ] **Loaded fonts are system-first.** Iowan Old Style / Charter for serif, system stack for sans. Only pull a Google Font if DESIGN.md specifies one.
|
||||
|
||||
## Anti-slop spot-check
|
||||
|
||||
Look at the page for two seconds. If your gut says any of:
|
||||
|
||||
- "looks like every Cursor / Linear / Vercel ripoff I've seen this month"
|
||||
- "this could be any AI startup's homepage"
|
||||
- "the feature row has an icon, a heading, and three lines of vague benefit copy"
|
||||
|
||||
…go back, replace one feature cell with something more specific to *this* product (a screenshot, a concrete example, a sample of the actual output), and remove one accent.
|
||||
@@ -0,0 +1,247 @@
|
||||
# Web prototype layouts
|
||||
|
||||
**8 paste-ready section skeletons.** Drop into `<main id="content">` of `assets/template.html`. Don't write sections from scratch — pick the closest layout, paste, swap copy.
|
||||
|
||||
## Pre-flight (do this once before pasting anything)
|
||||
|
||||
1. **Read `assets/template.html`** through the end of the `<style>` block. Every class used below must exist there. If one is missing, add it to `<style>` rather than inlining it on each section.
|
||||
2. **Pick a section list before writing copy.** Default rhythms:
|
||||
- **Landing**: 1 hero → 2 features → 3 stat-row OR quote → 4 split → 6 cta-strip → footer
|
||||
- **Marketing / editorial**: 1 hero-center → 7 log-list → 4 split → 6 cta-strip
|
||||
- **Pricing / docs**: 1 hero-center → table-driven → 6 cta-strip
|
||||
3. **One accent per screen, used at most twice.** The hero eyebrow and the primary button already use it; budget any third usage carefully.
|
||||
|
||||
## Class inventory (must exist in `template.html`)
|
||||
|
||||
> `section` `container` `hero` `hero-center` `hero-split` `hero-cta` `eyebrow` `lead` `h1` `h2` `h3` `meta` `num` `btn` `btn-primary` `btn-secondary` `btn-ghost` `btn-arrow` `card` `card-flat` `card-rule` `feature` `feature-mark` `stat` `stat-num` `stat-label` `stat-unit` `quote` `quote-mark` `quote-author` `pill` `tag` `field` `input` `textarea` `ds-table` `num-col` `ph-img` `square` `portrait` `wide` `rule` `rule-strong` `grid-2` `grid-3` `grid-4` `grid-2-1` `grid-1-2` `row` `row-between` `stack` `log-row` `pull` `topnav` `pagefoot`
|
||||
|
||||
If you reach for a class not on this list, define it in `<style>` first or use `style="…"` inline. Never invent a global class on a `<section>` that isn't backed by CSS.
|
||||
|
||||
---
|
||||
|
||||
## Layout 1 — Hero, centered
|
||||
|
||||
Use when the page leads with a thesis sentence (most landings, most marketing pages). One eyebrow, one h1 (≤14 words), one lead sentence, two CTAs.
|
||||
|
||||
```html
|
||||
<section class="section hero" data-ocd-id="hero">
|
||||
<div class="container hero-center">
|
||||
<p class="eyebrow">EYEBROW · CONTEXT</p>
|
||||
<h1>One sharp sentence about what this is.</h1>
|
||||
<p class="lead">One concrete-value subhead — what changes for the reader.</p>
|
||||
<div class="hero-cta">
|
||||
<button class="btn btn-primary">Primary action</button>
|
||||
<button class="btn btn-secondary">Secondary</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
## Layout 2 — Hero, split (text + visual)
|
||||
|
||||
Use when there is a real product visual (product UI, screenshot, photograph). Left half copy, right half a `ph-img` placeholder the user replaces.
|
||||
|
||||
```html
|
||||
<section class="section" data-ocd-id="hero-split">
|
||||
<div class="container hero-split">
|
||||
<div>
|
||||
<p class="eyebrow">EYEBROW · ROLE</p>
|
||||
<h1>Headline that names the change.</h1>
|
||||
<p class="lead" style="margin-top: 20px;">A short subhead — concrete, not corporate. Two sentences max.</p>
|
||||
<div class="hero-cta" style="margin-top: 28px;">
|
||||
<button class="btn btn-primary">Primary action</button>
|
||||
<button class="btn btn-ghost btn-arrow">Read the story</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ph-img wide" aria-label="Hero visual placeholder">[ Hero visual · 16:9 ]</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
## Layout 3 — Feature triplet
|
||||
|
||||
Three feature cells. Lead with a small `<h2>` framing the row. Don't put an icon on every heading — one tasteful mark per cell, monoline.
|
||||
|
||||
```html
|
||||
<section class="section" data-ocd-id="features">
|
||||
<div class="container stack" style="gap: 56px;">
|
||||
<div style="max-width: 36ch;">
|
||||
<p class="eyebrow">WHAT'S DIFFERENT</p>
|
||||
<h2>Three things you'll notice in the first ten minutes.</h2>
|
||||
</div>
|
||||
<div class="grid-3">
|
||||
<div class="feature card-flat">
|
||||
<div class="feature-mark">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3v18M3 12h18"/></svg>
|
||||
</div>
|
||||
<h3>Specific feature one</h3>
|
||||
<p>Two-sentence description that names the user value, not the technology.</p>
|
||||
</div>
|
||||
<div class="feature card-flat">
|
||||
<div class="feature-mark">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></svg>
|
||||
</div>
|
||||
<h3>Specific feature two</h3>
|
||||
<p>Two-sentence description that names the user value, not the technology.</p>
|
||||
</div>
|
||||
<div class="feature card-flat">
|
||||
<div class="feature-mark">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 7h16M4 12h10M4 17h16"/></svg>
|
||||
</div>
|
||||
<h3>Specific feature three</h3>
|
||||
<p>Two-sentence description that names the user value, not the technology.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
## Layout 4 — Stat row (data billboard)
|
||||
|
||||
Use when there are real numbers. Three stats max — four feels like a brochure. **Don't invent metrics.** If you don't have a number, use a different layout.
|
||||
|
||||
```html
|
||||
<section class="section" data-ocd-id="stats">
|
||||
<div class="container">
|
||||
<p class="eyebrow" style="margin-bottom: 40px;">BY THE NUMBERS · 2026</p>
|
||||
<div class="grid-3">
|
||||
<div class="stat">
|
||||
<div class="stat-num num">38<span class="stat-unit">×</span></div>
|
||||
<p class="stat-label">less data moved over the wire vs. naive sync, on real customer workloads.</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-num num">3,184</div>
|
||||
<p class="stat-label">paying teams, including 14 of the YC W26 batch.</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-num num">$0.04<span class="stat-unit">/GB</span></div>
|
||||
<p class="stat-label">average egress saved — typical $1,800/mo bill drops to $200.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
## Layout 5 — Pull quote (testimonial)
|
||||
|
||||
A single decisive quote with attribution. Use sparingly — one per page, never two in a row.
|
||||
|
||||
```html
|
||||
<section class="section" data-ocd-id="quote">
|
||||
<div class="container" style="max-width: 800px;">
|
||||
<div class="quote-mark">"</div>
|
||||
<blockquote class="quote">Filebase pays for itself in the first month. We were going to hire a dedicated DevOps person to babysit our sync — instead we just switched.</blockquote>
|
||||
<p class="quote-author">— Mira Hassan, CTO at Northwind Studios</p>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
## Layout 6 — CTA strip (closing)
|
||||
|
||||
End the page on one decisive ask. Centered, generous whitespace, one primary button. No secondary unless the page has zero other buttons.
|
||||
|
||||
```html
|
||||
<section class="section" data-ocd-id="cta-strip" style="text-align: center;">
|
||||
<div class="container" style="max-width: 600px;">
|
||||
<h2>Stop measuring meetings. Start measuring focus.</h2>
|
||||
<p class="lead" style="margin: 16px auto 32px;">Free for solo. $4/mo per teammate after that.</p>
|
||||
<button class="btn btn-primary">Start free</button>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
## Layout 7 — Log list (changelog / blog index / posts)
|
||||
|
||||
Editorial layout for a list of dated entries. Date in mono on the left, title + dek in the middle, optional pull stat on the right. Borders on top, never around — boxes feel like a brochure.
|
||||
|
||||
```html
|
||||
<section class="section" data-ocd-id="log">
|
||||
<div class="container">
|
||||
<div class="row-between" style="margin-bottom: 32px;">
|
||||
<h2>Recent changes</h2>
|
||||
<a class="btn btn-ghost btn-arrow" href="#">View all</a>
|
||||
</div>
|
||||
<div>
|
||||
<article class="log-row">
|
||||
<span class="meta">Apr 27, 2026</span>
|
||||
<div>
|
||||
<h3>Sync engine v3 — half the wire bytes</h3>
|
||||
<p style="margin: 4px 0 0; color: var(--muted); font-size: 14px;">A new content-defined chunker that produces 38× fewer post-edit changes on Final Cut projects.</p>
|
||||
</div>
|
||||
<span class="pull meta">Engineering</span>
|
||||
</article>
|
||||
<article class="log-row">
|
||||
<span class="meta">Apr 19, 2026</span>
|
||||
<div>
|
||||
<h3>Per-folder bandwidth budgets</h3>
|
||||
<p style="margin: 4px 0 0; color: var(--muted); font-size: 14px;">Cap how much a single project can pull each month — useful for archive folders.</p>
|
||||
</div>
|
||||
<span class="pull meta">Product</span>
|
||||
</article>
|
||||
<article class="log-row">
|
||||
<span class="meta">Apr 04, 2026</span>
|
||||
<div>
|
||||
<h3>S3 + R2 dual-region replication</h3>
|
||||
<p style="margin: 4px 0 0; color: var(--muted); font-size: 14px;">Two providers, automatic failover. Enterprise tier only for now.</p>
|
||||
</div>
|
||||
<span class="pull meta">Infra</span>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
## Layout 8 — Comparison table (pricing, plan matrix, before/after)
|
||||
|
||||
Hairline borders, mono numerics, one column highlighted via an accent border. Don't put the whole row in surface-color — that screams "table".
|
||||
|
||||
```html
|
||||
<section class="section" data-ocd-id="pricing">
|
||||
<div class="container">
|
||||
<div style="text-align: center; max-width: 36ch; margin: 0 auto 56px;">
|
||||
<p class="eyebrow">PRICING</p>
|
||||
<h2>One row of features. Three lines of pricing.</h2>
|
||||
</div>
|
||||
<table class="ds-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Feature</th>
|
||||
<th class="num-col">Solo</th>
|
||||
<th class="num-col">Team</th>
|
||||
<th class="num-col">Enterprise</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Sync engine v3</td><td class="num-col">✓</td><td class="num-col">✓</td><td class="num-col">✓</td></tr>
|
||||
<tr><td>Per-folder budgets</td><td class="num-col">—</td><td class="num-col">✓</td><td class="num-col">✓</td></tr>
|
||||
<tr><td>SAML / SCIM</td><td class="num-col">—</td><td class="num-col">—</td><td class="num-col">✓</td></tr>
|
||||
<tr><td>Dedicated infra</td><td class="num-col">—</td><td class="num-col">—</td><td class="num-col">✓</td></tr>
|
||||
<tr style="border-top: 1px solid var(--fg);">
|
||||
<td><strong>Monthly</strong></td>
|
||||
<td class="num-col"><strong>$0</strong></td>
|
||||
<td class="num-col"><strong>$4 / seat</strong></td>
|
||||
<td class="num-col"><strong>Talk to us</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Section rhythm — when in doubt
|
||||
|
||||
For a 5-section landing:
|
||||
1. Hero (Layout 1 or 2)
|
||||
2. Features (Layout 3)
|
||||
3. Stats *or* quote (Layout 4 or 5)
|
||||
4. Split detail (custom, using `grid-2-1` / `grid-1-2`)
|
||||
5. CTA + footer (Layout 6)
|
||||
|
||||
For a 4-section docs/marketing index:
|
||||
1. Hero center (Layout 1)
|
||||
2. Log list (Layout 7)
|
||||
3. CTA + footer (Layout 6)
|
||||
|
||||
Two stat rows in a row, two quote blocks in a row, two feature triplets in a row — all visual fatigue. Alternate.
|
||||
Reference in New Issue
Block a user