智能运营

作者 admin

2026年11月7日 9 分钟阅读

0 0

提示词

代码

# 精确复刻提示词 — NovaAI 落地页

以**像素级忠实度**复刻此页面。技术栈：React + TypeScript + Vite + Tailwind CSS + lucide-react。不要自行创作其他文案、布局、字体、颜色或效果。

---

## 页面标识

- **标题：** `NOVA_AI — 今日 AI 与大胆梦想同行`
- **品牌：** 小写 `novaai`，左侧放置 Lucide `Hexagon` 图标（size 24，strokeWidth 1.5）
- **整体感觉：** 深色电影感 AI 营销网站；全视口滚动擦洗视频背景；带投影的白色文字；磨砂玻璃 UI 标签；疏朗的编辑式布局；不要紫色渐变，不要奶油色纸张质感，不要图标卡片网格

---

## 素材（使用以下精确 URL）

**Hero 滚动视频（CloudFront — 必需）：**
```

```
视频内容：抽象 3D 形态（垂落的白色线缆，末端泛着金色光芒 → 带暖橙色核心的有机白色球体／脑状褶皱），柔和的蓝灰色薄雾／颗粒背景，漂浮的散景粒子。1920×1080。

**可选的本地镜像，用于提高可靠性：** `/hero.mp4`（同一文件）和 `/hero-poster.jpg`（首帧静态图）。生产代码优先使用 CloudFront URL；离线／开发环境可使用本地副本。

**肖像（“与 Mitha 交谈”）— 精确 URL：**
```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260728_050334_5b076e26-0ce7-4898-b432-d764190e448f.png&w=1280&q=85
```
显示为 `h-24 w-20`（`96×80px`）、`rounded-lg`、`object-cover`。Alt：`Mitha，NovaAI 联合创始人`。

---

## 字体

- 加载 Google Fonts Inter 字重 **400, 500, 600, 700**
- 正文：`font-family: 'Inter', system-ui, sans-serif`
- Tailwind：`font-sans` 和 `font-mono` 均映射到 Inter（等宽标签仍使用 `font-mono` 类，但以 Inter 渲染）
- 文字启用抗锯齿；选中文本颜色为 `rgba(255,255,255,0.2)`
- 页面背景：`#0a0a0a`；默认文字为白色

---

## 全局结构

```
relative 根节点
  ScrollVideo (fixed inset-0 z-0, pointer-events-none)
  relative z-10 容器
    Navbar (fixed top)
    main
      SectionOne (min-h-screen / 100svh)
      spacer div h-[80vh] (aria-hidden)  ← 对滚动视频时长至关重要
      SectionTwo (min-h-screen / 100svh)
```

所有位置的水平内边距节奏：`px-5 sm:px-8 md:px-12`。  
固定导航栏下方的区块顶部内边距：`pt-24 sm:pt-28`。  
底部内边距：`pb-12 md:pb-16`。

---

## 滚动擦洗视频背景（精确行为）

固定的全出血图层 `z-0`，背景 `#0a0a0a`，`overflow-hidden`，`pointer-events-none`。

**图层（从底到顶）：**
1. 海报 `<img>` — 完整覆盖；视频拥有已解码帧或帧缓存就绪后淡出（`opacity-0`，500ms）
2. `<video>` — muted、playsInline、preload=auto、object-cover；仅在视频拥有画面帧且 canvas 帧缓存尚未就绪时可见，随后淡出
3. `<canvas>` — 完整覆盖；绘制擦洗帧；就绪后淡入

**滚动映射：**
- `progress = scrollY / (scrollHeight - innerHeight)`，限制在 0–1
- 使用 lerp 平滑：每次 `requestAnimationFrame` 执行 `smoothed += (target - smoothed) * 0.12`
- 使用 **object-cover** 数学方式绘制（取最大缩放比例，居中裁切）

**帧缓存（首选的流畅路径）：**
- 屏幕外视频加载同一 URL
- 提取最多 **90** 帧（或 `duration * 12`，最少 24），最大宽度 **960px**
- 等待可见视频触发 `loadeddata`，再让出 300ms 后开始提取
- 就绪后，canvas 根据平滑后的进度索引绘制缓存的 `ImageBitmap`

**回退方案：**帧未就绪时，将可见 `<video>` seek 到 `smoothed * (duration - 0.05)`（差值 > 0.04s 时执行 seek）

**Canvas DPR：** `min(devicePixelRatio, 2)`

不要以普通循环背景的方式 autoplay — 动画**仅由滚动驱动**。

---

## 显现动画（每个文字／UI 区块）

IntersectionObserver，threshold `0.15`。  
隐藏：`translate-y-8 opacity-0`  
可见：`translate-y-0 opacity-100`  
过渡：`all 700ms ease-out`，`will-change-transform`  
按下文指定，为每个元素设置以 ms 为单位的 `transition-delay`。

---

## 玻璃／材质系统（精确 token）

始终一致地复用以下设置：

| Token | Classes |
|--------|---------|
| 玻璃面板 | `bg-white/15 backdrop-blur-md`（较大面板使用 `bg-white/10`） |
| 玻璃边框 | `border border-white/15` 或 `border-white/20` 或 `border-white/25` |
| 左侧强调徽章 | `border-l-2 border-white bg-white/15 px-3 py-1.5 backdrop-blur-md` + 等宽大写标签 |
| 主 CTA | 纯白色胶囊／圆角，黑色文字，hover `bg-white/85` |
| 次 CTA | 玻璃边框 + `bg-white/10` 或 `bg-white/15`，白色文字 |
| 视频上的文字 | 白色 + `drop-shadow-md` / `drop-shadow-lg` |
| 等宽标签 | `font-mono text-[10px]` 或 `text-[11px]` 或 `text-xs`、`uppercase`、`tracking-[0.15em]` |

---

## Navbar（fixed，z-50）

- 全宽，`border-b border-white/15`
- 行布局：左侧 logo | 中间导航（md+）| 右侧 CTA
- Logo：Hexagon + `novaai`（`text-lg sm:text-xl font-medium tracking-tight`）
- 链接（低于 md 时隐藏）：`项目`，带上标 `6`（`font-mono text-[10px] text-white/60`）、`关于`、`博客`、`联系` — `text-sm text-white/85`，hover `text-white`，间距 `gap-8 lg:gap-10`
- CTA：`获取免费咨询` — `rounded-md border border-white/20 bg-white/15 backdrop-blur-md px-4 py-2 text-xs sm:px-5 sm:text-sm`，hover `bg-white/25`
- 显现延迟：logo 0；链接 `100 + i*100` ms；CTA `500` ms

---

## Section One — Hero

全视口 flex column `justify-between`。

**顶部行**（`flex-col gap-8` → `sm:flex-row justify-between`）：

**左侧 — 服务列表**（gap-2），每项显现延迟 `150 + i*120`：
```
/ AI 自动化
/ AI 集成
/ AI 智能体开发
```
样式：`font-mono text-xs uppercase tracking-[0.15em] text-white/90 drop-shadow-md`

**右侧 — 简介**（`max-w-xs sm:text-right`，延迟 300）：
> 我们设计自动化方案，让贵公司的运营方式更加清晰、精准、高效。  
`text-lg sm:text-xl leading-relaxed text-white drop-shadow-md`

**底部行**（`flex-col gap-8` → `md:flex-row items-end justify-between`）：

**左侧：**
1. 徽章延迟 150：`我们已为 100+ 家企业实现自动化` — 左侧强调玻璃徽章，`font-mono text-[11px] uppercase tracking-[0.15em]`，`mb-5`
2. H1 延迟 280：
```
清晰。精准。
自动化。
```
`text-5xl sm:text-6xl lg:text-7xl font-normal leading-[1.05] tracking-tight text-white drop-shadow-lg`

**右侧 — 玻璃联系卡片**（延迟 420）：
- 容器：`flex items-center gap-4 rounded-xl bg-white/15 p-3 backdrop-blur-md`
- 图片：使用上方肖像 URL，`h-24 w-20 rounded-lg object-cover`
- 文字列（`gap-1.5 pr-2`）：
  - `与 Mitha 交谈` — `text-sm font-medium text-white`
  - `NovaAI 联合创始人` — 等宽 `text-[10px] uppercase tracking-[0.15em] text-white/60`
  - 按钮：`预约 15 分钟通话` + Lucide `ChevronRight` size 14 — `rounded-full bg-white px-4 py-2 text-xs font-medium text-black`，hover `bg-white/85`，`mt-1.5`

---

## 中部间隔区

在两个区块之间放置带 `h-[80vh]` 的 `div`，让滚动进度有足够空间在 Hero 与 Section Two 之间擦洗视频。

---

## Section Two — 能力

使用相同的全视口 flex `justify-between` 外壳。

**顶部行：**

**左侧徽章**延迟 120：`按需洞察` — 与 Hero 相同的左侧强调玻璃徽章。

**右侧文案**延迟 220（`max-w-sm sm:text-right`）：
> 我们的 AI 不只是回应 — 它会解读、提炼，并交付你所需的关键信号。  
`text-lg sm:text-xl leading-relaxed text-white drop-shadow-md`

**底部区域**（`flex-1 justify-end`，`flex-col gap-12` → `md:flex-row items-end justify-between gap-16`）：

**左栏**（`max-w-xl`）：
1. H2 延迟 180：
```
学会看得
透彻。
```
使用与 H1 相同的标题字号（`text-5xl sm:text-6xl lg:text-7xl … drop-shadow-lg`）
2. 正文延迟 320（`mt-6 max-w-md text-sm sm:text-base text-white/80 drop-shadow-md`）：
> 从第一张草图到最终渲染，Nova 将原始意图转化为团队可执行的决策 — 安静、精准且迅速。
3. CTA 延迟 420（`mt-8 flex flex-wrap gap-3`）：
   - 主胶囊按钮：`运行演示` + ChevronRight 14 — `rounded-full bg-white px-5 py-2.5 text-xs sm:text-sm font-medium text-black`，hover `bg-white/85`
   - 次按钮：`免费咨询` — `rounded-full border border-white/25 bg-white/10 backdrop-blur-md px-5 py-2.5 text-xs sm:text-sm`，hover `bg-white/20`

**右侧 — 磨砂能力面板**  
`w-full max-w-md rounded-2xl border border-white/15 bg-white/10 backdrop-blur-md px-5 sm:px-6`

三行（除最后一行外，分隔线均为 `border-b border-white/15`），每行 `flex gap-5 py-5`，显现延迟 `300 + i*110`：

| # | 标题 | 正文 |
|---|--------|------|
| 01 | 实时视觉 | 在情境发生时读取上下文，并在你开口前呈现真正重要的信息。 |
| 02 | 分层洞察 | 从粗略轮廓推进到清晰成果，同时不丢失主线。 |
| 03 | 自适应速度 | 学习你的节奏，并在工作过程中让每轮成果更加精炼。 |

- 索引：`font-mono text-[11px] tracking-[0.15em] text-white/55`
- 标题：`text-base sm:text-lg font-medium text-white` + ChevronRight 16（`text-white/40`，hover：translate-x-0.5 + `text-white`）
- 正文：`mt-1.5 text-sm leading-relaxed text-white/70`

---

## 交互／动效检查清单

1. 滚动擦洗将页面滚动映射到视频时间线（经平滑处理）
2. 元素进入视口时交错向上淡入（700ms，按各自延迟）
3. 按钮／链接颜色过渡 `duration-300`
4. 能力项的 chevron 在 hover 时向右轻移
5. 海报 → 视频 → canvas 的透明度交叉淡化 `duration-500`
6. Hero 视频不得循环 autoplay

---

## 响应式规则

- 低于 `md` 时隐藏导航链接
- Hero／区块在移动端垂直堆叠；按指定设置从 `sm`／`md` 起并排显示
- 优先使用 `supports-[height:100svh]:min-h-[100svh]` 加 `min-h-screen`
- 触控端：视频设置 `playsInline` + muted

---

## 禁止事项

- 不要将 Inter 替换为其他展示字体
- 不要使用不同于上方 CloudFront URL 的视频 URL
- 不要使用旧的 Pexels 肖像
- 不要将 Section Two 重构为图标卡片堆栈
- 不要在视频上覆盖不透明的纯色背景（仅使用玻璃／透明容器）
- 不要移除 `80vh` 间隔区

---

## 验收标准

页面顶部：固定玻璃导航栏 + 服务列表 + 简介 + “清晰。精准。自动化。” + 位于滚动视频上的 Mitha 玻璃卡片。  
滚动擦洗可流畅推进 CloudFront 视频。  
间隔区之后：“按需洞察” + “学会看得透彻。” + 双 CTA + 包含三项的磨砂能力面板。  
在 `localhost:5199` 上与当前 NovaAI 页面实现视觉匹配。

原文提示词（English）

代码

# Exact recreation prompt — NovaAI landing page

Recreate this page **pixel-faithfully**. Stack: React + TypeScript + Vite + Tailwind CSS + lucide-react. Do not invent alternate copy, layout, fonts, colors, or effects.

---

## Page identity

- **Title:** `NOVA_AI — Today AI Aligns With Bold Dreams`
- **Brand:** lowercase `novaai` with a Lucide `Hexagon` icon (size 24, strokeWidth 1.5) to the left
- **Overall feel:** dark cinematic AI marketing site; full-viewport scroll-scrubbed video background; white typography with drop shadows; frosted glass UI chips; sparse editorial layout; no purple gradients, no cream paper look, no card grids of icons

---

## Assets (use these exact URLs)

**Hero scroll video (CloudFront — required):**
```

```
Video content: abstract 3D forms (hanging white cables with glowing gold tips → organic white spherical / brain-like folds with warm orange core), soft blue-grey mist / grain background, floating bokeh particles. 1920×1080.

**Optional local mirrors for reliability:** `/hero.mp4` (same file) and `/hero-poster.jpg` (first-frame still). Prefer CloudFront URL in production code; local copy is fine for offline/dev.

**Portrait (“Talk with Mitha”) — exact URL:**
```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260728_050334_5b076e26-0ce7-4898-b432-d764190e448f.png&w=1280&q=85
```
Display as `h-24 w-20` (`96×80px`), `rounded-lg`, `object-cover`. Alt: `Mitha, co-founder of NovaAI`.

---

## Fonts

- Load Google Fonts Inter weights **400, 500, 600, 700**
- Body: `font-family: 'Inter', system-ui, sans-serif`
- Tailwind: both `font-sans` and `font-mono` map to Inter (mono labels still use `font-mono` class but render Inter)
- Antialiased text; selection color `rgba(255,255,255,0.2)`
- Page bg: `#0a0a0a`; default text white

---

## Global structure

```
relative root
  ScrollVideo (fixed inset-0 z-0, pointer-events-none)
  relative z-10 wrapper
    Navbar (fixed top)
    main
      SectionOne (min-h-screen / 100svh)
      spacer div h-[80vh] (aria-hidden)  ← critical for scroll video length
      SectionTwo (min-h-screen / 100svh)
```

Horizontal padding rhythm everywhere: `px-5 sm:px-8 md:px-12`.  
Section top padding under fixed nav: `pt-24 sm:pt-28`.  
Bottom padding: `pb-12 md:pb-16`.

---

## Scroll-scrubbed video background (exact behavior)

Fixed full-bleed layer `z-0`, bg `#0a0a0a`, `overflow-hidden`, `pointer-events-none`.

**Layers (bottom → top):**
1. Poster `<img>` — full cover; fades out (`opacity-0`, 500ms) once video has a decoded frame or frame cache is ready
2. `<video>` — muted, playsInline, preload=auto, object-cover; visible only while video has a frame and canvas frame-cache is not ready; then fade out
3. `<canvas>` — full cover; draws scrubbed frames; fades in when ready

**Scroll mapping:**
- `progress = scrollY / (scrollHeight - innerHeight)`, clamped 0–1
- Smooth with lerp: `smoothed += (target - smoothed) * 0.12` each `requestAnimationFrame`
- Draw with **object-cover** math (scale max, center crop)

**Frame cache (preferred smooth path):**
- Offscreen video loads same URL
- Extract up to **90** frames (or `duration * 12`, min 24), max width **960px**
- Wait until visible video has `loadeddata` + 300ms yield before extraction starts
- On ready, canvas draws cached `ImageBitmap`s by smoothed progress index

**Fallback:** seek the visible `<video>` to `smoothed * (duration - 0.05)` when frames aren’t ready (seek if delta > 0.04s)

**Canvas DPR:** `min(devicePixelRatio, 2)`

Do **not** autoplay as a normal looping background — motion is **scroll-driven only**.

---

## Reveal animation (every text/UI block)

IntersectionObserver, threshold `0.15`.  
Hidden: `translate-y-8 opacity-0`  
Visible: `translate-y-0 opacity-100`  
Transition: `all 700ms ease-out`, `will-change-transform`  
Per-element `transition-delay` in ms as specified below.

---

## Glass / material system (exact tokens)

Reuse these consistently:

| Token | Classes |
|--------|---------|
| Glass panel | `bg-white/15 backdrop-blur-md` (or `bg-white/10` for larger panels) |
| Glass border | `border border-white/15` or `border-white/20` or `border-white/25` |
| Left-accent badge | `border-l-2 border-white bg-white/15 px-3 py-1.5 backdrop-blur-md` + mono uppercase label |
| Primary CTA | solid white pill/rounded, black text, hover `bg-white/85` |
| Secondary CTA | glass border + `bg-white/10` or `bg-white/15`, white text |
| Text over video | white + `drop-shadow-md` / `drop-shadow-lg` |
| Mono labels | `font-mono text-[10px]` or `text-[11px]` or `text-xs`, `uppercase`, `tracking-[0.15em]` |

---

## Navbar (fixed, z-50)

- Full width, `border-b border-white/15`
- Row: logo left | center nav (md+) | CTA right
- Logo: Hexagon + `novaai` (`text-lg sm:text-xl font-medium tracking-tight`)
- Links (hidden below md): `Projects` with superscript `6` (`font-mono text-[10px] text-white/60`), `About`, `Blog`, `Contact` — `text-sm text-white/85`, hover `text-white`, gap `gap-8 lg:gap-10`
- CTA: `Get Free Consultation` — `rounded-md border border-white/20 bg-white/15 backdrop-blur-md px-4 py-2 text-xs sm:px-5 sm:text-sm`, hover `bg-white/25`
- Reveal delays: logo 0; links `100 + i*100` ms; CTA `500` ms

---

## Section One — Hero

Full viewport flex column `justify-between`.

**Top row** (`flex-col gap-8` → `sm:flex-row justify-between`):

**Left — service list** (gap-2), each reveal delay `150 + i*120`:
```
/ AI AUTOMATION
/ AI INTEGRATION
/ AI AGENT DEVELOPMENT
```
Style: `font-mono text-xs uppercase tracking-[0.15em] text-white/90 drop-shadow-md`

**Right — intro** (`max-w-xs sm:text-right`, delay 300):
> We design automation that brings clarity, precision, and efficiency to the way your company operates.  
`text-lg sm:text-xl leading-relaxed text-white drop-shadow-md`

**Bottom row** (`flex-col gap-8` → `md:flex-row items-end justify-between`):

**Left:**
1. Badge delay 150: `We Automate 100+ Businesses` — left-accent glass badge, `font-mono text-[11px] uppercase tracking-[0.15em]`, `mb-5`
2. H1 delay 280:
```
Clear. Precise.
Automated.
```
`text-5xl sm:text-6xl lg:text-7xl font-normal leading-[1.05] tracking-tight text-white drop-shadow-lg`

**Right — glass contact card** (delay 420):
- Container: `flex items-center gap-4 rounded-xl bg-white/15 p-3 backdrop-blur-md`
- Image: portrait URL above, `h-24 w-20 rounded-lg object-cover`
- Text column (`gap-1.5 pr-2`):
  - `Talk with Mitha` — `text-sm font-medium text-white`
  - `Co-founder of NovaAI` — mono `text-[10px] uppercase tracking-[0.15em] text-white/60`
  - Button: `Book 15-mins call` + Lucide `ChevronRight` size 14 — `rounded-full bg-white px-4 py-2 text-xs font-medium text-black`, hover `bg-white/85`, `mt-1.5`

---

## Mid spacer

`div` with `h-[80vh]` between sections so scroll progress has room to scrub the video between hero and section two.

---

## Section Two — Capability

Same full-viewport flex `justify-between` shell.

**Top row:**

**Left badge** delay 120: `Insight On Demand` — same left-accent glass badge as hero.

**Right copy** delay 220 (`max-w-sm sm:text-right`):
> Our AI doesn't just respond — it interprets, sharpens, and delivers the signal you need.  
`text-lg sm:text-xl leading-relaxed text-white drop-shadow-md`

**Bottom area** (`flex-1 justify-end`, `flex-col gap-12` → `md:flex-row items-end justify-between gap-16`):

**Left column** (`max-w-xl`):
1. H2 delay 180:
```
Learn to see
brilliantly.
```
Same headline scale as H1 (`text-5xl sm:text-6xl lg:text-7xl … drop-shadow-lg`)
2. Body delay 320 (`mt-6 max-w-md text-sm sm:text-base text-white/80 drop-shadow-md`):
> From the first sketch to the final render, Nova turns raw intent into decisions your team can act on — quietly, precisely, at speed.
3. CTAs delay 420 (`mt-8 flex flex-wrap gap-3`):
   - Primary pill: `Run the demo` + ChevronRight 14 — `rounded-full bg-white px-5 py-2.5 text-xs sm:text-sm font-medium text-black`, hover `bg-white/85`
   - Secondary: `Free consultation` — `rounded-full border border-white/25 bg-white/10 backdrop-blur-md px-5 py-2.5 text-xs sm:text-sm`, hover `bg-white/20`

**Right — frosted capability panel**  
`w-full max-w-md rounded-2xl border border-white/15 bg-white/10 backdrop-blur-md px-5 sm:px-6`

Three rows (dividers `border-b border-white/15` except last), each `flex gap-5 py-5`, reveal delay `300 + i*110`:

| # | Title | Body |
|---|--------|------|
| 01 | Real-time vision | Reads context as it happens and surfaces what matters before you ask. |
| 02 | Layered insight | Moves from rough outline to sharp output without losing the thread. |
| 03 | Adaptive speed | Learns your cadence and tightens every pass as you work. |

- Index: `font-mono text-[11px] tracking-[0.15em] text-white/55`
- Title: `text-base sm:text-lg font-medium text-white` + ChevronRight 16 (`text-white/40`, hover: translate-x-0.5 + `text-white`)
- Body: `mt-1.5 text-sm leading-relaxed text-white/70`

---

## Interactions / motion checklist

1. Scroll scrub maps page scroll → video timeline (smoothed)
2. Staggered fade-up reveals on enter viewport (700ms, per-delay)
3. Button / link color transitions `duration-300`
4. Capability chevrons nudge right on hover
5. Poster → video → canvas opacity crossfades `duration-500`
6. No looping autoplay of hero video

---

## Responsive rules

- Nav links hidden below `md`
- Hero/section stacks vertically on mobile; side-by-side from `sm`/`md` as specified
- Prefer `supports-[height:100svh]:min-h-[100svh]` plus `min-h-screen`
- Touch: video `playsInline` + muted

---

## Do not

- Do not replace Inter with another display font
- Do not use a different video URL than the CloudFront URL above
- Do not use the old Pexels portrait
- Do not rebuild section two as icon card stacks
- Do not put opaque solid backgrounds over the video (only glass / transparent wrappers)
- Do not remove the `80vh` spacer

---

## Acceptance

Top of page: fixed glass nav + service list + intro + “Clear. Precise. Automated.” + Mitha glass card over scroll video.  
Scrolling scrubbing advances the CloudFront video smoothly.  
After spacer: “Insight On Demand” + “Learn to see brilliantly.” + dual CTAs + three-item frosted capability panel.  
Visual match to current NovaAI page at `localhost:5199`.