Synthesize product context into a coherent UI direction with page archetypes, visual language, token guidance, anti-pattern filters, and stack-aware translation. Use when choosing a design style, defining a design brief, aligning UI choices to industry expectations, or reviewing whether a UI direction fits the product before implementation.
WHEN: Choosing UI direction, selecting a visual language, defining design tokens, filtering anti-patterns, or turning a vague product brief into a design-system-ready implementation plan.
| Need | Use |
|---|---|
| Product is vague | Fill the design brief template first |
| Screen structure is unclear | Choose a page archetype before styling |
| Domain risk is high | Define anti-patterns and trust cues first |
| UI feels trendy but wrong | Re-check posture, density, and trust fit |
| Multi-stack delivery | Preserve intent, then translate per stack |
Need UI direction, not just polished screens?
|
+-- Product is vague or early-stage?
| -> Create a design brief first
|
+-- Marketing / landing page?
| -> Pick a page archetype before colors or typography
|
+-- Dashboard / admin / analytics?
| -> Start from information density, hierarchy, and task frequency
|
+-- Regulated / trust-sensitive domain?
| -> Define anti-patterns and confidence cues before visual style
|
+-- Multi-platform delivery?
| -> Lock design intent, then translate to each stack separately
|
- Existing UI feels off but not obviously broken?
-> Run the critique rubric and identify mismatch: tone, hierarchy, density, motion, or trust
Use one primary posture and one secondary posture.
| Posture | Best Fit | Prioritize | Avoid |
|---|---|---|---|
| Trust-led | Finance, healthcare, legal, identity, admin | clarity, stability, confidence, auditability | novelty-heavy styling, ambiguous CTA hierarchy |
| Workflow-led | B2B tools, devtools, operations, internal platforms | density, task flow, keyboard support, status clarity | oversized hero sections, decorative motion |
| Exploration-led | analytics, discovery, content browsing, marketplaces | progressive disclosure, filtering, comparison | rigid single-path flows |
| Emotion-led | wellness, lifestyle, luxury, hospitality, creative brands | mood, pacing, imagery, warmth, storytelling | cold enterprise grids and harsh contrast |
| Utility-led | mobile utilities, quick forms, booking, support | speed, defaults, reachability, obvious next actions | ornamental complexity |
Pick the dominant archetype per screen.
| Archetype | Use For | Structure | Success Signal |
|---|---|---|---|
| Proof-led Landing | services, agencies, B2B trust pages | hero -> proof -> offering -> CTA | reduced hesitation |
| Workflow Demo | SaaS, productivity, AI tools | hero -> use case -> product detail -> CTA | user understands the loop |
| Editorial Story | brand, mission, launch, nonprofit | narrative sections with pacing changes | emotional clarity |
| Operations Surface | admin, monitoring, analytics | filters -> summary -> detail -> action | faster task completion |
| Guided Utility | booking, onboarding, quote, checkout | progress -> step -> validation -> resolution | fewer drop-offs |
| Comparison Grid | pricing, marketplaces, feature evaluation | filters -> cards/table -> proof -> next action | easier side-by-side choice |
Every design-direction output SHOULD include:
Define tokens in ranges and behaviors, not only raw values.
| Token Group | Decide | Questions |
|---|---|---|
| Color | contrast model, accent intensity, semantic clarity | Is the accent persuasive, calming, or instructional? |
| Typography | voice, density, scan speed | Does the product need warmth, authority, or precision? |
| Spacing | breathing room vs throughput | Does the interface reward focus or speed? |
| Radius | severity of edges | Should the UI feel institutional, neutral, or friendly? |
| Shadow | depth strategy | Should elevation signal hierarchy, tactility, or almost none? |
| Motion | interaction tone | Should motion confirm actions, guide attention, or stay nearly invisible? |
Common domain filters to apply before implementation:
| Context | Avoid |
|---|---|
| Finance / security | neon accents, vague trust signals, playful error states, overly futuristic marketing polish |
| Healthcare / public service | low contrast, hidden instructions, tiny targets, novelty-first interactions |
| Devtools / admin | marketing-first layouts, oversized cards, sparse density, delayed feedback |
| AI products | generic cosmic gradients, unclear confidence states, fake human tone, unexplained automation |
| Wellness / premium lifestyle | noisy tables, harsh transitions, heavy data chrome, robotic microcopy |
| Marketplaces / pricing | inconsistent comparison structure, CTA overload, mismatched card heights |
Use presets as starting constraints, not as templates to copy verbatim.
| If the product is... | Start with... |
|---|---|
| fintech, legal, security, identity | trust-led + proof-led or guided utility |
| SaaS, devtools, internal operations | workflow-led + workflow demo or operations surface |
| analytics, BI, marketplaces | exploration-led + operations surface or comparison grid |
| wellness, hospitality, premium consumer | emotion-led + editorial story or proof-led landing |
| booking, checkout, support, quick actions | utility-led + guided utility |
Then adjust color intensity, density, motion, and proof strategy for the real audience.
Keep the design intent stable while adapting implementation style.
| Stack | Translate Into |
|---|---|
| HTML + Tailwind | utility-first tokens, semantic structure, component class recipes |
| React + component library | prop-driven variants, tokenized theme, state-rich components |
| Vue / Nuxt | composable layout shells, scoped tokens, interaction states in templates |
| SwiftUI | view modifiers, semantic spacing, motion via lightweight transitions |
| Flutter | theme data, component tokens, state surfaces, density-aware widgets |
| Plain CSS | variables, layout primitives, reusable component classes |
Use this when reviewing a proposed direction:
Run this before implementation handoff or final critique:
| Issue | Response |
|---|---|
| Brief is too vague | Fill the design brief template, then choose only one primary posture and one archetype |
| Two styles feel equally plausible | Keep the safer one as default and document the alternate as a contrast option |
| Team wants a trend-heavy direction | Translate the trend into constraints and anti-patterns before implementation |
| Stakeholders want "modern" but disagree on meaning | Convert the request into adjectives, density, motion, and contrast decisions |
| Platform support differs | Preserve the system intent, then simplify interaction affordances per platform |