Modern Frontend Design (2027 Stack)
Create distinctive, high-performance frontend interfaces that completely avoid the generic, overused "AI-generated SaaS" aesthetic. Code must be semantic, cutting-edge, and ready for dynamic UI generation.
Design Thinking & Architecture
Before generating code, establish the architectural and aesthetic direction:
| Principle |
Focus |
| Adaptability |
Is this component fluid enough to be injected into any Generative UI context without breaking? |
| Tech Paradigm |
Maximize modern CSS primitives (Container Queries, Nesting, Native Popover) over heavy JS libraries. |
| Signature |
What unique layout, interaction, or micro-topography prevents this from looking like a standard Tailwind template? |
Tech-Driven Aesthetics Guidelines
Typography & Fluidity
- Use fluid typography via CSS
clamp() tied to container dimensions, not just the viewport.
- Avoid system font fallbacks as a design choice; pair a highly characterful display font with a hyper-legible body font.
- Strict hierarchy using advanced font-metrics (like font-size-adjust) to prevent layout shifts.
Advanced Color Systems
- Mandatory
oklch(): Define all palettes using oklch() for predictable, mathematically precise luminance and vibrant saturation across light/dark modes.
- Avoid flat hex/rgb gradients. Use multi-stop interpolation and non-linear color transitions.
Motion & Interactions (Native First)
- View Transitions API: Use native view transitions for seamless state changes and page-level morphing.
- Scroll-driven Animations: Implement native CSS
@scroll-timeline or scroll() functions for scroll-triggered effects instead of heavy JS engines.
- Micro-interactions must feel tactile: dynamic spring physics for hovers and active states.
Layout & Componentization
- Container Queries First: Component styles must rely strictly on
@container rules so they render perfectly regardless of where the AI or the user places them on the screen.
- Move beyond basic Bento Grids. Use asymmetric layouts, intentional overlaps, CSS Grid subgrids, and variable density.
Performance & Clean Code
- Zero layout shifts (CLS-free design).
- Native HTML features first (e.g.,
<dialog>, <details>, popover attribute).
- Explicit component boundaries optimized for React 19 / Next.js 16 streaming and Server Actions if applicable.
Anti-Patterns (NEVER Do)
❌ Standard, uncustomized Tailwind/shadcn aesthetic (Inter font, generic gray borders, predictable radiuses).
❌ Relying on Media Queries (@media) for component-level responsiveness.
❌ Legacy color models like Hex, RGB, or HSL for dynamic themes.
❌ Heavy JS animation libraries for effects that are now native (e.g., basic parallax or scroll reveals).
❌ Cliched dark mode styles (pure black background with neon purple/cyan cards).
Implementation Rules
- Minimalist Execution: Total restraint, surgical precision in spacing, flawless typography, and focus on micro-details.
- Maximalist Execution: Complex layer composition, advanced WebGPU/Canvas backgrounds, custom cursor contexts, and rich textures without sacrificing performance.
1---2name: frontend-design3description: Create highly adaptive, production-grade frontend interfaces optimized for modern web standards and Generative UI pipelines. Use when building components, layouts, or design systems that require a distinct, non-generic aesthetic.4---56# Modern Frontend Design (2027 Stack)78Create distinctive, high-performance frontend interfaces that completely avoid the generic, overused "AI-generated SaaS" aesthetic. Code must be semantic, cutting-edge, and ready for dynamic UI generation.910## Design Thinking & Architecture1112Before generating code, establish the architectural and aesthetic direction:1314| Principle | Focus |15|--------|-----------|16| **Adaptability** | Is this component fluid enough to be injected into any Generative UI context without breaking? |17| **Tech Paradigm** | Maximize modern CSS primitives (Container Queries, Nesting, Native Popover) over heavy JS libraries. |18| **Signature** | What unique layout, interaction, or micro-topography prevents this from looking like a standard Tailwind template? |1920## Tech-Driven Aesthetics Guidelines2122### Typography & Fluidity23- Use fluid typography via CSS `clamp()` tied to container dimensions, not just the viewport.24- Avoid system font fallbacks as a design choice; pair a highly characterful display font with a hyper-legible body font.25- Strict hierarchy using advanced font-metrics (like font-size-adjust) to prevent layout shifts.2627### Advanced Color Systems28- **Mandatory `oklch()`**: Define all palettes using `oklch()` for predictable, mathematically precise luminance and vibrant saturation across light/dark modes.29- Avoid flat hex/rgb gradients. Use multi-stop interpolation and non-linear color transitions.3031### Motion & Interactions (Native First)32- **View Transitions API**: Use native view transitions for seamless state changes and page-level morphing.33- **Scroll-driven Animations**: Implement native CSS `@scroll-timeline` or `scroll()` functions for scroll-triggered effects instead of heavy JS engines.34- Micro-interactions must feel tactile: dynamic spring physics for hovers and active states.3536### Layout & Componentization37- **Container Queries First**: Component styles must rely strictly on `@container` rules so they render perfectly regardless of where the AI or the user places them on the screen.38- Move beyond basic Bento Grids. Use asymmetric layouts, intentional overlaps, CSS Grid subgrids, and variable density.3940### Performance & Clean Code41- Zero layout shifts (CLS-free design).42- Native HTML features first (e.g., `<dialog>`, `<details>`, `popover` attribute).43- Explicit component boundaries optimized for React 19 / Next.js 16 streaming and Server Actions if applicable.4445## Anti-Patterns (NEVER Do)4647❌ Standard, uncustomized Tailwind/shadcn aesthetic (Inter font, generic gray borders, predictable radiuses).48❌ Relying on Media Queries (`@media`) for component-level responsiveness.49❌ Legacy color models like Hex, RGB, or HSL for dynamic themes.50❌ Heavy JS animation libraries for effects that are now native (e.g., basic parallax or scroll reveals).51❌ Cliched dark mode styles (pure black background with neon purple/cyan cards).5253## Implementation Rules54- **Minimalist Execution**: Total restraint, surgical precision in spacing, flawless typography, and focus on micro-details.55- **Maximalist Execution**: Complex layer composition, advanced WebGPU/Canvas backgrounds, custom cursor contexts, and rich textures without sacrificing performance.
LuizEduPP