把 AI 产品官网做成 轻、准、可交付 的 landing page。
这不是纯视觉稿，而是一套 Astro-first 的真实实现：SEO、Cloudflare runtime、动画预算、表单收口和 island 边界从一开始就一起设计。
- 首屏 narrative 默认由 Astro 输出为 HTML-first 内容。
- 只有极少数 React islands 会 hydrate，且统一放在明确的 client:* 指令之后。
- Bun 负责依赖和脚本，Biome 负责 format、lint 与 import hygiene。
CSS-first
全站节奏优先由 transition 与 keyframes 驱动
3 islands
只有最高价值的演示区域会加载 React runtime
Edge-ready
Astro Actions 可以直接保持 Cloudflare runtime 兼容
用 Astro 最佳实践组织官网，而不是把 runtime 铺满所有 section。
这些卡片对应的就是项目里的真实实现选择：静态优先、局部 hydration、动画预算、表单后端化，以及 Cloudflare-ready 的交付路径。
Astro-first Rendering
Hero narrative、SEO 文本、结构化数据和大部分内容模块都直接由 Astro 输出，默认保持极低 JavaScript 成本。
Tailwind v4 Tokens
用 CSS-native theme tokens 和少量自定义 component classes 组织视觉系统，同时保留 utility-first 的开发效率。
React Product Islands
更像产品端的局部交互放进 React islands，复用自封装的 Button、Panel、Slider 等 UI 组件。
Animation Budget
页面节奏默认交给 CSS，只在少数真正高价值的叙事区域再升级到 GSAP 或 Motion。
Lottie in Context
Lottie 只嵌在一个聚焦的 demo pane 里，避免让整体站点失去轻量特征。
Form Actions
预约体验、申请内测和 Newsletter 统一走 semantic form 加 Astro Actions，保持低 JS 的转化链路。
先把内容、交互、转化拆成独立层，再谈 landing page 是否 production-ready。
稳定的 AI 产品官网不是处处都像 mini app。narrative、interaction 和 capture 应该分别拥有自己的加载策略和实现边界。
Layer 01
Narrative Layer
品牌表达、价值卖点、证据模块和 FAQ 保持 HTML-first，确保 crawlability 和首屏稳定性。
Layer 02
Interaction Layer
只有真正需要状态或手势反馈的模块才进入 React island，并通过明确的 client 指令加载。
Layer 03
Capture Layer
线索收集继续停留在 semantic form 与 Astro Actions 上，方便继续接 CRM、邮件或内部 webhook。
只在真正能提高理解效率的区域投放动画预算，Hero 和时间线就足够把页面带活。
时间线 reveal 被收口在单个 island 内部，复杂运动逻辑不会扩散到整站，也符合 Astro 的局部 hydration 思路。
AI Demo 和交互卡片交给 React + Motion，整站其余部分继续保持轻量。
这两个模块分别对应 AI 官网里常见的两类场景：能力演示和产品式交互。它们只在局部生效，不会把站点拖成 SPA。
SEO 与质量评分应该是结构起点，而不是上线周临时补丁。
metadata、语义 section、robots、sitemap、build 路径和动画约束，在这个示例里都被视为默认项。
- 完整 metadata、canonical URL、Open Graph、Twitter Card 与 JSON-LD。
- 语义化 heading、section、nav 与 form 结构，优先保证 crawlability 与 accessibility。
- Tailwind tokens 与自定义 component classes 协同工作，避免 utility 无序扩散。
- Biome 负责 format、lint 与 imports，Bun 负责依赖、脚本与 lockfile 一致性。
- Wrangler config、sitemap、robots 与 Cloudflare adapter 从一开始就作为基线准备好。
Build Flow
Cloudflare Pages / Workers 交付路径
项目已经接好 Astro Cloudflare adapter，所以既保留 server 能力，也能通过轻量 CI/CD pipeline 落地到 Cloudflare runtime。
bun install bun run dev bun run verify bunx wrangler deploy 用一个 semantic form 覆盖预约体验、申请内测和 Newsletter。
表单直接提交到 Astro Actions。浏览器原生校验负责第一层体验，服务端 schema 仍然是最终真相；即使没有 client script，提交链路也成立。
预约体验
适合需要 guided walkthrough 的销售线索。
申请内测
适合愿意参与 pre-release workflow 测试的早期用户。
Newsletter
适合只想接收产品更新与上线说明的订阅者。