Landing Page Generator¶

Skill ID: ivx-landing-page

name: ivx-landing-page description: >- AI-generated rich game landing pages saturated with actual game assets — animated sprite sheets, character expression grids, parallax environment viewers, audio previews with waveform visualizations, device-framed screenshot carousels, embedded trailers, voice samples, GDD-sourced game design pillars, and full press kit downloads. Every page passes Content-Factory's 3-stage Model Council review (SEO, compliance, multi-model quality audit) before deployment. Supports 4 variants: full landing page, coming-soon teaser, pricing page, and press kit page. Deploys to S3/Netlify/Vercel/GitHub Pages with custom domain. Use when the user says "landing page", "game website", "pricing page", "coming soon page", "press kit page", "game page", "web presence", "deploy landing page", "generate website", "council review page", or needs a web presence for their game. version: "2.0.0" author: "IntelliVerse-X team@intelli-verse-x.ai" allowed-tools: - Read - Write - Edit - Glob - Grep - Shell

Overview¶

The Landing Page skill generates production-ready, responsive HTML/CSS game pages saturated with actual generated game assets — not mockups, not placeholders. Animated sprite sheets cycle through character actions via CSS keyframes. Expression grids show every emotion your character can display. Parallax environment layers scroll on the page. BGM previews play through HTML5 audio with waveform visualizations. Screenshots sit inside device frames. The trailer auto-loops behind the hero section. Voice samples play on each character card. Press kits bundle the real generated art and sound files.

No framework dependency — the output is a single HTML file (plus optimized assets) deployable anywhere. Every page passes through Content-Factory's 3-stage Model Council review before deployment.

7 Upstream Skills → Generated Assets (sprites, sounds, environments, store art, GDD data)
       │
       ▼
┌── Landing Page Pipeline ──────────────────────────────────────────────────┐
│                                                                            │
│  1. Load GDD     → brand_entity.json + game_context.json from S3         │
│  2. Gather Assets → characters (promo, expressions, sprites, voice)       │
│                     environments (parallax layers)                         │
│                     store (key art, screenshots, trailer, social banners) │
│                     audio (BGM, SFX, stingers, voice lines)              │
│  3. Optimize     → WebP/AVIF conversion, audio trim, video re-encode     │
│  4. Generate CSS → sprite @keyframes from sprite-spec-v1.json            │
│                     parallax scroll effects from layer metadata           │
│                     device frames for screenshots                         │
│  5. LLM Copy    → feature descriptions, character bios, CTA copy        │
│  6. Build HTML   → 11 sections with all real assets embedded             │
│  7. SEO Layer   → og:tags, twitter:card, JSON-LD, sitemap, PWA manifest │
│  8. Council     → SEO validation + compliance check + multi-model audit  │
│  9. Bundle      → press kit zips (logos, screenshots, character art,     │
│                     sound kit, press release, brand guidelines)           │
│ 10. Deploy      → S3 / Netlify / Vercel / GitHub Pages                  │
│                                                                            │
└───────────────────────────────────────────────────────────────────────────┘
       │
       ▼
  index.html + 4 variants + sitemap.xml + robots.txt + manifest.json
  + assets/ (images, audio, video, fonts, press kit zips)
  + ivx/landing_page_audit.json (council review results)

1. Page Variants¶

2. Input Data Sources¶

Everything consumed by the landing page is already generated by other skills in the pipeline. The page aggregates outputs from 7 upstream skills:

3. Trigger via Content-Factory¶

REST API¶

curl -X POST http://localhost:8001/pipelines/landing_page \
  -H "Content-Type: application/json" \
  -d '{
    "brand_id": "my-studio",
    "game_id": "my-game",
    "variant": "landing_page",
    "council_review": true,
    "deploy_to": "s3",
    "custom_domain": "mygame.com"
  }'

Pipeline Config¶

# configs/pipelines/ivx_landing_page.yaml
pipeline_kind: landing_page
variants: [landing_page, coming_soon, pricing_page, press_page]
council_review:
  enabled: true
  gates:
    - tool: generate_seo_metadata
      min_score: 70
    - tool: compliance_check
      must_pass: true
    - tool: council_audit
      pipeline_kind: landing_page
      min_score: 75

As Part of Full Game Pipeline¶

The landing page runs as the final stage of ivx_full_game.yaml:

stages:
  # ... 2d_characters, game_sound, store_assets ...
  - name: landing_page
    config: configs/pipelines/ivx_landing_page.yaml
    enabled: true
    params:
      variants: ["landing_page", "coming_soon"]
      council_review: true

4. Generated Output¶

landing_page/
├── index.html                         # Full responsive landing page
├── coming-soon.html                   # Pre-launch teaser variant
├── pricing.html                       # Pricing page variant (if generated)
├── press.html                         # Press kit page variant (if generated)
├── sitemap.xml                        # SEO sitemap
├── robots.txt                         # Search engine directives
├── manifest.json                      # PWA manifest for "Add to Home Screen"
├── assets/
│   ├── css/
│   │   ├── style.css                  # All styles (no external dependencies)
│   │   └── animations.css             # Sprite animations, parallax, reveals
│   ├── js/
│   │   ├── audio-player.js            # Lightweight BGM/SFX player
│   │   ├── sprite-animator.js         # CSS sprite sheet frame stepper
│   │   ├── parallax.js                # Scroll-driven parallax layers
│   │   ├── carousel.js                # Screenshot & character carousel
│   │   └── countdown.js               # Coming-soon countdown timer
│   ├── images/
│   │   ├── hero-key-art.webp          # Optimized key art (< 200KB)
│   │   ├── hero-key-art-mobile.webp   # Mobile crop of key art
│   │   ├── icon.png                   # App icon (512x512)
│   │   ├── icon-192.png               # PWA icon
│   │   ├── og-image.png              # Open Graph image (1200x630)
│   │   ├── favicon.ico                # Browser favicon
│   │   ├── badges/                    # Store badges (App Store, Google Play, Steam)
│   │   ├── characters/
│   │   │   ├── {char_id}-promo.webp           # Character promo art
│   │   │   ├── {char_id}-expressions.webp     # Expression grid image
│   │   │   ├── {char_id}-idle-strip.webp      # Idle sprite strip for CSS animation
│   │   │   └── {char_id}-thumb.webp           # 16:9 character thumbnail
│   │   ├── screenshots/
│   │   │   ├── phone/                         # Mobile screenshots in device frames
│   │   │   ├── tablet/                        # Tablet screenshots in device frames
│   │   │   ├── desktop/                       # Desktop/Steam screenshots
│   │   │   └── vr/                            # VR screenshots (if applicable)
│   │   ├── environments/
│   │   │   ├── {theme}-parallax-composite.webp  # Flattened parallax preview
│   │   │   └── {theme}-layer-*.webp             # Individual layers for scroll parallax
│   │   ├── social/
│   │   │   ├── twitter-banner.webp
│   │   │   ├── facebook-cover.webp
│   │   │   ├── discord-banner.webp
│   │   │   └── youtube-thumb.webp
│   │   └── pillars/
│   │       └── pillar-{n}.webp                # Feature pillar background art
│   ├── audio/
│   │   ├── bgm-main-theme-preview.mp3         # 30-sec preview (trimmed + faded)
│   │   ├── bgm-battle-preview.mp3             # 30-sec preview
│   │   ├── sfx-montage.mp3                    # Compiled SFX highlight reel
│   │   └── voice/
│   │       └── {char_id}-sample.mp3           # Character voice sample
│   ├── video/
│   │   ├── trailer-1080p.mp4                  # Full trailer
│   │   ├── trailer-loop.mp4                   # 10-sec hero background loop
│   │   └── trailer-poster.webp                # Poster image for video player
│   ├── fonts/
│   │   └── ...                                # Self-hosted web fonts
│   └── press/
│       ├── logo-pack.zip                      # All logo variants
│       ├── screenshots.zip                    # All platform screenshots
│       ├── character-art.zip                  # Character promo + expressions
│       ├── sound-kit.zip                      # Select BGM + SFX for streamers
│       ├── press-release.pdf                  # Generated press release
│       └── brand-guidelines.pdf               # Colors, fonts, logo usage
├── ivx/
│   └── landing_page_audit.json                # Council review results
└── deploy/
    ├── netlify.toml                           # Netlify config
    ├── vercel.json                            # Vercel config
    └── _headers                               # CDN cache headers

5. Page Sections (Full Landing Page) — Rich Asset Integration¶

Every section below is populated from actual generated pipeline outputs, not placeholders.

Section 1: Hero (Key Art + Trailer + Brand)¶

Data sources: store_assets/key_art, store_assets/trailer/, brand_entity.json, game_context.store_config

<section class="hero">
  <!-- Full-bleed key art background with parallax scroll -->
  <div class="hero-bg" style="background-image: url('assets/images/hero-key-art.webp')">
    <!-- Optional: autoplay muted trailer loop behind a tinted overlay -->
    <video class="hero-video" autoplay muted loop playsinline>
      <source src="assets/video/trailer-loop.mp4" type="video/mp4">
    </video>
    <div class="hero-content">
      <img src="assets/images/icon.png" alt="{game_name} Icon" class="hero-icon">
      <h1>{game_name}</h1>
      <p class="tagline">{brand_entity.tagline}</p>
      <p class="genre-badge">{game_context.genre} · {game_context.age_rating}</p>
      <div class="store-buttons">
        <!-- Platform badges with deep links from store_config -->
        <a href="{ios_url}" class="store-btn ios">
          <img src="assets/images/badge-appstore.svg" alt="Download on the App Store">
        </a>
        <a href="{android_url}" class="store-btn android">
          <img src="assets/images/badge-googleplay.svg" alt="Get it on Google Play">
        </a>
        <a href="{steam_url}" class="store-btn steam">Wishlist on Steam</a>
      </div>
    </div>
  </div>
</section>

Section 2: Game Overview (GDD Core Loop + Pillars)¶

Data sources: game_context.gameplay_summary, game_context.key_features, game_context.unique_selling_points, GDD game concept

Displays the core gameplay loop as an animated diagram, followed by a 3-column feature grid where each feature card has: - An icon (generated from character or UI assets) - Headline (from key_features[]) - LLM-expanded 2-sentence description explaining why this feature matters to players

Section 3: Character Gallery (Full Character Bible Display)¶

Data sources: brand_entity.characters[], 2d_characters/{char_id}/promo/, 2d_characters/{char_id}/expressions/, 2d_characters/{char_id}/sprites/

For each character in brand_entity.characters:

┌─────────────────────────────────────────────────────────┐
│  ┌──────────┐                                           │
│  │          │  ★ The Explorer (Hero)                    │
│  │  [Promo  │  "Let's discover something amazing!"      │
│  │   Art]   │                                           │
│  │          │  Curious, encouraging, energetic.          │
│  └──────────┘  Grew up in the Library of All Things.    │
│                                                          │
│  Expressions:  😊 😢 😠 😲 😨 😐                        │
│  [happy] [sad] [angry] [surprised] [scared] [neutral]   │
│                                                          │
│  Sprite Preview:                                         │
│  [idle ▶] [walk ▶] [run ▶] [attack ▶] [jump ▶]         │
│  (animated sprite strips with CSS animation)             │
│                                                          │
│  Voice: "Young, enthusiastic, warm"  [▶ Play Sample]    │
└─────────────────────────────────────────────────────────┘

Each character card includes: - Promo art from 2d_characters/{char_id}/promo/key_art_*.png - Expression grid from 2d_characters/{char_id}/expressions/expression_sheet.png (cropped into individual emotion thumbnails) - Animated sprite strip from 2d_characters/{char_id}/sprites/idle_spritesheet.png displayed as a CSS sprite animation (keyframes cycling through frames) - Character bio from brand_entity.characters[].personality, backstory, catchphrase - Voice sample from game_sound/voice/ with an HTML5 <audio> player (if voice lines were generated) - Role badge (Hero/Sidekick/Villain) and trait tags from character bible

Section 4: World & Environments (Scene Showcase)¶

Data sources: environments/parallax/, 2d_characters/*/promo/, GDD setting description

• Parallax scene viewer — the generated parallax layers rendered as an interactive CSS parallax on scroll (layers from environments/parallax/{theme}/layer_*.png)
• Multiple environments shown as a horizontal scrollable gallery: forest, dungeon, castle, space (or whatever themes were generated)
• Each scene card shows the environment with characters composited in, pulled from promo art
• Brief lore text from GDD game concept setting description

Section 5: Audio Showcase (Sound Assets)¶

Data sources: game_sound/sound_manifest.json, game_sound/audio/, game_sound/ivx/sound_manifest.json

┌─────────────────────────────────────────────────────────┐
│  🎵 Game Soundtrack                                      │
│                                                          │
│  BGM Preview                                             │
│  ┌──────────────────────────────────┐                   │
│  │  ▶ Main Theme        2:34  ━━━━━━│                   │
│  │  ▶ Battle Theme      1:48  ━━━━━━│                   │
│  │  ▶ Victory Stinger   0:05  ━━━━━━│                   │
│  └──────────────────────────────────┘                   │
│                                                          │
│  Sound Effects: 12 SFX · 6 Stingers · 3 Ambient Loops  │
│  Voice Lines: 15 lines across 3 characters               │
│                                                          │
│  [▶ Listen to SFX Montage]                               │
└─────────────────────────────────────────────────────────┘

• HTML5 <audio> players for BGM tracks and select SFX
• Sound counts pulled from sound_manifest.json categories
• Optional "SFX Montage" — a compiled 30-second highlight reel if the audio pipeline produced one
• Waveform visualizations using <canvas> or CSS gradients for visual flair

Section 6: Screenshots & Trailer¶

Data sources: store_assets/ios/screenshots/, store_assets/android/screenshots/, store_assets/steam/screenshots/, store_assets/trailer/

• Device-framed screenshot carousel — screenshots wrapped in device mockups (iPhone, Android phone, iPad, Steam window) using CSS device frames
• Platform tabs: click iOS / Android / PC to see platform-specific screenshots
• Trailer section — full-width embedded video player:
• YouTube embed if URL is configured
• Otherwise, HTML5 <video> with the generated trailer_1080p.mp4
• Poster image from trailer/thumbnail.png
• Play button overlay

Section 7: Pricing / Monetization¶

Data sources: game_context.store_config, GDD economy model

Pricing cards with character art as decoration, CTA buttons linking to respective store pages. If F2P, the main CTA is "Download Free" with IAP tiers shown below. If premium, a single price card with "Buy Now" is featured.

Section 8: GDD Highlights / Game Design Pillars¶

Data sources: GDD game concept document, game_context.content_themes, systems index

A visually rich section presenting: - 3 design pillars (from GDD) as large illustrated cards (using character promo art or environment art as backgrounds) - Core loop diagram rendered as an animated SVG: e.g., "Select Category → Answer Questions → Earn XP → Unlock Characters → Compete" - Systems overview — compact icons for: Achievements, Leaderboards, Daily Challenges, Multiplayer, Season Pass (linked to live-ops features from GDD)

Section 9: Press Kit¶

Data sources: All generated assets bundled

Download buttons for: - Logo pack (.zip containing icon at multiple resolutions) - Screenshot pack (.zip of all platform screenshots) - Character art pack (.zip of all character promo art + expression sheets) - Press release (.pdf generated from GDD pitch document + brand identity) - Brand guidelines (color palette, fonts, logo usage from brand identity) - Sound kit (.zip of select BGM + SFX for streamers/press)

Section 10: Social & Community¶

Data sources: brand_entity, store_assets/social/

• Social media banner previews (Twitter, Discord, Facebook, YouTube) using the generated banners from store_assets/social/
• Direct links to social profiles
• Discord server embed/invite widget
• Community stats (if available)

Section 11: Footer¶

• Platform availability badges (iOS, Android, Steam, etc.)
• Legal links: Privacy Policy, Terms of Service, EULA
• Age rating badge (ESRB/PEGI/IARC from store_config.content_rating)
• Contact email from brand identity
• Copyright with studio name and year
• "Powered by IntelliVerseX" badge (optional)

6. Council Review Gate¶

Every generated page passes through three review stages before deployment:

Stage 1: SEO Metadata Validation¶

from council_server.server import generate_seo_metadata

seo = await generate_seo_metadata(
    content_summary=f"{game_name}: {game_description}",
    platform="web",
    content_type="landing_page",
    brand_context=brand_entity,
    target_audience=game_context["target_audience"],
)

Validates: title tag length, meta description, og:image dimensions, structured data completeness.

Stage 2: Compliance Check¶

from council_server.server import compliance_check

result = await compliance_check(
    content_metadata={
        "title": page_title,
        "description": meta_description,
        "claims": extracted_claims,
        "age_rating": game_context["age_rating"],
    },
    platform="web",
    content_type="landing_page",
    brand_context=brand_entity,
    target_audience=game_context["target_audience"],
    is_kids_content=game_context["age_rating"] in ("E", "3+"),
)

Checks: brand safety, legal compliance (age rating accuracy, COPPA if kids game, claim verification), content appropriateness.

Stage 3: Multi-Model Quality Audit¶

from council_server.server import council_audit

audit = await council_audit(
    pipeline_kind="landing_page",
    phase="final",
    artifact={
        "html": page_html,
        "sections": section_list,
        "word_count": word_count,
        "image_count": image_count,
    },
    tier="T1",
)

GPT + Gemini + Claude score the page on: visual hierarchy, copy clarity, CTA effectiveness, mobile responsiveness, load performance, conversion design.

Review Output¶

Results saved as ivx/landing_page_audit.json:

{
  "seo_score": 85,
  "compliance_passed": true,
  "quality_score": 82,
  "overall_verdict": "APPROVED",
  "recommendations": [
    "Add a testimonial section for social proof",
    "Reduce hero image file size below 200KB"
  ],
  "reviewed_at": "2026-04-02T14:30:00Z"
}

Pages scoring below thresholds are flagged for revision. Only approved pages proceed to deployment.

7. Deployment¶

S3 Static Hosting (Default)¶

aws s3 sync landing_page/ s3://my-studio-web/my-game/ \
  --cache-control "max-age=86400" \
  --content-type "text/html" \
  --exclude "ivx/*" --exclude "deploy/*"

Netlify¶

npx netlify deploy --dir=landing_page --prod

Vercel¶

npx vercel --prod landing_page/

GitHub Pages¶

cd landing_page
git init && git add . && git commit -m "Deploy landing page"
git remote add origin git@github.com:my-studio/my-game-web.git
git push -u origin main

Custom Domain¶

1. Point DNS (CNAME or A record) to your hosting provider
2. Enable HTTPS (automatic on Netlify/Vercel/CloudFront)
3. Update sitemap.xml with canonical domain

8. SEO Checklist¶

The generated page includes all of these automatically:

9. Asset Preparation Pipeline¶

Raw pipeline outputs are optimized for web before inclusion:

The pipeline also generates <picture> elements with fallback formats:

<picture>
  <source srcset="assets/images/hero-key-art.avif" type="image/avif">
  <source srcset="assets/images/hero-key-art.webp" type="image/webp">
  <img src="assets/images/hero-key-art.jpg" alt="{game_name}" loading="lazy">
</picture>

10. Coming Soon Variant¶

For pre-launch games, the coming_soon variant generates a teaser page rich with generated assets:

┌─────────────────────────────────────────────────────────────┐
│  ╔═══════════════════════════════════════════════════════╗   │
│  ║     [Parallax Key Art — scrolling environment]       ║   │
│  ║                                                       ║   │
│  ║           {game_name}                                 ║   │
│  ║     "{brand_entity.tagline}"                          ║   │
│  ║                                                       ║   │
│  ║  ┌─────────────────────────────────────────────────┐  ║   │
│  ║  │  Launching {launch_date}                        │  ║   │
│  ║  │  ██ 45 Days  ██ 12 Hrs  ██ 34 Min  ██ 56 Sec   │  ║   │
│  ║  └─────────────────────────────────────────────────┘  ║   │
│  ╚═══════════════════════════════════════════════════════╝   │
│                                                              │
│  ┌────────── Character Tease ──────────┐                    │
│  │  [char1 promo] [char2 promo] [???]  │                    │
│  │  "Meet the team. More revealed soon" │                    │
│  └─────────────────────────────────────┘                    │
│                                                              │
│  ┌────────── Teaser Trailer ───────────┐                    │
│  │  [▶ embedded 15-sec teaser clip]    │                    │
│  └─────────────────────────────────────┘                    │
│                                                              │
│  ┌────────── Audio Preview ────────────┐                    │
│  │  ▶ Main Theme (0:30 preview)        │                    │
│  └─────────────────────────────────────┘                    │
│                                                              │
│  ┌────────── Get Notified ─────────────┐                    │
│  │  [email@example.com ] [Notify Me]   │                    │
│  │  Or follow us:                       │                    │
│  │  [Twitter] [Discord] [YouTube]       │                    │
│  └─────────────────────────────────────┘                    │
│                                                              │
│  Press? → [Request Early Access Key]                         │
│                                                              │
│  © {year} {studio_name}  ·  Privacy  ·  Terms               │
└─────────────────────────────────────────────────────────────┘

Features: - Parallax hero using generated environment layers (not just a static image) - Character tease carousel — shows 2-3 character promo arts with the rest as "???" silhouettes - Teaser trailer embed — trimmed 15-sec clip from the full trailer - Audio preview — main theme 30-second snippet with waveform visualization - Email capture form (connects to Mailchimp, ConvertKit, Sendinblue, or custom webhook via hidden form action) - Live countdown timer (JavaScript, target date from game_context.launch_date) - Social media links with generated banner previews on hover - Press early access signup form for keys/builds

Platform Notes¶

Mobile Games¶

• Prominent App Store / Google Play download buttons above the fold
• App Store Smart Banner meta tag: <meta name="apple-itunes-app" content="app-id={apple_id}">
• Google Play badge with deep link
• QR code for direct download (generated automatically)

PC / Steam Games¶

• Steam widget embed or "Wishlist on Steam" CTA button
• System requirements section
• Animated GIF or short gameplay loop

Console Games¶

• Platform logos (PlayStation, Xbox, Nintendo Switch)
• Physical edition info if applicable
• Links to console store pages

VR Games¶

• 360-degree screenshot viewer
• Supported headset list
• Comfort rating display

Checklist¶

Data Prerequisites¶

• brand_entity.json and game_context.json exist on S3 (run gdd_to_entity.py first)
• brand_entity.characters[] populated with detailed character bibles (appearance, traits, backstory, voice)

Asset Prerequisites (run upstream pipelines first)¶

• Character promo art generated — 2d_characters/{id}/promo/ (via ivx-character-factory)
• Character expression sheets generated — 2d_characters/{id}/expressions/ (via ivx-character-factory)
• Character sprite sheets generated — 2d_characters/{id}/sprites/ (via ivx-character-factory)
• Store assets generated — key art, screenshots, trailer (via ivx-store-launcher)
• Game audio generated — BGM, SFX, stingers, voice (via ivx-game-audio-factory)
• Environments generated — parallax layers (via ivx-environment-generator, optional)
• Sound manifest exists — game_sound/ivx/sound_manifest.json

Page Generation¶

• Landing page pipeline triggered with desired variant(s)
• Asset optimization completed (WebP conversion, audio trimming, video re-encoding)
• CSS sprite animations generated from sprite-spec-v1.json frame data
• Audio previews trimmed to 30-second clips with fade-out

Council Review¶

• SEO score >= 70 (Stage 1: generate_seo_metadata)
• Compliance check passed (Stage 2: brand safety, legal, COPPA if kids game)
• Quality audit score >= 75 (Stage 3: GPT + Gemini + Claude multi-model review)
• landing_page_audit.json reviewed for recommendations and all items addressed

Deployment¶

• Custom domain configured (DNS CNAME/A record pointing to host)
• HTTPS enabled on deployment target (automatic on Netlify/Vercel/CloudFront)
• CDN cache headers configured for static assets
• Analytics tracking added (Google Analytics, Plausible, or Fathom)

Quality Assurance¶

• Page tested on mobile viewport (375px width)
• Page tested on tablet viewport (768px width)
• Page tested on desktop viewport (1440px width)
• Page tested on slow connection (all images lazy-loaded, total page weight < 3MB)
• Sprite animations rendering correctly (CSS keyframes cycling through frames)
• Audio players functional (play/pause, no autoplay on mobile)
• Parallax scroll effect smooth (if environment layers included)
• Social share preview tested (paste URL into Twitter, Facebook, Discord, iMessage)
• Press kit downloads working (all .zip files valid, PDF renders correctly)
• Email capture form tested (if coming_soon variant, webhook receiving submissions)
• Lighthouse score checked (Performance > 90, Accessibility > 90, SEO > 90)
• All character voice samples play correctly (if generated)