类型：Site模板 · 收录：2026-10-17 12:02:26 · 源码：会员可见
# Prompt: Recreate the Nomi AI Agent Hero (exact spec)
Copy everything below the line into your AI coding tool.
---
Build a single-file `index.html` (inline CSS + vanilla JS, no frameworks, no build step) that recreates the **Nomi AI Agent** hero section **exactly** as specified. It is a one-screen, light-grey, monochrome hero:
- a full-bleed looping video of a cute 3D kitten drawn in black horizontal scanlines
- a chunky pixel/bitmap headline "NOMI / AI AGENT"
- monospace copy, a black button and a text link, and a stats row
- a pixel-style speech bubble with a blinking cursor, pinned beside the cat
Follow every value literally.
## 1. Media (use these exact URLs)
```html
<video class="hero__media" autoplay muted loop playsinline preload="auto"
poster="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261008_131819_f6c1a554-6417-497f-a8b7-585449018c39.png">
<source src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261008_131936_fe93478c-8802-4266-a258-b4f95767462c.mp4" type="video/mp4">
</video>
```
The video is 1920×1080, about 8 s, no audio, and loops. The kitten walks around the centre-right of the frame. The upper-right of the frame is filled with drifting black scanline streaks on a near-white ground.
## 2. Font
**IBM Plex Mono** 400 and 500 for every piece of text. The headline is not text: it's an SVG (section 5).
```html
<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=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
```
Stack: `"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace`, with `-webkit-font-smoothing: antialiased`.
## 3. Head
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nomi AI Agent — The calm cat for busy days</title>
```
## 4. Tokens and unit system
Everything scales off a **982 × 696 reference frame** through one unit, `--u`:
```css
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--u: clamp(0.8px, min(calc(100vw / 982), calc(100vh / 696)), 1.7px);
--gutter: calc(var(--u) * 21);
--ink: #050505;
--paper: #e7e7e7;
/* scale of the 1920×1080 video under object-fit: cover; used to pin the bubble to the video */
--vs: max(calc(100vw / 1920), calc(100vh / 1080));
}
html, body { height: 100%; background: var(--paper); }
body { color: var(--ink); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
```
## 5. Structure (exact DOM)
```
section.hero
video.hero__media (section 1)
header.nav#nav
a.nav__logo[href="#"][aria-label="Nomi AI Agent home"] > svg (logo, below)
button.nav__toggle#navToggle[aria-label="Menu"][aria-expanded="false"][aria-controls="navLinks"] > span
ul.nav__links#navLinks
li > a[href="#features"] "Skillset"
li > a[href="#how-it-works"] "Daily Rhythm"
li > a[href="#pricing"] "Members"
li > a[href="#about"] "Story"
li > a[href="#contact"] "Support"
h1.hero__title
span.sr-only "Nomi AI Agent"
svg (pixel headline, below)
p.bubble[aria-label="Nomi says: 3 bills paid, 1 dinner booked."]
"Purr! 3 bills paid,<br>1 dinner booked."
span.bubble__cursor[aria-hidden]
svg.bubble__tail (below)
div.hero__body
p.hero__lede "Nomi naps on your inbox and wakes up to<br> sort plans, reply fast, and guard focus."
div.hero__actions
a.btn[href="#get-started"] "Try It Free"
a.link[href="#how-it-works"] "Watch Nomi Think" + chevron svg
ul.hero__stats[aria-label="Nomi at a glance"]
li "38k inboxes tamed" li "9/10 purrs" li "0 lost tabs"
```
**Logo** (22×22, a black badge with two light four-point sparkles):
```html
<svg viewBox="0 0 22 22" aria-hidden="true">
<path fill="#050505" d="M0 0Q5.5 4.6 7 2.6Q11-1.6 15 2.6Q16.500 4.6 22 0V22Q16.500 17.400 15 19.400Q11 23.600 7 19.400Q5.500 17.400 0 22Z"/>
<path fill="#ececea" d="M5.800 6.600Q6.500 10.300 10.200 11Q6.500 11.700 5.800 15.400Q5.100 11.700 1.400 11Q5.100 10.300 5.800 6.600ZM16.200 6.600Q16.900 10.300 20.600 11Q16.900 11.700 16.200 15.400Q15.500 11.700 11.800 11Q15.500 10.300 16.200 6.600Z"/>
</svg>
```
**Pixel headline.** Paste exactly. It is 132×46 units of axis-aligned rects, rendered crisp:
```html
<svg viewBox="0 0 132 46" shape-rendering="crispEdges" aria-hidden="true"><path d="M0 0h4v3h-4zM11 0h4v3h-4zM0 3h7v1h-7zM11 3h4v1h-4zM0 4h7v1h-7zM11 4h4v1h-4zM0 5h10v2h-10zM11 5h4v2h-4zM0 7h4v1h-4zM6 7h4v1h-4zM11 7h4v1h-4zM0 8h4v1h-4zM6 8h4v1h-4zM11 8h4v1h-4zM0 9h4v1h-4zM6 9h4v1h-4zM11 9h4v1h-4zM0 10h4v1h-4zM6 10h4v1h-4zM11 10h4v1h-4zM0 11h4v2h-4zM6 11h4v2h-4zM11 11h4v2h-4zM0 13h4v1h-4zM6 13h4v1h-4zM11 13h4v1h-4zM0 14h4v1h-4zM6 14h9v1h-9zM0 15h4v2h-4zM8 15h7v2h-7zM0 17h4v1h-4zM8 17h7v1h-7zM0 18h4v3h-4zM11 18h4v3h-4zM22 0h10v3h-10zM19 3h16v1h-16zM19 4h4v3h-4zM31 4h4v3h-4zM19 7h4v1h-4zM31 7h4v1h-4zM19 8h4v2h-4zM31 8h4v2h-4zM19 10h4v1h-4zM31 10h4v1h-4zM19 11h4v2h-4zM31 11h4v2h-4zM19 13h4v1h-4zM31 13h4v1h-4zM19 14h4v2h-4zM31 14h4v2h-4zM19 16h4v1h-4zM31 16h4v1h-4zM19 17h16v1h-16zM22 18h10v3h-10zM42 0h4v3h-4zM53 0h4v3h-4zM39 3h10v1h-10zM50 3h10v1h-10zM39 4h4v3h-4zM45 4h4v3h-4zM50 4h4v3h-4zM56 4h4v3h-4zM39 7h4v1h-4zM45 7h4v1h-4zM50 7h4v1h-4zM56 7h4v1h-4zM39 8h4v2h-4zM45 8h9v2h-9zM56 8h4v2h-4zM39 10h4v1h-4zM47 10h5v1h-5zM56 10h4v1h-4zM39 11h4v2h-4zM47 11h5v2h-5zM56 11h4v2h-4zM39 13h4v1h-4zM47 13h5v1h-5zM56 13h4v1h-4zM39 14h4v2h-4zM47 14h5v2h-5zM56 14h4v2h-4zM39 16h4v1h-4zM47 16h5v1h-5zM56 16h4v1h-4zM39 17h4v1h-4zM47 17h5v1h-5zM56 17h4v1h-4zM39 18h4v3h-4zM56 18h4v3h-4zM64 0h10v3h-10zM64 3h10v1h-10zM67 4h4v1h-4zM67 5h4v2h-4zM67 7h4v1h-4zM67 8h4v1h-4zM67 9h4v1h-4zM67 10h4v1h-4zM67 11h4v2h-4zM67 13h4v1h-4zM67 14h4v1h-4zM67 15h4v2h-4zM64 17h10v1h-10zM64 18h10v3h-10zM5 25h5v3h-5zM19 25h10v3h-10zM45 25h5v3h-5zM62 25h10v3h-10zM81 25h10v3h-10zM98 25h4v3h-4zM109 25h4v3h-4zM119 25h10v3h-10zM3 28h9v1h-9zM19 28h10v1h-10zM43 28h9v1h-9zM59 28h16v1h-16zM78 28h16v1h-16zM98 28h7v1h-7zM109 28h4v1h-4zM116 28h16v1h-16zM3 29h4v1h-4zM8 29h4v1h-4zM22 29h4v1h-4zM43 29h4v1h-4zM48 29h4v1h-4zM59 29h4v1h-4zM71 29h4v1h-4zM78 29h4v1h-4zM90 29h4v1h-4zM98 29h7v1h-7zM109 29h4v1h-4zM116 29h4v1h-4zM122 29h4v1h-4zM128 29h4v1h-4zM0 30h7v2h-7zM8 30h7v2h-7zM22 30h4v2h-4zM40 30h7v2h-7zM48 30h7v2h-7zM59 30h4v2h-4zM71 30h4v2h-4zM78 30h4v2h-4zM90 30h4v2h-4zM98 30h10v2h-10zM109 30h4v2h-4zM116 30h4v2h-4zM122 30h4v2h-4zM128 30h4v2h-4zM0 32h4v1h-4zM11 32h4v1h-4zM22 32h4v1h-4zM40 32h4v1h-4zM51 32h4v1h-4zM59 32h4v1h-4zM71 32h4v1h-4zM78 32h4v1h-4zM98 32h4v1h-4zM104 32h4v1h-4zM109 32h4v1h-4zM122 32h4v1h-4zM0 33h4v1h-4zM11 33h4v1h-4zM22 33h4v1h-4zM40 33h4v1h-4zM51 33h4v1h-4zM59 33h4v1h-4zM71 33h4v1h-4zM78 33h10v1h-10zM98 33h4v1h-4zM104 33h4v1h-4zM109 33h4v1h-4zM122 33h4v1h-4zM0 34h4v1h-4zM11 34h4v1h-4zM22 34h4v1h-4zM40 34h4v1h-4zM51 34h4v1h-4zM59 34h4v1h-4zM65 34h4v1h-4zM71 34h4v1h-4zM78 34h10v1h-10zM98 34h4v1h-4zM104 34h4v1h-4zM109 34h4v1h-4zM122 34h4v1h-4zM0 35h4v1h-4zM11 35h4v1h-4zM22 35h4v1h-4zM40 35h4v1h-4zM51 35h4v1h-4zM59 35h4v1h-4zM65 35h4v1h-4zM78 35h10v1h-10zM98 35h4v1h-4zM104 35h4v1h-4zM109 35h4v1h-4zM122 35h4v1h-4zM0 36h15v2h-15zM22 36h4v2h-4zM40 36h15v2h-15zM59 36h4v2h-4zM65 36h10v2h-10zM78 36h10v2h-10zM98 36h4v2h-4zM104 36h4v2h-4zM109 36h4v2h-4zM122 36h4v2h-4zM0 38h15v1h-15zM22 38h4v1h-4zM40 38h15v1h-15zM59 38h4v1h-4zM68 38h7v1h-7zM78 38h4v1h-4zM98 38h4v1h-4zM104 38h4v1h-4zM109 38h4v1h-4zM122 38h4v1h-4zM0 39h15v1h-15zM22 39h4v1h-4zM40 39h15v1h-15zM59 39h4v1h-4zM68 39h7v1h-7zM78 39h4v1h-4zM90 39h4v1h-4zM98 39h4v1h-4zM104 39h9v1h-9zM122 39h4v1h-4zM0 40h4v2h-4zM11 40h4v2h-4zM22 40h4v2h-4zM40 40h4v2h-4zM51 40h4v2h-4zM59 40h4v2h-4zM71 40h4v2h-4zM78 40h4v2h-4zM90 40h4v2h-4zM98 40h4v2h-4zM106 40h7v2h-7zM122 40h4v2h-4zM0 42h4v1h-4zM11 42h4v1h-4zM19 42h10v1h-10zM40 42h4v1h-4zM51 42h4v1h-4zM59 42h16v1h-16zM78 42h16v1h-16zM98 42h4v1h-4zM106 42h7v1h-7zM122 42h4v1h-4zM0 43h4v3h-4zM11 43h4v3h-4zM19 43h10v3h-10zM40 43h4v3h-4zM51 43h4v3h-4zM62 43h10v3h-10zM81 43h10v3h-10zM98 43h4v3h-4zM109 43h4v3h-4zM122 43h4v3h-4z"/></svg>
```
**Bubble tail** (a stepped pixel tail: black outline, paper fill):
```html
<svg class="bubble__tail" viewBox="0 0 6 6" shape-rendering="crispEdges" aria-hidden="true"><path fill="#e7e7e7" d="M1 0h4v1h-1v1h-1v1h-1v1h-1z"/><path fill="#050505" d="M0 0h1v5h-1zM1 4h1v1h-1zM2 3h1v1h-1zM3 2h1v1h-1zM4 1h1v1h-1zM5 0h1v1h-1z"/></svg>
```
**Link chevron:** `<svg viewBox="0 0 5 8" aria-hidden="true"><path d="M.8.8 4 4 .8 7.200"/></svg>`
## 6. Desktop styles
- `.hero`: `position:relative; height:100vh; min-height:460px; width:100%; overflow:hidden; isolation:isolate; background:var(--paper)`.
- `.hero__media`: `position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 50%; z-index:-1; pointer-events:none`.
- `.nav`: absolute across the top, height `u*80`, padding `0 u*23 0 var(--gutter)`, flex, centred vertically, `space-between`, z-index 2.
- `.nav__logo`: `u*22` square.
- `.nav__links`: flex, gap `u*25`, no bullets. Links are `u*11`, line-height 1, letter-spacing `-0.01em`, and fade to opacity .55 on hover (.2s).
- `.nav__toggle`: hidden on desktop.
- `.hero__title`: absolute, `top:23.1%`, `left:u*27`, `width:u*436`, line-height 0. Its svg is block, `width:100%; height:auto; fill:var(--ink)`.
- `.sr-only`: standard visually-hidden pattern (`clip-path: inset(50%)`, 1px box).
- `.hero__body`: absolute, `left:var(--gutter)`, `bottom:17.4%`.
- `.hero__lede`: `u*13.3` / line-height `u*17`, margin-bottom `u*46`.
- `.hero__actions`: flex, centred, gap `u*17`.
- `.btn`: inline-flex, height `u*31`, padding `0 u*19`, radius `u*2`, background `--ink`, color `#dcdcda`, `u*11`, no wrap. On hover: background `#2a2a2a` and `translateY(-1px)` (.2s).
- `.link`: inline-flex, gap `u*9`, `u*11`. The chevron svg is `u*5 × u*8`, no fill, `stroke: currentColor`, stroke-width 1.4, and slides `translateX(u*3)` on hover.
- `.hero__stats`: flex, wrap, gap `u*8 u*14`, margin-top `u*30`, `u*11`, line-height 1, no wrap per item.
- Separator, on `li + li::before`: an inline-block black square `u*3 × u*3` with margin-right `u*14`, vertically centred (a "pixel dot").
- **Bubble** `.bubble`, pinned to a point in the video frame (70% across, 24% down) using the cover maths:
```css
--b: max(2px, calc(var(--u) * 2));
position: absolute;
left: calc((100vw - 1920 * var(--vs)) * .62 + 1920 * var(--vs) * .70);
top: calc((100vh - 1080 * var(--vs)) * .5 + 1080 * var(--vs) * .24);
transform: translateY(calc(-100% - var(--u) * 12));
padding: calc(var(--u) * 11) calc(var(--u) * 15);
background: var(--paper);
box-shadow: 0 calc(var(--b) * -1) 0 0 var(--ink), 0 var(--b) 0 0 var(--ink),
calc(var(--b) * -1) 0 0 0 var(--ink), var(--b) 0 0 0 var(--ink); /* border with notched pixel corners */
font-size: calc(var(--u) * 13.3); line-height: calc(var(--u) * 18);
white-space: nowrap; z-index: 1;
```
- `.bubble__tail`: absolute, `left:u*14`, `top: calc(100% + var(--b) - 1px)`, `u*18` square, overflow visible.
- `.bubble__cursor`: inline-block, `.55em × 1.05em`, margin-left `.3em`, black, `vertical-align: -.2em`, `animation: blink 1.06s steps(1) infinite` with `@keyframes blink { 50% { opacity: 0 } }`.
## 7. Tablet / mobile (`max-width: 720px`)
- `--u: clamp(0.8px, calc(100vw / 400), 1.5px); --gutter: calc(var(--u) * 20);` and `.hero` `min-height: u*620`.
- **Video becomes a band:** `top:27%; height:50%; object-position:73% 50%`, with a vertical fade mask `linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent)`. Include the `-webkit-` version too.
- Nav: height `u*68`, padding-right `--gutter`; logo `u*26`.
- The toggle shows as a `u*40` button with margin-right `u*-9`. It holds two bars, each `u*22 × u*2` in currentColor, offset −3.5u and +7u. When `.nav.is-open`, the bars rotate into an X (45° / −90°) over .25s.
- Links become a black dropdown card: absolute at `top:100%`, inset by the gutter, padding `u*6 u*16`, radius `u*2`. It's hidden with opacity 0, visibility hidden and `translateY(u*-6)`, and fades in over .2s when open. Links are block, padding `u*14 0`, `u*14`, colour `#ececea`, with a 1px `rgba(255,255,255,.14)` divider between items.
- Headline: `top:u*92; left:var(--gutter); width:min(100% - 2×gutter, u*396)`.
- Body: right `--gutter`, bottom `u*36`. Lede `u*14` / `u*20`, margin-bottom `u*24`, max-width 26em, and its `<br>` is hidden.
- Button: height `u*42`, padding `0 u*22`, `u*13`. Link `u*13`. Stats: margin-top `u*20`, `u*12`.
- Bubble: `left:auto; right:var(--gutter); top:27%; transform:translateY(u*4)`, `u*12` / `u*16`, padding `u*9 u*12`.
- **Short landscape phones** (`max-width:720px and max-height:520px`):
- The video goes full-bleed again: `top:0; height:100%; object-position:100% 50%`, no mask.
- Headline `width:u*230; top:u*70`.
- The bubble is hidden.
## 8. Behaviour (inline script at the end of body)
- The toggle opens and closes the menu: it toggles `.is-open` on `#nav` and updates `aria-expanded`.
- Clicking any link in the menu closes it.
- If `prefers-reduced-motion: reduce` matches, pause the video.
- In CSS, also stop the cursor blinking under that media query.
## 9. Acceptance check
At 1440×900 you should see:
- The black badge logo top-left and the five nav links top-right.
- "NOMI" over "AI AGENT" in black pixel letters at the left, about 30% of the page width.
- The scanline kitten filling the centre-right, with drifting streaks at the top-right.
- The bubble "Purr! 3 bills paid, / 1 dinner booked." with a blinking block cursor, next to the cat's ear and below the nav.
- At the lower left: the two-line lede, the black "Try It Free" button, the "Watch Nomi Think ›" link, and "38k inboxes tamed ▪ 9/10 purrs ▪ 0 lost tabs".