Lesson 01
How to Build AI Landing Pages With Images and Videos
Overview
A media-first Aura workflow for moving beyond generic AI landing pages. The lesson starts with a DESIGN.md design system, plans the sections and interactions, generates multiple directions, and uses screenshot references to make each visual feel specific to the product.
From there, the workflow batch-generates contextual section images, turns selected images into short videos, and polishes playback behavior so the final page feels designed rather than assembled from stock-style placeholders.
Aura can now do more than generate a landing page layout. In this workflow, the page starts from a design system, gets generated from a detailed prompt, receives additional sections from visual references, replaces generic images with contextual AI images, and then turns those images into short landing page videos.
That matters because most AI-generated websites fail in the same place: the text may be acceptable, the sections may be present, but the imagery feels generic. It looks like stock photography, repeated avatars, vague gradients, or screenshots that do not belong to the product.
The better workflow is:
design system -> landing page -> richer sections -> contextual images -> loop or hover videos -> human taste pass
This tutorial follows the recording step by step.
What Is the Fastest Workflow for AI Landing Pages With Images and Videos?
- Open Aura and start from a
DESIGN.mddesign system. - Pick the landing page sections you need, such as hero, features, testimonials, pricing, story, contact, and footer.
- Choose interaction and polish settings, such as rich interactions, smooth scroll, Awwwards-style polish, and rich images or avatars.
- Describe the product with enough context for the model to understand the business.
- Generate the first landing page.
- Copy the same prompt into multiple design systems or template-derived
DESIGN.mdfiles. - Compare the results and keep the strongest foundation.
- Ask for more images and more visual sections.
- Drag in screenshot references and ask Aura to adapt those sections to your website.
- Use Generate Images to replace generic images in one batch.
- Tweak any image prompt that feels too generic, off-brand, or visibly AI.
- Use Generate Videos to animate selected images.
- Set videos to Loop, Play once, or Hover depending on the section.
- Ask Aura to fix layout issues, such as overlapping hero text or videos that do not respond to hover.
- Do the final taste pass yourself.
Why Should You Start With a DESIGN.md Design System?
The recording starts with the right premise: if you want a good landing page and you do not know exactly how to get there, start from a design system.
In Aura, that means using DESIGN.md, a design system saved as a single file. You can bring one in from a URL, import one from an existing template, or choose from the design systems already available in the product.
The design system is not just decoration. It carries:
- typography
- colors
- spacing
- radius
- motion rules
- interaction style
- image direction
- layout taste
That gives the model a much stronger foundation than a plain prompt like "make a fintech landing page."
How Do You Choose the Design Direction Before Writing the Prompt?
After choosing a design system, inspect the visual ingredients. The recording checks the fonts, colors, and overall style before generating the page.
This is important because the design system decides the baseline. A sparse editorial system, a luxury interior system, a dark sci-fi system, and a product-dashboard system will all produce very different pages even with the same product prompt.
When you are building for a client, this is where you align on taste before you ask AI to generate anything.
Good questions to ask:
- Does this typography match the brand?
- Are the colors close to the desired mood?
- Does the system feel premium enough for the market?
- Is the image style relevant to the product?
- Does the system have enough layout detail to guide the page?
What Landing Page Sections and Settings Should You Choose First?
The next step is selecting the sections and behaviors. In the recording, the page uses normal landing page building blocks:
- hero
- features
- testimonials
- story
- pricing
- contact form
- footer
For motion and polish, the selected direction is richer: rich interactions, smooth scroll, Awwwards-style polish, fully responsive output, and rich images or avatars.
The rich images option matters. If you leave visual guidance too vague, the AI often fills the page with generic letters, gradients, icons, or placeholder-looking people. If your landing page needs to feel real, you want the model to think about imagery from the start.
How Should You Describe the Product Before Generating the Page?
The product in the recording is a fictional fintech SaaS called Sequra. The prompt is dictated with Whisper Flow, then added into Aura.
That prompt includes:
- the product category
- the brand name
- the design system
- the sections to build
- the interaction and animation requirements
- the product description
- the imported HTML or template context when available
This is the point where the workflow becomes reusable. Once you have a strong prompt, you can copy it into multiple design systems and compare the results.
For landing pages, this is often better than trying to perfect one generation too early. First, explore the foundation.
Why Should You Generate Multiple Directions From the Same Prompt?
The first generated page has the requested sections and the requested animation behavior. It is not perfect, but it is already useful as a first pass.
Then the same prompt is copied into another design system. The second design has more images and more structure. Then a third version is generated from a template-derived DESIGN.md and HTML file.
That comparison is the lesson.
The prompt matters, but the design system controls the taste floor. A stronger foundation gives the model more to preserve.
Use this pattern when you are unsure which direction is best:
- Write one strong prompt.
- Run it through three different design systems.
- Compare layout, imagery, density, motion, and section quality.
- Keep the strongest foundation before polishing.
When Should You Import Templates Into DESIGN.md?
Aura can also generate a DESIGN.md file from an existing template. In the recording, that gives the model both the design system and the HTML structure from a real landing page.
This is useful when you want more than a color palette. A template can carry section rhythm, image density, hero composition, and interaction expectations. The generated page still adapts to the new business, but it inherits a stronger structure.
That is why the third direction is more image-heavy and visually complete. The AI is not starting from nothing. It has a concrete layout system to reinterpret.
How Do You Ask Aura for More Images and Visual Sections?
After comparing the first generated pages, the recording asks for more images:
I want more images in the layout. I want a beautiful image of the team and I want maybe a hero that has more visuals. I want maybe a gallery or visuals that would fit my website.
That is a strong follow-up prompt because it does not just ask for decoration. It names the missing visual roles: team image, hero visuals, gallery, and visuals that fit the website.
At this stage, do not worry about perfection. You are moving from a text-heavy landing page into a more visual landing page. The image generation pass comes next.
How Should You Use Screenshots as References in Aura?
One of the most useful moments in the recording is the screenshot reference workflow.
The process is:
- Find sections you like.
- Take screenshots.
- Drag the screenshots into Aura.
- Use them as references.
- Ask Aura to adapt those sections to the content of the website.
The word "adapt" matters. You are not asking Aura to paste the screenshot into the page as an image. You are asking it to learn the layout idea, then make it fit the product and copy.
That distinction helps avoid pages that look copied but do not make sense for the business.
How Do You Generate Contextual Landing Page Images in One Batch?
Once the page has image slots, Aura can generate contextual images for all of them at once.
In the recording, one page has seven images, another has five, and another has six. The important detail is that the images are generated with the context of the page. Aura can read the surrounding text and infer what the image should represent.
This is the difference between generic AI website imagery and useful website imagery.
Generic images say:
business person
dashboard
building
team
abstract gradient
Contextual images say:
this fintech product needs a security dashboard
this interior design page needs a room transformation
this Mars landing page needs a cinematic planetary surface
this footwear page needs a product hero with the right mood
How Do You Replace Stock-Looking AI Images With Page-Specific Visuals?
The selected stills show why the workflow matters. These pages are not using the same generic people and office buildings that show up in every AI-generated landing page.
The Mars page gets a planet and mission visual. The footwear page gets a dark product-focused hero. The interior page gets room imagery that fits the promise of redesigning a space.
These are still AI-generated images, and the recording is honest about that. Some images look more artificial than others. The point is not that every image is final. The point is that the page now has a meaningful visual direction.
From there, the designer can:
- regenerate a weak image
- adjust the image prompt
- make the palette more beige, green, cinematic, or brand-specific
- use the title of the section as the image prompt
- replace the AI image with real photography later
That is a better starting point than stock imagery that never matched the product.
How Do You Turn Static Landing Page Images Into Videos?
After generating images, the workflow moves to video.
In Aura, the video generation flow sits in the same place as image generation. Instead of leaving a hero image static, you can generate a short video from it and choose how it plays.
The recording shows three playback modes:
- Loop: good for hero backgrounds and ambient sections.
- Once: good for a first-load reveal that should not keep moving.
- Hover: good for cards, galleries, and interactive visual moments.
This is where the landing page starts to feel less like a static AI screenshot and more like a produced web experience.
When Should You Use Loop, Once, or Hover Video Playback?
Not every video should loop forever.
Use Loop when the motion is subtle enough to become atmosphere. This works well for hero sections, abstract backgrounds, product dashboards, and cinematic environmental visuals.
Use Once when the motion is a reveal. It should create a moment on first load, then get out of the way.
Use Hover when the image belongs inside a card, gallery, feature block, or interactive section. Hover videos are useful because they let the page stay calm until the user shows intent.
The recording also notes a practical limitation: sometimes a generated video used as a background is not interactive by default. That is not the end of the workflow. It is a promptable issue.
How Do You Fix Layout and Interaction Problems After Video Generation?
After generating the video, the page has two problems:
- the hero title and description overlap with the image
- the video needs to play on hover
The fix is direct:
In the hero section, I want the title to not be overlapping with the image and the same with the description. Also, I want the image to be interactive. So when I hover, it is going to play the video.
That is the right level of specificity. You are not rewriting the whole page. You are describing the visible problem and the desired behavior.
This is the normal rhythm of AI web design:
generate -> inspect -> name the issue -> ask for a focused fix -> inspect again
Why Does Human Taste Still Matter After AI Image Generation?
The recording makes an important point near the end: some images are obviously AI-generated, and some are hard to tell.
That is where human taste still matters.
The tool can generate images, videos, sections, interactions, and layout fixes. But it cannot fully decide what feels believable for your audience, what feels too generic, what fits the brand, or what should be regenerated.
Use your eye for:
- faces that look too perfect
- hands or bodies that feel wrong
- product screenshots that do not make sense
- images that clash with the palette
- videos that move too much
- sections that feel visually impressive but strategically weak
AI can raise the baseline. Taste still decides the final version.
What Are the Best Aura Settings for Landing Pages With Images and Videos?
Use these settings as a starting point:
- Design source: start with a strong
DESIGN.md. - Sections: hero, features, testimonials, story, pricing, contact, and footer.
- Interaction: rich interactions when the brand can support it.
- Scroll: smooth scroll for more editorial or premium pages.
- Polish: Awwwards, agency studio, Apple, Framer, or another quality reference.
- Images: enable rich images or avatars when the page needs real visual context.
- Model: use a fast model for exploration and a stronger taste model for final polish.
- Image generation: generate all images in a batch, then regenerate weak ones individually.
- Video playback: Loop for hero atmosphere, Once for first-load reveals, Hover for interactive cards.
- Follow-up prompts: fix one visible issue at a time.
What Common Mistakes Make AI Landing Page Media Look Generic?
The first mistake is starting with a weak design system. If the visual foundation is generic, the generated page will usually need more repair.
The second mistake is trying to perfect the first output. It is often faster to run the same prompt through multiple design systems, then polish the strongest direction.
The third mistake is leaving generic imagery in place. A landing page can have good copy and still feel cheap if the images look unrelated to the product.
The fourth mistake is treating screenshots as assets instead of references. Use reference screenshots to guide structure, then ask Aura to adapt them to the website content.
The fifth mistake is animating everything. Video is powerful because it creates attention. If every section moves, nothing feels important.
The sixth mistake is trusting generated media without a taste pass. Regenerate anything that feels visibly wrong, too generic, or off-brand.
FAQ
How do I create a landing page in Aura from a design system?
Start with a DESIGN.md design system, choose the sections and interaction style, describe your product, add the generated prompt to Aura, and create the page. For better exploration, copy the same prompt into multiple design systems and compare the results.
How do I replace generic AI website images?
Ask Aura for more visual sections, then use Generate Images to replace the image slots with contextual images based on the page copy. Regenerate individual images when they feel generic, off-brand, or too visibly AI-generated.
Can Aura generate multiple images at once?
Yes. In the recording, Aura generates batches such as seven images, five images, or six images for different landing page versions. The value is that the images use the surrounding website context instead of starting from isolated prompts.
How do I turn a landing page image into a video?
Select the generated image and use Generate Videos. Choose Loop, Once, or Hover depending on the section. Hero visuals usually work best with subtle loops. Cards and galleries are often better with hover playback.
What should I do if the generated video does not play on hover?
Ask Aura for a focused interaction fix. Name the section, describe the expected behavior, and keep the request narrow. For example: "Make the hero image interactive so the video plays on hover."
Should AI-generated images be final client assets?
Not always. They are often best as strong direction-setting assets. Use them to align on mood, composition, subject, and visual strategy. If a project needs real photography, replace the AI images later with a shoot that follows the same direction.
What Is the Main Takeaway for AI Landing Pages With Contextual Media?
The biggest shift in this workflow is not only that Aura can generate landing pages. It is that the page can now generate its own visual system from context.
A good landing page no longer has to stop at:
prompt -> layout
It can move through:
prompt -> design system -> page -> contextual images -> generated videos -> interaction polish
That is a much stronger creative loop. The model builds the foundation, Aura turns the page into a visual system, and the designer uses taste to decide what is worth keeping.