Guide
- Hero section
- Midjourney
- AI
Guide
- Hero section
- Midjourney
- AI
Guide
- Hero section
- Midjourney
- AI
Building a Hero Section with Midjourney + Framer
In this blog, I’ll show you how to build a futuristic, AI-powered hero section built entirely with Midjourney and Framer—no code required. If you want to create something similar, let me walk you through the process.
Posted by
Nandi
Table of contents
Why AI?
Lately, I’ve been noticing a wave of stunning AI-generated hero sections popping up across the web. It feels like a new trend is unfolding right in front of us, and I wanted to figure out exactly how these eye-catching designs are created.
So, I went ahead and cracked the code.
Why AI?
Lately, I’ve been noticing a wave of stunning AI-generated hero sections popping up across the web. It feels like a new trend is unfolding right in front of us, and I wanted to figure out exactly how these eye-catching designs are created.
So, I went ahead and cracked the code.
Why AI?
Lately, I’ve been noticing a wave of stunning AI-generated hero sections popping up across the web. It feels like a new trend is unfolding right in front of us, and I wanted to figure out exactly how these eye-catching designs are created.
So, I went ahead and cracked the code.
AI Hero sections.
AI Hero sections.
AI Hero sections.
Step 1: Finding a reference image
The first step in generating a high-quality AI image is finding a solid reference. Midjourney allows you to incorporate style references into your prompts, which makes a huge difference in controlling the final look.
I started by searching on Google for “Studio Ghibli style illustration.” I was looking for an image that had a strong visual identity—something with a dreamy, painterly aesthetic that could guide the AI in generating my hero section artwork.
Step 1: Finding a reference image
The first step in generating a high-quality AI image is finding a solid reference. Midjourney allows you to incorporate style references into your prompts, which makes a huge difference in controlling the final look.
I started by searching on Google for “Studio Ghibli style illustration.” I was looking for an image that had a strong visual identity—something with a dreamy, painterly aesthetic that could guide the AI in generating my hero section artwork.
Step 1: Finding a reference image
The first step in generating a high-quality AI image is finding a solid reference. Midjourney allows you to incorporate style references into your prompts, which makes a huge difference in controlling the final look.
I started by searching on Google for “Studio Ghibli style illustration.” I was looking for an image that had a strong visual identity—something with a dreamy, painterly aesthetic that could guide the AI in generating my hero section artwork.
Concept image.
Concept image.
Concept image.
After a bit of browsing, I found the perfect reference image. Now it was time to put Midjourney to work.
Step 2: Crafting the perfect Midjourney prompt
Midjourney’s results are only as good as the prompts you feed it. So, I used a structured approach:
[Subject] + [Action] + [Environment] + [Art Style]
For this particular hero section, I wanted a futuristic, sci-fi-inspired cityscape with a sense of adventure. Here’s the final prompt I used:
“A small character / on adventure gazing out / over a landscape with a huge cyberpunk city with skyscrapers / studio ghibli art style / –sref [reference image link] –ar 16:10.”
After a bit of browsing, I found the perfect reference image. Now it was time to put Midjourney to work.
Step 2: Crafting the perfect Midjourney prompt
Midjourney’s results are only as good as the prompts you feed it. So, I used a structured approach:
[Subject] + [Action] + [Environment] + [Art Style]
For this particular hero section, I wanted a futuristic, sci-fi-inspired cityscape with a sense of adventure. Here’s the final prompt I used:
“A small character / on adventure gazing out / over a landscape with a huge cyberpunk city with skyscrapers / studio ghibli art style / –sref [reference image link] –ar 16:10.”
After a bit of browsing, I found the perfect reference image. Now it was time to put Midjourney to work.
Step 2: Crafting the perfect Midjourney prompt
Midjourney’s results are only as good as the prompts you feed it. So, I used a structured approach:
[Subject] + [Action] + [Environment] + [Art Style]
For this particular hero section, I wanted a futuristic, sci-fi-inspired cityscape with a sense of adventure. Here’s the final prompt I used:
“A small character / on adventure gazing out / over a landscape with a huge cyberpunk city with skyscrapers / studio ghibli art style / –sref [reference image link] –ar 16:10.”
Inital prompt.
Inital prompt.
Inital prompt.
A few things to note:
The --sref flag tells Midjourney to use my reference image for styling.
The --ar 16:10 sets the aspect ratio to match the hero section layout.
Step 3: Iterating to get the perfect image
The first generation in Midjourney rarely gives you exactly what you want. That’s why I went through multiple rounds of:
A few things to note:
The --sref flag tells Midjourney to use my reference image for styling.
The --ar 16:10 sets the aspect ratio to match the hero section layout.
Step 3: Iterating to get the perfect image
The first generation in Midjourney rarely gives you exactly what you want. That’s why I went through multiple rounds of:
A few things to note:
The --sref flag tells Midjourney to use my reference image for styling.
The --ar 16:10 sets the aspect ratio to match the hero section layout.
Step 3: Iterating to get the perfect image
The first generation in Midjourney rarely gives you exactly what you want. That’s why I went through multiple rounds of:
Full prompting process.
Full prompting process.
Full prompting process.
Generating variations
Zooming out to expand the scene
Tweaking the prompt to fine-tune the composition
After a few iterations, I landed on the perfect hero image—one that felt dynamic, visually striking, and perfectly aligned with the AI-powered, futuristic theme I was aiming for.
Step 4: Bringing it into Framer
Once I had my AI-generated image, it was time to build the hero section in Framer. The process was simple:
Upload the image into Framer and set it as the background.
Add a heading and subheading that matched the futuristic theme.
Include a call-to-action (CTA)—in this case, a waitlist signup button.
Generating variations
Zooming out to expand the scene
Tweaking the prompt to fine-tune the composition
After a few iterations, I landed on the perfect hero image—one that felt dynamic, visually striking, and perfectly aligned with the AI-powered, futuristic theme I was aiming for.
Step 4: Bringing it into Framer
Once I had my AI-generated image, it was time to build the hero section in Framer. The process was simple:
Upload the image into Framer and set it as the background.
Add a heading and subheading that matched the futuristic theme.
Include a call-to-action (CTA)—in this case, a waitlist signup button.
Generating variations
Zooming out to expand the scene
Tweaking the prompt to fine-tune the composition
After a few iterations, I landed on the perfect hero image—one that felt dynamic, visually striking, and perfectly aligned with the AI-powered, futuristic theme I was aiming for.
Step 4: Bringing it into Framer
Once I had my AI-generated image, it was time to build the hero section in Framer. The process was simple:
Upload the image into Framer and set it as the background.
Add a heading and subheading that matched the futuristic theme.
Include a call-to-action (CTA)—in this case, a waitlist signup button.
Completed hero section.
Completed hero section.
Completed hero section.
And just like that, the AI-powered hero section was complete!
Why this works
The combination of AI-generated visuals and no-code design tools like Framer makes it easier than ever to create unique, high-quality hero sections. Here’s why this approach is so effective:
Custom AI Imagery – Your site gets a one-of-a-kind look that stands out.
Style Control with References – Using --sref ensures a consistent aesthetic.
Fast, No-Code Implementation – Midjourney + Framer = quick, pro-level results.
If you’re looking to experiment with AI in your web design workflow, this is a fantastic place to start.
And if you need some extra help, my tutorial on no code AI hero section covers prompting and setting up the hero section in Framer in-depth.
And just like that, the AI-powered hero section was complete!
Why this works
The combination of AI-generated visuals and no-code design tools like Framer makes it easier than ever to create unique, high-quality hero sections. Here’s why this approach is so effective:
Custom AI Imagery – Your site gets a one-of-a-kind look that stands out.
Style Control with References – Using --sref ensures a consistent aesthetic.
Fast, No-Code Implementation – Midjourney + Framer = quick, pro-level results.
If you’re looking to experiment with AI in your web design workflow, this is a fantastic place to start.
And if you need some extra help, my tutorial on no code AI hero section covers prompting and setting up the hero section in Framer in-depth.
And just like that, the AI-powered hero section was complete!
Why this works
The combination of AI-generated visuals and no-code design tools like Framer makes it easier than ever to create unique, high-quality hero sections. Here’s why this approach is so effective:
Custom AI Imagery – Your site gets a one-of-a-kind look that stands out.
Style Control with References – Using --sref ensures a consistent aesthetic.
Fast, No-Code Implementation – Midjourney + Framer = quick, pro-level results.
If you’re looking to experiment with AI in your web design workflow, this is a fantastic place to start.
And if you need some extra help, my tutorial on no code AI hero section covers prompting and setting up the hero section in Framer in-depth.
