In this video, I show the full workflow for building an AI landing page with contextual images and generated videos.
Main tool: https://aura.build/
The main problem with most AI-generated websites is that the layout might be good, but the imagery feels generic. You get the same stock-photo faces, vague dashboards, buildings, gradients, and placeholders that do not really fit the product.
So in this walkthrough, I start from a DESIGN .md design system, choose the landing page sections, generate multiple directions, add screenshot references, generate contextual images in batch, and then turn selected images into short videos that can loop, play once, or play on hover.
The key idea: do not stop at prompt to landing page. Move toward prompt to design system to landing page to contextual images to generated videos to interaction polish.
Chapters:
00:00:00 Why contextual landing page media matters
00:01:50 Start from a DESIGN.md design system
00:05:17 Choose sections, interactions, and polish
00:08:15 Dictate the product prompt
00:09:48 Generate the first landing page
00:10:27 Import a template into DESIGN.md
00:11:19 Compare multiple design-system foundations
00:13:38 Ask for more images and richer visuals
00:14:32 Use screenshots as references
00:16:45 Generate contextual images in one batch
00:19:47 Turn generated images into videos
00:20:38 Choose loop, once, or hover playback
00:22:00 Fix hover and overlapping hero copy
00:23:31 Use taste to judge AI images
00:25:46 Full workflow recap
Resources:
Aura: https://aura.build/
Neuform: https://neuform.ai/
Get DESIGN.md: https://getdesign.md/
OpenAI Images API: https://platform.openai.com/docs/guides/images
Google Gemini API: https://ai.google.dev/gemini-api/docs
xAI Grok: https://x.ai/grok
Channel: DesignCode
Published: 2026-05-25
Video URL: https://www.youtube.com/watch?v=T1WTGQesbrE