UI Design Direction
Mission
Establish a clear, product-specific visual language before you write layout code or define component styles.
"Why does this UI look like THIS product?"
Required Design Direction
For every substantial UI task, you must establish the following elements before proceeding to implementation:
- Visitor Mode: Persuade, Operate, Read, or Experience. This dictates density, hierarchy, and chrome (e.g., Persuade uses large media and expressive chrome; Operate requires high density, scanability, and minimal chrome).
- Product Identity: What is this product?
- Target User: Who is using it?
- Primary User Goal: What is the main action they are trying to achieve?
- Emotional Tone: Should it feel secure, playful, clinical, energetic, premium?
- Visual Metaphor: Does it resemble a control panel, a document, a physical object, a canvas?
- Typography Direction: What fonts convey the tone? What is the display vs. body strategy?
- Color Roles: Primary brand color, semantic colors (success, error), background and surface hues.
- Surface Strategy: Flat vs. layered, contrast ratios.
- Border Strategy: Hard outlines vs. soft dividers, thickness.
- Radius System: Sharp corners, slight rounding, or substantial curves. (ZERO PILLS: NEVER use
rounded-fullpill badges, chips, or containers). - Depth Model: Single Elevation Discipline. Flat, or subtle drop shadows (must have y-offset and blur; NEVER a zero-offset colored glow halo). Never stack a 1px border under a wide soft shadow (no ghost cards).
- Imagery Strategy: Photographs, vectors, abstract shapes, or none?
- Icon Strategy: Outlined, filled, duotone, weight matching typography?
- Motion Personality: Snappy, fluid, springy, or instant?
- Density Strategy: High density (data-heavy) vs. low density (consumer-friendly).
INTERACTIVE HERO MANDATE
For website UI tasks, DO NOT default to:
- centered headline
- subtitle
- two buttons
- static image
- generic gradient background
- empty whitespace
- generic SaaS hero template
The default hero must be an intentional visual experience.
REQUIRED:
- A product-specific visual concept.
- Meaningful imagery, product render, illustration, video, diagram, environmental scene, or other rich media.
- Purposeful motion or interaction.
- Strong visual depth/layering where appropriate.
- Responsive behavior that preserves the concept on mobile.
PREFERRED:
- animated image layers
- parallax depth
- cursor/reactive visuals
- scroll-linked transformation
- video or frame sequencing
- interactive product visualization
- layered typography/media choreography
- animated diagrams
- Rive/Lottie interactive visual objects where they add meaning
The hero should communicate the product before the user reads every word.
Do not add animation merely to satisfy this rule. Motion must reinforce hierarchy, product meaning, spatial depth, interaction, or storytelling.
Hero Decision Engine
textWebsite Brief ↓ What is the product? ↓ What should the hero visually communicate? ↓ Choose primary visual medium │ ├── Product → interactive product visualization ├── Physical object → cinematic imagery / 3D / layered media ├── Developer tool → live interface / diagram / telemetry ├── Brand → editorial imagery / art direction ├── Data product → animated data visualization ├── Storytelling site → scroll-linked cinematic composition └── Other → custom visual concept ↓ Choose motion behavior ↓ Choose responsive fallback ↓ Implement ↓ Visual Critic ↓ Preflight Hero anti-slop gate
Documentation
Document your decisions using the docs/design-direction-template.md format.
Do not skip this step. A generic, unconsidered aesthetic is what leads to AI slop.
