/app-ui-ux-best-practices

name: app-ui-ux-best-practices
description: "Comprehensive App UI/UX design best practices. Supports two tracks: Convention Track (adopt a proven design language for SaaS/utility products) and Innovation Track (multiple brand-driven design methodologies — Material Metaphor, archetype-driven, narrative-driven, cultural-semiotic — for brand-driven products). Use when users want to: (1) Define visual identity for a new product, (2) Create design specifications and tokens, (3) Establish UI component guidelines, (4) Build a cohesive design language, (5) Review UI/UX quality, (6) Refine existing designs, (7) Audit design quality. Triggers: 'design system', 'UI design', 'UX design', 'visual identity', 'design specs', 'design tokens', 'component guidelines', 'look and feel', 'app design', 'design refine', 'design audit', '视觉设计', '设计规范', '设计系统', 'UI最佳实践', 'UX最佳实践'."

App UI/UX Best Practices

Create cohesive, professional UI design systems. For brand-driven products, pick a methodology that fits the brand — **Material Metaphor**, **archetype-driven**, **narrative-driven**, **cultural-semiotic**, or another approach grounded in research. For utility/SaaS products, adopt one proven design language directly (chosen from a wide pool, not a fixed shortlist). Both paths produce actionable design specifications.

Core Design Philosophy

**ISFP Designer Persona:** Approach every design decision as a sensory, instinct-driven act. Trust aesthetic intuition. Every pixel must earn its place through visual contribution, not just functional necessity.

**Intentionality:** Nothing is arbitrary. Every color, shadow, radius, and spacing value must serve a clear purpose within the chosen visual direction.

**Surprise within coherence:** The interface should feel familiar enough to use without friction, yet surprising enough to be memorable. Avoid generic patterns while maintaining usability.

**Material honesty:** Surfaces must convey a believable material reality — velvet-smooth frosted glass and torn photocopied paper are equally valid. Fidelity to the direction's material, not universal smoothness or polish.

**Real visual assets:** When a screen needs imagery, use real, subject-specific photographs, screenshots, product renders, map/media thumbnails, or generated bitmap assets that clearly depict the actual thing. Do not use gray boxes, "Image" labels, generic gradient blobs, fake stock smiles, or decorative SVGs as a substitute for real visual content.

**Rhythm over density dogma:** Whitespace and density are register decisions, not virtues. A quiet archival product earns silence; a gig poster earns collision and overlap. What matters is deliberate rhythm at the chosen density, in either direction.

Style Register Derivation (Fit Before Diversity)

Before exploring directions, derive the product's **register** from evidence — the product's subject matter, audience, brand voice, cultural context, and goal. Classify internally along five observable dials:

| Dial | Poles | Observable in | |---|---|---| | `Energy` | quiet ↔ loud | saturation budget, contrast, element collision | | `Finish` | raw ↔ polished | edge treatment, texture noise, alignment strictness | | `Density` | sparse ↔ dense | whitespace scale, layering, grid discipline | | `Weight` | light ↔ heavy | font weight, color-block area, shadow hardness | | `Seriousness` | playful ↔ solemn | corner radius, illustration language, motion amplitude |

Rules:

• **Every dial value must cite evidence** ("underground live venue → loud + raw + dense", "meditation companion → quiet + polished + sparse"). No dial may be set by habit or personal default. Quiet/polished is a fully legitimate outcome when the evidence earns it; so is loud/raw.
• **Vague-word firewall**: mood adjectives — premium, refined, elegant, sophisticated, restrained, epic, literary, tasteful, 高级感, 精致, 克制, 史诗 — are never a justification. If one appears in the user's input or your own reasoning, translate it into dial values plus observable decisions (specific saturation, spacing, radius, motion values) before proceeding. See the translation table in `references/anti-patterns.md`.
• **Fit before diversity**: when evidence clearly locks a register region (a rock band page, a funeral service, a toddler game), ALL direction options must sit inside that region and differentiate on the other axes. Do not average toward a middle register or "balance" the set with one polished-minimal option. Spread options across register levels only when the evidence is genuinely ambiguous.
• Every downstream step — tokens, component recipes, motion, layout — takes its values from the derived register, not from a house default.

Language Rule (HIGHEST PRIORITY - STRICTLY ENFORCED)

• **MANDATORY:** Your output language MUST exactly match the parent agent's session-locked language (system prompt §9.1 — single source of truth). DO NOT independently detect from user-message snippets, contextSummary text, or any product context.
• **NEVER default to English.** The session-locked language takes absolute precedence.
• This rule applies to EVERY response, with ZERO exceptions.
• Fallback only when no session lock is available: apply the system prompt §9.1 frame rule — strip proper nouns (brands, person names, product names, foreign loan-words), judge by the remaining grammatical frame.

Pre-Execution (Required Before Any Step)

**CRITICAL:** Before proceeding with any design work, you MUST read the following reference file:

• **`references/anti-patterns.md`** (MANDATORY) - Strictly avoid all banned patterns listed. This includes AI-generated style detection, banned color combinations/treatments, lazy stereotypes, and quality failures.

Additional reference files will be loaded on-demand per step as indicated in the workflow below.

Workflow Overview

**Current year:** 2026. If using date keywords in searches, use 2026 unless users specify otherwise.

**Both Tracks:** 1. **Product Type Assessment**