What Effect You're Trying to Achieve
Target result: A 1:1 square weather widget image where the center shows an oval airplane window frame. Through the glass, you see a recognizable city landmark (Eiffel Tower, Tokyo Tower, Great Wall) in dramatic extreme weather conditions. The outer area is a minimal dark UI background overlaid with a large, ultra-thin temperature numeral and a small weather icon. The entire composition is dominated by negative space, with only minimal information density — creating the sensation of "overlooking weather from above the clouds."
Application scenarios: iOS/Android weather app concept design screenshots, phone home screen theme design, UI/UX portfolio presentation, weather-related brand social media visuals.
Why "Weather UI Design" Always Fails When Described Directly
Input a weather app UI design with a city view background and you'll typically get: a standard rectangular card interface screenshot, city scenery as a background image, temperature and icons positioned in standard layout, overall feeling like a real app screenshot — no surreal quality whatsoever.
The root cause: AI's training memory for "weather UI" is actual app screenshots, not "surrealist concept design illustrations." A direct UI description triggers "application screenshot mode," not "artistic concept design mode."
4 missing elements — the gap between a generic weather UI description and the surreal airplane window effect:
Missing Element 1: The Airplane Oval Window Frame
A generic "city view background" makes AI generate rectangular or frameless cityscape. An "airplane oval window frame" triggers a completely different compositional logic — oval frame + cabin interior material texture + glass surface light reflections inside the frame. This frame is the source of the image's entire surreal quality: "seeing famous landmarks through an airplane window" inherently violates normal perspective logic (you can't actually see city landmarks at that scale from an airplane window), creating an "impossible viewpoint" surreal quality.
Missing Element 2: Extreme Weather
Generic "cityscape" defaults to fair or overcast weather — this is AI's standard processing since most cityscape training images show normal conditions. But the "extreme weather × iconic landmark" combination produces dramatic surreal visual impact: Eiffel Tower in a thunderstorm, Tokyo Tower in a blizzard, Great Wall under a sandstorm — "recognizable landmark + abnormal weather" is the second source of surreal quality.
Missing Element 3: Negative Space
Generic UI design prompts cause AI to generate medium-density interfaces — temperature, city name, weather status, 7-day forecast, all included, resulting in a full but not "premium-feeling" layout. The core aesthetic of surreal weather widgets is "extreme restraint in information density" — only one large temperature numeral and 1-2 minimal icons, 90%+ of the space empty. This extreme minimalism is a design priority choice, not an information delivery efficiency choice — it must be explicitly specified in the prompt.
Missing Element 4: Glassmorphism
In contemporary premium UI design, "frosted glass effects" (blurred background + translucent panels + border highlights) are among the most important quality markers. Generic UI descriptions don't trigger this effect — you need to explicitly add glassmorphism panels, frosted glass overlay, subtle glass reflections on the window surface to activate glassmorphism material rendering.
Why "surreal" matters beyond aesthetics: These four elements together don't just "make it look better" — they construct a "visual contradiction." The high-tech industrial quality of an airplane window × the natural violence of extreme weather × the artificial order of a minimal UI create an absurdity: "who would be checking the weather from an airplane window while watching a thunderstorm over the Eiffel Tower?" This is the essence of surrealism — embedding illogical combinations within familiar scenarios.
The Solution: Complete Prompt + Parameter Breakdown
Complete Prompt Template
A 1:1 square surreal minimal weather widget UI design. Center
composition: an airplane oval window frame, with [LANDMARK] visible
through the glass in [EXTREME WEATHER CONDITION]. Overlaid weather
UI interface: huge temperature in elegant light-weight font,
minimal weather icon in the corner. Background: a subtle gradient
resonate with the weather ([WEATHER COLOR SCHEME]). Great negative
space, tranquil atmosphere, glassmorphism panel with subtle glass
reflections. High contrast between the stormy scene and the
minimalist UI typography. Concept UI design illustration style.
Parameter Selection Reference
[LANDMARK] (Landmark selection):
| Landmark | Visual Character | Best Weather Pairing |
|---|---|---|
| Eiffel Tower, Paris | Steel lattice structure, rain reflections | Heavy rain / night lightning |
| Tokyo Tower, Japan | Orange-red tower body, stark in snow | Blizzard / cherry blossom (non-extreme but visually strong) |
| Great Wall, China | Strong horizontal extension, mist creates tension | Dense fog / sandstorm |
| Big Ben, London | Classical feel, neon wet-street highlights | Continuous rain / magical lighting |
| Burj Khalifa, Dubai | Soaring vertical lines, heat haze effect | Extreme heat haze / sandstorm |
[EXTREME WEATHER CONDITION] (Weather description):
- Heavy rain:
heavy rain with dramatic lightning strikes illuminating the scene - Blizzard:
heavy snowfall with blizzard conditions, landmark barely visible through the storm - Dense fog:
dense atmospheric fog, landmark emerging like a ghost from the mist - Heat haze:
intense heat haze distorting the air, golden oppressive sunlight - Aurora:
aurora borealis over the night landscape, ethereal green and purple lights
[WEATHER COLOR SCHEME] (Background gradient):
- Heavy rain:
deep steel blue to dark slate grey - Blizzard:
pale ice blue to cool silver white - Fog:
soft grey lavender to muted sage green - Heat haze:
deep amber to burnt orange - Aurora:
deep navy to emerald green
Step-by-Step Workflow
Step 1: Select Your Landmark × Weather Combination
Choose a "landmark × weather" combination from the parameter table. Recommended first attempt: Eiffel Tower × heavy rain — this combination has the richest AI training data (the tower is the most photographed landmark in the world), and the weather effect (lightning illuminating the lattice structure) has maximum visual impact and the highest first-generation success rate.
Step 2: Build Your Prompt
Replace parameters in the template:
A 1:1 square surreal minimal weather widget UI design. Center
composition: an airplane oval window frame, with the Eiffel Tower
visible through the glass in heavy rain with dramatic lightning
strikes. Overlaid weather UI interface: huge temperature "16°C"
in elegant light-weight font, minimal rain icon in the corner.
Background: a subtle gradient from deep steel blue to dark slate
grey. Great negative space, tranquil atmosphere, glassmorphism
panel with subtle glass reflections on the oval window. High
contrast between the stormy scene and the minimalist UI.
Concept UI design illustration style.
Note: Write the specific temperature number directly ("16°C") rather than generic "temperature" — this lets AI render the actual numeral, reducing randomness.
Step 3: Evaluate the Generated Result
Check with 3 criteria:
- Is the oval window frame clearly visible? If the frame disappeared, add
clearly defined oval airplane window frame with distinct frame border - Is there sufficient negative space around the UI elements? If the image has too much information, add
extreme minimalism, only temperature and one small icon, all other space is empty - Does the glass texture feel real? If it looks like a flat background, add
frosted glass texture on the window, subtle interior reflections visible on the glass surface
Additional Check: Proportions
The ideal composition for this UI style: oval window occupies 55-65% of the frame area, temperature numeral overlaid on the window (spanning approximately 20-30% of image height), window surround area approximately 35-45% of the frame. If the window is too small or too large, add the oval window occupies approximately 60% of the frame, leaving generous negative space on all sides for the UI overlay.
Fine-Tuning: From 60 Points to 90 Points
Adjustment 1: Give the temperature numeral more design character
Add: "temperature number displayed in ultra-thin Helvetica Neue
or similar minimal typeface, almost transparent, creating depth
with the background"
ultra-thin weight + almost transparent produces the premium "hairline font" effect — the signature typographic style of contemporary high-end UI design, distinguishing it from standard bold temperature displays.
Adjustment 2: Enhance the window glass realism
Add: "subtle interior cabin lighting reflected in the oval window
glass, airplane seat headrest partially visible at the bottom
corner suggesting the interior perspective"
Adding interior cabin light reflections and seat armrests at the window edge makes the "airplane perspective" more believably immersive — viewers feel "this was actually photographed from a plane."
Adjustment 3: Coordinate weather and background gradient
The background gradient ([WEATHER COLOR SCHEME]) needs to "echo" rather than "clash with" the dominant colors inside the window:
- Rain scene: interior is blue-grey, gradient also cool-toned (weather "seeps" into the interface)
- Heat haze scene: interior is orange-gold, gradient warm orange (heat sensation radiates across the whole interface)
- Aurora scene: interior is deep blue + green, gradient deep navy (aurora colors "spill" into the interface)
This "interior weather color = background gradient color" design logic is the source of the entire UI style's visual coherence.
Adjustment 4: Seasonal limited editions
Layer seasonal elements on the base prompt for limited edition effects:
Add for spring: "cherry blossom petals drifting past the oval window,
partially obscuring the landmark"
Add for winter: "frost crystals forming on the window glass edges,
condensation droplets visible on the glass interior"
Add for autumn: "falling maple leaves caught in the storm outside
the window, warm amber tones mixing with the grey weather"
Seasonal elements don't change the basic structure but inject temporal dimension into "same landmark × same weather" — useful for "landmark four seasons series" or "same city in different seasons" content.
Alternative Comparisons: Three Weather UI Styles
| Style | Key Characteristics | Best For | Difficulty |
|---|---|---|---|
| Airplane window surreal | Oval frame + extreme weather + minimal UI | Concept design, portfolio | ★★★ |
| Glass card minimal | Rectangular frosted card + realistic city background | Actual UI prototypes | ★★ |
| Full-screen immersive surreal | No UI frame, weather landscape fills the screen | Wallpapers, atmosphere images | ★★ |
"Airplane window surreal" is the most visually differentiated of the three — its impossible viewpoint and extreme weather combination immediately stands out among a sea of similar weather UI designs. Ideal for "first-glance memorability" scenarios (portfolios, social media covers). The glassmorphism aesthetic techniques from surrealist vaporwave collage design can also be applied to the glass card minimal style.
Try generating a baseline image in nanobanana pro with the "Eiffel Tower × heavy rain" combination. Once you confirm the airplane window frame and glassmorphism effects are triggering correctly, swap in your target city and weather condition.
FAQ
Why does my generated image look like a real app screenshot rather than a concept design illustration?
The UI design phrase triggers AI's training memory of "app screenshots," producing "functional interface" rather than "artistic concept illustration." Fix: Add at the end of your prompt concept UI design illustration style, not a screenshot, artistic rendering of a UI concept — explicitly specifying "artistic illustration-style UI concept rather than app screenshot." This distinction is critical for AI — it determines the entire approach to texture and quality rendering.
How do I make the airplane window frame look realistic rather than like a cardboard circle?
The prompt is missing material description. Add: realistic airplane cabin oval window with thick rubberized frame, aircraft-grade polycarbonate glass, visible window frame mounting bolts, interior cabin trim visible at the edges — these specific industrial details prompt AI to reference actual aircraft interior photographs, rather than a generic "oval shape."
Is this style suitable as an actual mobile App UI?
As "concept design presentation" — absolutely. On Dribbble, Behance, and similar platforms, this type of surrealist concept UI receives very high views and saves. But as "a shippable App UI," further adaptation is needed: ① Font size and contrast must meet WCAG accessibility standards; ② Temperature and other key information must be readable at actual small screen sizes; ③ The airplane window frame as a purely visual element would need simplification in a functional app. Recommended workflow: AI generation as "visual direction reference," then rebuild to iOS/Android specifications in Figma.