Google Stitch 对比 Claude 网页生成

Access ALL prompts for stunning animated websites in one click: 

Full Prompt to Recreate the Landing Page

Create a dark, premium SaaS landing page for a fictional company called "APEX" — a revenue acceleration platform. The design uses a "liquid glass" aesthetic with ultra-dark backgrounds, translucent glassmorphic elements, and green accent color. The page is built with React, Vite, TypeScript, Tailwind CSS, shadcn/ui, and hls.js for video streaming.

GLOBAL DESIGN SYSTEM

Font: Geist Sans (install @fontsource/geist-sans, weights 400, 500, 600, 700). Apply via font-family: 'Geist Sans', 'Inter', system-ui, sans-serif on body.

Color Palette (HSL, CSS variables in :root):

--background: 260 87% 3% (near-black with slight purple)
--foreground: 40 6% 95% (warm off-white)
--primary: 121 95% 76% (vivid green — accent only)
--primary-foreground: 0 0% 5%
--secondary: 240 4% 16%
--border: 240 4% 20%
--hero-heading: 40 10% 96% (bright warm white for headings)
--hero-sub: 40 6% 82% (muted warm gray for subtext)
--card: 240 6% 9%
--muted: 240 4% 16%
--muted-foreground: 240 5% 65%
--radius: 0.75rem
Map all colors in tailwind.config.ts as hsl(var(--token)). Add hero.heading and hero.sub as custom colors.

"Liquid Glass" utility class (in index.css under @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;
}
Button Variants (in 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
Marquee animation (tailwind.config.ts keyframes):
marquee: { "0%": { transform: "translateX(0%)" }, "100%": { transform: "translateX(-50%)" } }
Animation: marquee 20s linear infinite
SECTION 1: HERO
Full-viewport hero with a background MP4 video playing behind all content.
Video URL:
Use a standard <video> tag with <source> (not HLS). Attributes: autoPlay loop muted playsInline. Positioned absolute inset-0 w-full h-full object-cover.
Gradient overlay (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%)
Content (relative z-10, flex column, min-h-screen):
Navbar — centered, liquid-glass rounded-3xl container (max-w-[850px]) containing:Logo: small SVG crosshair icon in a w-7 h-7 rounded-lg bg-gradient-to-b from-secondary to-mutedbox + "APEX" text (text-xl font-semibold)
Nav items: "Features" (dropdown chevron), "Solutions", "Plans", "Learning" (dropdown chevron) — plain text buttons
CTA: <Button variant="hero" size="sm">Sign Up</Button>

Announcement Badge — liquid-glass rounded-full pill: "Nova+ Launched!" + nested "Explore" badge with ChevronRight icon
Heading — 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

Subheading — 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 Buttons — flex gap-4 mt-8: "Start Free Right Now" (hero variant) + "Schedule a Consult" (heroSecondary variant)
Social Proof Bar — at bottom of hero. Left text: "Relied on by brands across the globe" (2-line, text-foreground/50 text-sm). Right: infinite marquee scrolling 6 fake brand names (Vortex, Nimbus, Prysma, Cirrus, Kynder, Halcyn) each with a liquid-glass w-6 h-6 rounded-lg icon showing the first letter. Array is duplicated for seamless loop. Uses animate-marquee.
SECTION 2: FEATURES (3-Column Cards with Background Video)
Background HLS Video:
Use hls.js for playback. Video is absolute inset-0 object-cover behind the section.
Gradient overlays on top of video:
Top: bg-gradient-to-b from-background via-background/80 to-transparent(height 40%)
Bottom: bg-gradient-to-t from-background via-background/80 to-transparent(height 40%)
Overall darkening: bg-background/40
Section header:

Badge: liquid-glass rounded-full pill — "Core Platform" + "Overview" with ChevronRight
Heading: text-hero-heading text-3xl sm:text-5xl font-semibold: "Built for Teams That / Ship Relentlessly"
Sub: "Three pillars that keep your revenue engine humming without the operational drag."

3 Feature Cards (grid md:grid-cols-3 gap-6), each liquid-glass rounded-3xl p-8:
Lightning Workflows — "Automate repetitive tasks with intelligent pipelines that adapt to your team's rhythm and velocity." Stat: "3.2x faster" / "pipeline throughput"

Deep-Dive Analytics — "Uncover patterns hiding in your funnel. Real-time cohort analysis with zero configuration required." Stat: "148%" / "avg. conversion lift"

Compliance Engine — "SOC 2, GDPR, and HIPAA guardrails baked into every interaction. Audit trails generated automatically." Stat: "Zero" / "compliance incidents"

Each card has a border-t border-border/50 divider above the stat. Hover: hover:bg-white/[0.03].
SECTION 3: CHESS SECTION (Video Left, Content Right)

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

Left — Video:liquid-glass rounded-3xl aspect-[4/3] overflow-hidden
HLS video: 
Right — Content:

Badge: "Smart Routing" + "New"
Heading: "Every Lead Finds / Its Perfect Path"
Body: "Intelligent lead scoring meets adaptive routing. Each prospect is matched to the rep, sequence, and cadence most likely to convert — in real time."
Bullet list (3 items with w-1.5 h-1.5 rounded-full bg-primarydots): "AI-scored lead qualification", "Dynamic rep assignment", "Multi-touch attribution"
Buttons: "See It in Action" (hero) + "Read the Docs" (heroSecondary)
SECTION 4: REVERSE CHESS SECTION (Content Left, Video Right)
Same layout as Chess but reversed with order- classes for mobile-first.
Left — Content (order-2 lg:order-1):
Badge: "Pipeline Studio" + "Beta"
Heading: "Design Funnels / That Actually Close"
Body: "Drag-and-drop pipeline builder with live conversion metrics at every stage. See exactly where deals stall and why."
4 stat cards in a grid grid-cols-2 gap-4, each liquid-glass rounded-2xl p-4:"47.2%" / "win-rate increase"
"12 days" / "shorter sales cycle"
"2.8x" / "deal velocity"
"91%" / "forecast accuracy"

Button: "Try Pipeline Studio" (hero)
Right — Video (order-1 lg:order-2):liquid-glass rounded-3xl aspect-[4/3]
HLS video: 

SECTION 5: NUMBERS SECTION (Full-Width Background Video)

Background HLS Video:
Gradient overlay:
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%)
Content (relative z-10, py-32):

Hero metric (centered): $4.7B in text-7xl sm:text-[8rem] lg:text-[10rem] font-semibold tracking-tighter+ label "Revenue influenced" + description. mb-24.
Bottom two metrics in a liquid-glass rounded-3xl p-12 grid md:grid-cols-2 with a vertical md:border-r border-border/50 divider:"18M" / "Leads processed monthly"
"99.97%" / "Platform uptime"

SECTION 6: TESTIMONIALS
py-32, centered header + 3-column card grid.

Header:
"Trusted by Revenue / Leaders Everywhere"
"Hear from the teams that made the switch."
3 Testimonial cards (liquid-glass rounded-3xl p-8), middle card offset with md:-translate-y-6:

Clara Whitfield, VP Revenue, Meridian Health (initials "CW")

Derek Tanaka, Growth Lead, Baseform (initials "DT")

Simone Reuter, CRO, Alpenhaus Group (initials "SR")
Each card: quoted text + divider + avatar circle (w-10 h-10 rounded-full bg-secondary) with initials + name/role.

SECTION 7: CTA + FOOTER WRAPPER (Background Video)

Wrapper component with shared background HLS video behind both CTA and Footer.
HLS Video:
Gradient overlay:
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 Section (relative z-10):
liquid-glass rounded-[2rem] p-12 sm:p-20 centered card

Heading: "Ready to Outpace / Your Pipeline Targets?"

Sub: "Join 2,400+ teams already accelerating revenue with APEX. No credit card required."

Buttons: "Start Free Today" (hero) + "Talk to Sales" (heroSecondary)
Footer (relative z-10):
5-column grid: Brand (2-col span with logo + tagline) + "Product" (Features, Pricing, Integrations, Changelog, Roadmap) + "Company" (About, Blog, Careers, Press) + "Resources" (Documentation, Community, Support, Status)
Bottom bar: "© 2026 APEX Inc." + Privacy / Terms / Cookies links
Borders: border-t border-border/30
KEY DEPENDENCIES
hls.js, @fontsource/geist-sans, lucide-react, class-variance-authority, tailwindcss-animate, @radix-ui/react-slot, shadcn/ui components, react-router-dom, @tanstack/react-query
PAGE STRUCTURE (Index.tsx)
<HeroSection />
<FeaturesSection />
<ChessSection />
<ReverseChessSection />
<NumbersSection />
<TestimonialsSection />
<CTAFooterWrapper />  (contains CTASection + FooterSect