Google Stitch 对比 Claude 网页生成

一键获取所有令人惊艳动效网站的提示词：

复刻这个落地页的完整提示词

为一家名为「APEX」的虚构公司创建一个深色、高级的 SaaS 落地页——一个营收加速平台。设计采用「液态玻璃」美学，超深色背景、半透明玻璃拟态元素，配绿色强调色。页面使用 React、Vite、TypeScript、Tailwind CSS、shadcn/ui 构建，视频流使用 hls.js。

全局设计系统

字体：Geist Sans（安装 @fontsource/geist-sans，字重 400、500、600、700）。通过 font-family: 'Geist Sans', 'Inter', system-ui, sans-serif 应用于 body。

配色方案（HSL，:root 中的 CSS 变量）：

--background: 260 87% 3%（近黑色，带轻微紫调）
--foreground: 40 6% 95%（暖白色）
--primary: 121 95% 76%（鲜绿色——仅用于强调）
--primary-foreground: 0 0% 5%
--secondary: 240 4% 16%
--border: 240 4% 20%
--hero-heading: 40 10% 96%（用于标题的明亮暖白色）
--hero-sub: 40 6% 82%（用于副文本的低调暖灰色）
--card: 240 6% 9%
--muted: 240 4% 16%
--muted-foreground: 240 5% 65%
--radius: 0.75rem
在 tailwind.config.ts 中将所有颜色映射为 hsl(var(--token))。把 hero.heading 和 hero.sub 加入自定义颜色。

「液态玻璃」工具类（在 index.css 的 @layer utilities 下）：

.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
按钮变体（在 shadcn 的 button.tsx 中）：
hero: bg-primary text-primary-foreground rounded-full px-6 py-3 text-base font-medium hover:bg-primary/90
heroSecondary: liquid-glass text-foreground rounded-full px-6 py-3 text-base font-normal hover:bg-white/5
跑马灯动画（tailwind.config.ts 关键帧）：
marquee: { "0%": { transform: "translateX(0%)" }, "100%": { transform: "translateX(-50%)" } }
动画：marquee 20s linear infinite

版块 1：HERO
全视口 Hero，背后播放一个 MP4 背景视频。
视频 URL：
使用标准 <video> 标签配 <source>（非 HLS）。属性：autoPlay loop muted playsInline。定位为 absolute inset-0 w-full h-full object-cover。
渐变叠加层（absolute，pointer-events-none）：
linear-gradient(to bottom, transparent 0%, transparent 30%, hsl(260 87% 3% / 0.1) 45%, hsl(260 87% 3% / 0.4) 60%, hsl(260 87% 3% / 0.75) 75%, hsl(260 87% 3%) 95%)
内容（relative z-10，flex column，min-h-screen）：
导航栏——居中，液态玻璃圆角容器（max-w-[850px]），包含：Logo：一个小型 SVG 十字准星图标，位于 w-7 h-7 rounded-lg bg-gradient-to-b from-secondary to-muted 容器中 + 「APEX」文字（text-xl font-semibold）
导航项：「Features」（下拉箭头）、「Solutions」、「Plans」、「Learning」（下拉箭头）——纯文字按钮
CTA：<Button variant="hero" size="sm">Sign Up</Button>

公告徽标——液态玻璃圆角药丸：「Nova+ Launched!」加嵌套的「Explore」徽标，配 ChevronRight 图标
标题——text-hero-heading text-4xl sm:text-6xl lg:text-7xl font-semibold leading-[1.05] tracking-tight max-w-5xl：Accelerate Your
Revenue Growth Now

副标题——text-hero-sub text-lg max-w-md mt-4 opacity-80：「Drive your funnel forward with clever workflows, analytics, and seamless lead management.」
CTA 按钮——flex gap-4 mt-8：「Start Free Right Now」（hero 变体）加「Schedule a Consult」（heroSecondary 变体）
社会证明条——位于 Hero 底部。左侧文字：「Relied on by brands across the globe」（两行，text-foreground/50 text-sm）。右侧：无限跑马灯滚动 6 个虚构品牌名（Vortex、Nimbus、Prysma、Cirrus、Kynder、Halcyn），每个都配一个液态玻璃 w-6 h-6 rounded-lg 图标，显示品牌首字母。数组重复一次以实现无缝循环。使用 animate-marquee。

版块 2：FEATURES（三栏卡片，带背景视频）
背景 HLS 视频：
使用 hls.js 播放。视频为 absolute inset-0 object-cover，位于版块背后。
视频上的渐变叠加层：
顶部：bg-gradient-to-b from-background via-background/80 to-transparent（高度 40%）
底部：bg-gradient-to-t from-background via-background/80 to-transparent（高度 40%）
整体加暗：bg-background/40
版块标题：

徽标：液态玻璃圆角药丸——「Core Platform」加「Overview」配 ChevronRight
标题：text-hero-heading text-3xl sm:text-5xl font-semibold：「Built for Teams That / Ship Relentlessly」
副标题：「Three pillars that keep your revenue engine humming without the operational drag.」

3 个功能卡片（grid md:grid-cols-3 gap-6），每个都是 liquid-glass rounded-3xl p-8：
Lightning Workflows——「Automate repetitive tasks with intelligent pipelines that adapt to your team's rhythm and velocity.」数据：「3.2x faster」/「pipeline throughput」

Deep-Dive Analytics——「Uncover patterns hiding in your funnel. Real-time cohort analysis with zero configuration required.」数据：「148%」/「avg. conversion lift」

Compliance Engine——「SOC 2, GDPR, and HIPAA guardrails baked into every interaction. Audit trails generated automatically.」数据：「Zero」/「compliance incidents」

每张卡片在数据上方都有一条 border-t border-border/50 分隔线。悬停：hover:bg-white/[0.03]。

版块 3：CHESS 版块（视频居左，内容居右）

py-32 px-4，max-w-6xl，grid lg:grid-cols-2 gap-20 items-center。

左侧——视频：liquid-glass rounded-3xl aspect-[4/3] overflow-hidden
HLS 视频：
右侧——内容：

徽标：「Smart Routing」加「New」
标题：「Every Lead Finds / Its Perfect Path」
正文：「Intelligent lead scoring meets adaptive routing. Each prospect is matched to the rep, sequence, and cadence most likely to convert — in real time.」
要点列表（3 项，配 w-1.5 h-1.5 rounded-full bg-primary 圆点）：「AI-scored lead qualification」「Dynamic rep assignment」「Multi-touch attribution」
按钮：「See It in Action」（hero）加「Read the Docs」（heroSecondary）

版块 4：反向 CHESS 版块（内容居左，视频居右）
布局与 Chess 相同但反转，移动端优先使用 order- 类。
左侧——内容（order-2 lg:order-1）：
徽标：「Pipeline Studio」加「Beta」
标题：「Design Funnels / That Actually Close」
正文：「Drag-and-drop pipeline builder with live conversion metrics at every stage. See exactly where deals stall and why.」
4 个数据卡片，grid grid-cols-2 gap-4，每个都是 liquid-glass rounded-2xl p-4：「47.2%」/「win-rate increase」
「12 days」/「shorter sales cycle」
「2.8x」/「deal velocity」
「91%」/「forecast accuracy」

按钮：「Try Pipeline Studio」（hero）
右侧——视频（order-1 lg:order-2）：liquid-glass rounded-3xl aspect-[4/3]
HLS 视频：

版块 5：NUMBERS 版块（全宽背景视频）

背景 HLS 视频：
渐变叠加层：
linear-gradient(to top, hsl(260 87% 3%) 0%, hsl(260 87% 3% / 0.85) 15%, hsl(260 87% 3% / 0.4) 40%, hsl(260 87% 3% / 0.15) 60%, hsl(260 87% 3% / 0.3) 100%)
内容（relative z-10，py-32）：

主数据（居中）：$4.7B，字号 text-7xl sm:text-[8rem] lg:text-[10rem] font-semibold tracking-tighter，加标签「Revenue influenced」加描述。mb-24。
底部两个数据放在一个 liquid-glass rounded-3xl p-12 grid md:grid-cols-2 中，配一条竖直的 md:border-r border-border/50 分隔线：「18M」/「Leads processed monthly」
「99.97%」/「Platform uptime」

版块 6：TESTIMONIALS
py-32，居中标题加三栏卡片网格。

标题：
「Trusted by Revenue / Leaders Everywhere」
「Hear from the teams that made the switch.」
3 个评价卡片（liquid-glass rounded-3xl p-8），中间卡片用 md:-translate-y-6 做位移偏移：

Clara Whitfield，VP Revenue，Meridian Health（缩写「CW」）

Derek Tanaka，Growth Lead，Baseform（缩写「DT」）

Simone Reuter，CRO，Alpenhaus Group（缩写「SR」）
每张卡片：引用文字加分隔线加头像圆圈（w-10 h-10 rounded-full bg-secondary）配缩写，加姓名 / 职位。

版块 7：CTA 加页脚容器（背景视频）

一个包装组件，CTA 和页脚共用同一个背景 HLS 视频。
HLS 视频：
渐变叠加层：
linear-gradient(to bottom, hsl(260 87% 3%) 0%, hsl(260 87% 3% / 0.85) 15%, hsl(260 87% 3% / 0.4) 40%, hsl(260 87% 3% / 0.15) 60%, hsl(260 87% 3% / 0.3) 100%)
CTA 版块（relative z-10）：
liquid-glass rounded-[2rem] p-12 sm:p-20 居中卡片

标题：「Ready to Outpace / Your Pipeline Targets?」

副标题：「Join 2,400+ teams already accelerating revenue with APEX. No credit card required.」

按钮：「Start Free Today」（hero）加「Talk to Sales」（heroSecondary）
页脚（relative z-10）：
5 栏网格：品牌（跨 2 栏，含 Logo 加标语）加「Product」（Features、Pricing、Integrations、Changelog、Roadmap）加「Company」（About、Blog、Careers、Press）加「Resources」（Documentation、Community、Support、Status）
底部栏：「© 2026 APEX Inc.」加 Privacy / Terms / Cookies 链接
边框：border-t border-border/30

关键依赖项
hls.js、@fontsource/geist-sans、lucide-react、class-variance-authority、tailwindcss-animate、@radix-ui/react-slot、shadcn/ui 组件、react-router-dom、@tanstack/react-query

页面结构（Index.tsx）
<HeroSection />
<FeaturesSection />
<ChessSection />
<ReverseChessSection />
<NumbersSection />
<TestimonialsSection />
<CTAFooterWrapper />  （包含 CTASection 和 FooterSection）