Flutter Frontend Design
Design Thinking
Before writing any Flutter code, analyze the provided context and lock in a BOLD visual strategy:
- Purpose: What specific issue does this Flutter view resolve? Who is the end-user?
- Visual language: Choose an extreme visual language. Options include brutalist/raw, hyper-minimalist, retro-tech, organic/fluid, high-luxury, gamified/playful, editorial/print-inspired, geometric/deco, soft pastel, or purely utilitarian. Use these as jumping-off points to craft a cohesive, uncompromising aesthetic.
- Differentiation: What is the defining characteristic of this interface? What will make the user remember it?
CRITICAL: Select a definitive conceptual route and execute it flawlessly. Whether you choose chaotic maximalism or stark minimalism, the key is deliberate execution, not just visual noise.
Following this, implement functional Flutter code that is:
- Production-ready and fully operational.
- Visually striking and deeply memorable.
- Stylistically unified with a strong point of view.
- Crafted with strong attention to detail.
Frontend Aesthetics Guidelines
Prioritize the following areas in your Flutter code:
- Visual Direction: Commit fully to a distinct aesthetic through Flutter's Material widgets and theme classes. ALWAYS put the material widgets under a
Scaffold widget. Prefer dominant, confident color choices with sharp accent colors over safe, washed-out, evenly distributed palettes.
- Type System: Do not rely on Flutter's default font. Use the
google_fonts package (already included in the pubspec.yaml) to define custom text themes with personality and strong visual intent. Pair an expressive display typeface with a clean, highly legible body font to elevate the interface.
- Layout Architecture: Favor surprising compositions over predictable vertical-and-horizontal stacking. Layer elements, offset and rotate blocks, anchor content off-grid, and let shapes overlap to build asymmetry, diagonal flow, and moments that break the implied grid. Commit to either generous negative space or tightly controlled density.
- Atmosphere & Texture: Build rich visual environments instead of flat solid fills. Layer complex gradients, dramatic shadows, and depth cues. Use masked overlays, frosted or blurred surfaces, and hand-drawn or procedural detail—noise, geometric patterns, mesh gradients, layered opacity, and non-rectangular clipping—to make surfaces feel tactile and immersive.
- Animations: Animate state changes and micro-interactions deliberately. Prefer cohesive, high-impact motion: staggered reveals, shared-element transitions between screens, and a distinctive scroll feel. Give hover, tap, and press states clear, memorable feedback so interaction reinforces the visual identity.
NEVER fall back on standard AI-generated visual clichés, such as default font families (like Roboto or basic system fonts), predictable color combinations (like the overused purple/blue gradient on a white background), standard Material Design boilerplate layouts, or cookie-cutter widgets that lack context-specific personality.
Take creative liberties to make unexpected, highly customized choices that fit the specific context perfectly. No two generated designs should look identical. Shift between aggressive dark modes and airy light modes, experiment with radically different typography, and explore entirely new aesthetics. NEVER default to the same "safe" design choices (like universally relying on Space Grotesk) across different generations.
IMPORTANT: Align the complexity of your Flutter code with the intended aesthetic. Maximalist UIs require intricate widget trees, custom painters, and heavy animation logic. Minimalist UIs demand immense restraint, exact padding/margin precision, and flawless typography. True elegance stems from uncompromising execution.
Remember: As an AI, you are capable of producing extraordinary, cutting-edge Flutter UI design. Do not hold back. Demonstrate what is possible when you reject standard templates and commit fully to a unique, uncompromising visual vision.
1---2name: serverpod-flutter-frontend3description: Build highly distinctive, production-ready Flutter interfaces with exceptional design fidelity. Use when designing a new app or new screens from scratch, where no visual language is established yet. Do not use when extending or fixing screens in an app that already has a design system, theme or style guide — follow what the app already does instead.4---56# Flutter Frontend Design78## Design Thinking910Before writing any Flutter code, analyze the provided context and lock in a **BOLD** visual strategy:1112* **Purpose**: What specific issue does this Flutter view resolve? Who is the end-user?13* **Visual language**: Choose an extreme visual language. Options include brutalist/raw, hyper-minimalist, retro-tech, organic/fluid, high-luxury, gamified/playful, editorial/print-inspired, geometric/deco, soft pastel, or purely utilitarian. Use these as jumping-off points to craft a cohesive, uncompromising aesthetic.14* **Differentiation**: What is the defining characteristic of this interface? What will make the user remember it?1516**CRITICAL**: Select a definitive conceptual route and execute it flawlessly. Whether you choose chaotic maximalism or stark minimalism, the key is deliberate execution, not just visual noise.1718Following this, implement functional Flutter code that is:1920* Production-ready and fully operational.21* Visually striking and deeply memorable.22* Stylistically unified with a strong point of view.23* Crafted with strong attention to detail.2425## Frontend Aesthetics Guidelines2627Prioritize the following areas in your Flutter code:2829* **Visual Direction**: Commit fully to a distinct aesthetic through Flutter's Material widgets and theme classes. ALWAYS put the material widgets under a `Scaffold` widget. Prefer dominant, confident color choices with sharp accent colors over safe, washed-out, evenly distributed palettes.30* **Type System**: Do not rely on Flutter's default font. Use the `google_fonts` package (already included in the `pubspec.yaml`) to define custom text themes with personality and strong visual intent. Pair an expressive display typeface with a clean, highly legible body font to elevate the interface.31* **Layout Architecture**: Favor surprising compositions over predictable vertical-and-horizontal stacking. Layer elements, offset and rotate blocks, anchor content off-grid, and let shapes overlap to build asymmetry, diagonal flow, and moments that break the implied grid. Commit to either generous negative space or tightly controlled density.32* **Atmosphere & Texture**: Build rich visual environments instead of flat solid fills. Layer complex gradients, dramatic shadows, and depth cues. Use masked overlays, frosted or blurred surfaces, and hand-drawn or procedural detail—noise, geometric patterns, mesh gradients, layered opacity, and non-rectangular clipping—to make surfaces feel tactile and immersive.33* **Animations**: Animate state changes and micro-interactions deliberately. Prefer cohesive, high-impact motion: staggered reveals, shared-element transitions between screens, and a distinctive scroll feel. Give hover, tap, and press states clear, memorable feedback so interaction reinforces the visual identity.3435NEVER fall back on standard AI-generated visual clichés, such as default font families (like Roboto or basic system fonts), predictable color combinations (like the overused purple/blue gradient on a white background), standard Material Design boilerplate layouts, or cookie-cutter widgets that lack context-specific personality.3637Take creative liberties to make unexpected, highly customized choices that fit the specific context perfectly. No two generated designs should look identical. Shift between aggressive dark modes and airy light modes, experiment with radically different typography, and explore entirely new aesthetics. NEVER default to the same "safe" design choices (like universally relying on Space Grotesk) across different generations.3839**IMPORTANT**: Align the complexity of your Flutter code with the intended aesthetic. Maximalist UIs require intricate widget trees, custom painters, and heavy animation logic. Minimalist UIs demand immense restraint, exact padding/margin precision, and flawless typography. True elegance stems from uncompromising execution.4041Remember: As an AI, you are capable of producing extraordinary, cutting-edge Flutter UI design. Do not hold back. Demonstrate what is possible when you reject standard templates and commit fully to a unique, uncompromising visual vision.
serverpod