| name | visual-asset-integrator |
| description | Takes generated visual assets (images, 3D models) and integrates them into landing pages, pitch decks, and websites with brand-aligned styling. Reads asset manifest and brand visual identity to produce production-ready output. |
Visual Asset Integrator
Places generated visual assets into target outputs (landing pages, pitch decks, websites) with brand-consistent styling derived from the visual identity guide.
When to Use
- After visual-asset-generator has produced assets and manifest
- User says "build the landing page", "integrate assets", "create the page with these visuals"
- As Step 3 of the brand-visual-pipeline
Input Variables
[BRAND_NAME] — Brand name[BRAND_DOCS_DIR] — Brand docs path (default: brands/{BRAND_NAME}/)[ASSET_MANIFEST] — Path to manifest (default: assets/{BRAND_NAME}/manifest.json)[TARGET] — Output target: landing-page | pitch-deck | slide-deck | website
The Protocol
Phase 1: Load Context
- Read asset manifest from visual-asset-generator
- Read brand visual identity (colors, typography, graphic elements)
- Read brand copy if available (campaign-page-copy, MDS)
- Categorize assets by type (hero, product, 3D, texture)
Phase 2: Generate Brand Stylesheet
From the visual identity guide, generate CSS custom properties:
:root {
--brand-primary: {colors.primary.hex};
--brand-secondary: {colors.secondary.hex};
--brand-accent: {colors.accent.hex};
--brand-support: {colors.support.hex};
--brand-warning: {colors.warning.hex};
--font-display: '{typography.header.family}', serif;
--font-body: '{typography.body.family}', sans-serif;
--font-mono: '{typography.accent.family}', monospace;
--text-h1: 48px;
--text-h2: 36px;
--text-h3: 24px;
--text-body: 18px;
--text-small: 14px;
}
Phase 3: Target-Specific Integration
Landing Page (landing-page)
Generate complete HTML file with:
Structure:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header> Brand logo/wordmark </header>
<section class="hero">
<h1> Brand headline (from MDS/campaign copy) </h1>
<p> Subheadline / pitch </p>
<a class="cta"> Call to action </a>
</section>
<section class="product">
</section>
<section class="features">
</section>
<footer> Brand info </footer>
</body>
</html>
Asset Integration Rules:
- Hero images:
<picture> with WebP source + PNG fallback
- Product shots: Responsive grid with lazy loading
- 3D models:
<model-viewer> web component with auto-rotate
- Textures: CSS background-image at reduced opacity
- All images include alt text from asset metadata
Styling Rules (from brand identity):
- Background: brand primary or secondary
- Text: high-contrast using brand colors
- Accent: used sparingly for CTAs and highlights
- Borders: 1px, sharp corners (per brand guidelines)
- Generous whitespace / margins
- Max-width content for readability
Pitch Deck (pitch-deck)
Generate markdown source document for NotebookLM/Gamma with asset references:
# [BRAND_NAME] Pitch Deck
## Visual Assets Library
[List all available assets with recommended slide placement]
## Slide 1: Title
**Background**: assets/{brand}/images/hero-shots/hero-001.webp
**Content**: Brand name, tagline
**Style**: Full-bleed hero, text overlay with brand colors
## Slide 3: Product
**Visual**: assets/{brand}/3d-models/model-001/render.png
**Alternative**: Embed 3D viewer (model.glb) if platform supports
**Layout**: 60% visual / 40% text split
...
Also generate:
{brand}-gamma-prompt.md — Prompt for Gamma.app{brand}-notebooklm-prompt.md — Prompt for NotebookLM{brand}-slide-data.json — Structured slide data with asset paths
Slide Deck (slide-deck)
Integrates with visual-slidedeck-generator output format. Appends asset library to existing slide source document.
Website (website)
Generates an asset package:
index.html — Homepage with integrated assetsstyles.css — Brand-derived stylesheetassets/ — Optimized images (WebP + PNG)manifest.json — Asset inventory
Phase 4: Quality Checks
- Brand compliance: All colors match palette, typography correct
- Accessibility: Alt text present, contrast ratios meet WCAG AA
- Performance: Images have WebP + fallback, lazy loading for below-fold
- Responsiveness: Assets have responsive sizing
Phase 5: Generate Integration Report
Output brands/{BRAND_NAME}/visual-integration-report.md:
# Visual Integration Report: [BRAND_NAME]
## Summary
- Target: [landing-page/pitch-deck/website]
- Assets integrated: X
- Generated: [DATE]
## Assets Used
| Asset ID | Type | Placement | File |
|----------|------|-----------|------|
| hero-001 | Hero Image | Hero section | images/hero-shots/hero-001.png |
| model-001 | 3D Model | Product section | 3d-models/model-001/model.glb |
## Brand Compliance
- Colors: All within palette
- Typography: Correct fonts loaded
- Imagery style: Matches guidelines
## Output Files
- [list of generated files with paths]
Templates
templates/landing-page.html — Base landing page structuretemplates/pitch-deck-assets.md — Pitch deck asset integration templatetemplates/styles.css — Brand-derived stylesheet template
Integration
- Upstream: visual-asset-generator (consumes manifest), visual-identity-core
- Integrates with: pitchdeck-skill (deferred — Phase 4), campaign-page-builder, visual-slidedeck-generator (deferred — Phase 4)
- Part of: brand-visual-pipeline orchestrator
