| name | design-taste-frontend |
| description | Senior UI/UX engineering system that enforces metric-based design rules, strict component architecture, CSS hardware acceleration, and balanced design engineering. Use when building premium frontend interfaces, dashboards, or SaaS UIs. Combats generic AI design patterns. |
| metadata | {"author":"Leonxlnx"} |
Design Taste Frontend — High-Agency UI/UX Engineering System
A comprehensive frontend architecture guide establishing baseline configurations and engineering directives for premium interface design.
Core Configuration Dials
Three primary dials (adjustable per request):
| Dial | Default | Range | Effect |
|---|
| Design Variance | 8 | 1–10 | How distinctive vs. conventional the design is |
| Motion Intensity | 6 | 1–10 | Amount and complexity of animations |
| Visual Density | 4 | 1–10 | Information density (4 = comfortable) |
Users can override via explicit requests ("make it more minimal", "less animation").
Architectural Requirements
- Framework: React/Next.js with Server Components as default
- Styling: Tailwind CSS for 90% of styling coverage
- Viewport:
min-h-[100dvh] not h-screen (prevents iOS Safari layout issues)
- Dependencies: Always verify in
package.json before importing
Design Engineering Directives
Typography
- Avoid Inter for premium contexts — choose distinctive alternatives
- Never generic system font stacks for display text
- Establish typographic hierarchy before layout
Color
- Maximum one accent color below 80% saturation
- No pure black (
#000000) — use off-black (#0a0a0a, #111111)
- No purple/blue AI aesthetic gradients (most identifiable AI design fingerprint)
Layout
- Reject centered Hero sections when Design Variance > 4
- Use asymmetric grids, not three equal columns for feature rows
- Bento grid layouts for dashboard-style content
Motion
- Spring physics:
stiffness: 100, damping: 20 (Framer Motion)
- Staggered animations with
staggerChildren
- Perpetual micro-interactions on dashboard cards (not on every click)
Bias Correction — Anti-AI-Default Patterns
Combat common AI design defaults:
- Liquid Glass refraction effects for depth
- Magnetic micro-physics for interactive elements
- Motion that responds to cursor proximity without React state
Performance Standards
- Animate exclusively via
transform and opacity (GPU-accelerated)
- Grain/noise filters only on fixed, non-interactive
::before/::after pseudo-elements
- Z-index strictly constrained (document z-index layers at component level)
Strictly Forbidden
- Emojis anywhere in code, markup, or text content (replace with icon library)
- Pure neon glows or oversaturated accent colors
- Text-fill gradients
- Inter font for premium/display contexts
- Three-column equal card layouts as feature rows
- Generic placeholder names ("John Doe", "Acme Corp")
- AI startup terminology ("Nexus", "Streamline", "Elevate")
- Broken Unsplash image links
The Bento 2.0 Dashboard Paradigm
Modern SaaS dashboards use five card archetypes:
- Intelligent Lists — sortable, filterable, with status indicators
- Command Inputs — search/filter bars with keyboard shortcuts
- Live Status — real-time indicators with subtle pulse animations
- Wide Data Streams — sparklines, mini-charts, trend indicators
- Contextual UI Focus — detail panels that expand in-place
Each card type has perpetual micro-interactions using spring physics. Cards breathe — they're never static.
Pre-Flight Checklist
Before delivering any UI:
