What this prompt does
This prompt generates a complete weather app UI specification across seven distinct UI components — from the full-screen current conditions view down to a home screen widget — plus working framework code for the conditions display and hourly scroll. What makes it effective is the embedded industry ruleset: the template enforces the information hierarchy (current → hourly → daily → radar → details → alerts) that users have been trained to expect from apps like Weather.com and Apple Weather. Skipping that order disorients users; the prompt prevents it.
The dynamic theming requirement is the sharpest constraint in the template. Rather than shipping a static dark or light UI, it requires the design to shift with weather state — blue gradients for clear skies, charcoal palettes for storm conditions. This is not cosmetic; it reduces the cognitive load of reading conditions at a glance, which is why people open weather apps on reflex.
The final deliverable includes actual framework code for the current conditions display and hourly forecast scroll, not just mockup descriptions. You specify the framework via [framework], so the output targets your stack directly rather than requiring translation from pseudocode.
When to use it
- Building a native iOS or Android weather app and need a complete component inventory before opening your design tool.
- Designing a white-label weather feature to embed inside a travel, outdoor, or agriculture app.
- Pitching a weather-adjacent product to stakeholders and needing a polished, realistic UI concept fast.
- Rebuilding an existing weather app that looks dated — use this to benchmark your current UI against modern data-visualization standards.
- Creating a Flutter or React Native prototype where you want working scroll and gradient logic without hand-coding the animation from scratch.
Example output
For [data_depth]: professional, [features]: radar + severe alerts + UV + widgets, [target_users]: outdoor workers, [framework]: Flutter:
CurrentConditionsWidget:
- Hero: 78°F / feels like 74°F, "Partly Cloudy"
- Background: animated linear gradient #87CEEB → #B0C4DE,
shifting toward #FF6347 (sunset in 2h)
- AnimatedIcon: sun-cloud Lottie asset, 60×60dp
- HourlyScroll: horizontal ListView, SplineChart overlaid
on precipitation BarChart
- UVIndexCard: arc gauge 0–11, current: 8 "Very High",
color: #FF8C00
- WindCard: compass SVG rotated to 247° (WSW), 14 mph
Flutter snippet (AI will generate the WeatherGradient helper
class — it is not a pub.dev package):
Container(
decoration: WeatherGradient.forCondition(condition),
child: Column([
TemperatureHero(temp: current.temp,
feelsLike: current.feelsLike),
HourlyForecastScroll(hours: forecast.hourly),
])
)
Pro tips
- Set
[data_depth]to "consumer" vs "professional" deliberately — consumer drops pressure and dew point, keeping the UI uncluttered; professional exposes every sensor value, appropriate for pilots or farmers. - If your
[target_users]are elderly or accessibility-focused, state that explicitly — the prompt's typography scale (large temp, small detail) aligns well, but you need to call out minimum contrast ratios or the output will not include them. - Pair the severe weather alert output with a push notification spec prompt — the banner the template generates is in-app only; background alerts require a separate notification pattern the template does not cover.
- The radar section assumes touch-native pinch-zoom. If your
[framework]is web-based, say so explicitly — the default gesture handling breaks on desktop without an override. - Run the prompt twice with different weather states (clear sunny day vs. active thunderstorm) and diff the gradient and color mood outputs. This surfaces whether your design system can actually handle both extremes — most teams discover it cannot until late in QA.
