human-optimized-frontend

Activation Criteria

Activate this skill only when the user explicitly instructs the agent to redesign a frontend and references this skill by name.

Do not activate for:

• Conceptual discussion or critique only
• Coding or implementation tasks
• Inspiration, references, or visual examples
• Partial or component-level design requests

Execution Steps

1. Context Intake

• Consume all provided information about the interface.
• If context is missing, assume a neutral functional product with general-purpose usage.
• Do not assume branding, audience psychology, or business goals unless explicitly stated.

2. Direction Lock (Aesthetic + UX)

• Select exactly one aesthetic direction.
• Select exactly one UX interaction philosophy (e.g. clarity-first, flow-driven, exploration-led).
• All visual, motion, and interaction decisions must reinforce both.
• Do not mix stylistic or interaction paradigms.

3. Initial Design Generation

Typography

• Body text baseline: 15–18px equivalent
• Heading scale:
  • H1 = body × 2.2–2.6
  • H2 = body × 1.6–1.9
  • H3 = body × 1.3–1.5
• Line height:
  • Body: 1.45–1.6
  • Headings: 1.15–1.3
• Font rule:
  • Serif + sans-serif pairing OR single family with ≥ 4 weights
• Letter spacing:
  • Headings: -1% to -3%
  • Body: 0% to +1%
• Prohibited fonts: system defaults, Inter, Roboto, Arial.

Color & Theme

• Palette:
  • 1 dominant
  • 1 secondary
  • 1 accent
  • 1 neutral base
• Contrast:
  • Text ≥ 4.5:1
  • Interactive elements ≥ 3:1
• Accent usage ≤ 10% of visible area
• Only one saturated color allowed
• Gradients allowed only as background fields

Layout & Composition

• Single spacing base unit (8px or 10px)
• Visual weight distribution:
  • Primary: 40–55%
  • Secondary: 25–35%
  • Tertiary: ≤ 20%
• Maximum two alignment axes per view
• Symmetry allowed only with counterbalancing contrast

Background & Depth

• Background type:
  • Textured neutral OR
  • Low-contrast geometry OR
  • Layered planes
• Max depth layers: 3
• Foreground contrast must exceed background by ≥ 20%

Motion Graphics (Mandatory)

• Required motion categories:
  • Entry motion
  • Hierarchy reinforcement
  • Interaction feedback
• Timing: 180–420ms
• Easing:
  • Primary: ease-out
  • Secondary: subtle cubic or linear
• Max simultaneous moving elements per viewport: 3
• Motion must encode hierarchy, state, or spatial relation
• Prohibited: decorative loops, idle animations, novelty motion

UX Structure (Mandatory)

• Define a primary user goal per view.
• All visual and motion emphasis must support this goal.
• Interaction rules:
  • One primary action per screen
  • Secondary actions visually subordinate
• Navigation clarity:
  • Entry point must be obvious within 1 second
  • Next available action must be discoverable without exploration
• Cognitive load:
  • No more than 3 competing focal points per view
• Feedback:
  • All user actions must produce immediate visual or motion feedback
• Error tolerance:
  • Interfaces must be forgiving; destructive actions must be visually distinguished

4. Quantitative Evaluation Loop

Score each dimension from 0–10:

Typography

• ≥ 8: hierarchy instantly readable
• ≤ 6: scale or spacing feels inconsistent

Color

• ≥ 8: dominance and emphasis are unambiguous
• ≤ 6: accents compete or contrast is weak

Layout

• ≥ 8: eye flow resolves within 1–2 seconds
• ≤ 6: multiple regions compete equally

Background

• ≥ 7: depth supports hierarchy
• ≤ 5: background distracts or feels empty

Motion

• ≥ 8: motion improves comprehension and flow
• ≤ 6: motion distracts or delays intent

UX

• ≥ 8: user intent is obvious, actions feel effortless
• ≤ 6: hesitation, ambiguity, or friction introduced

Cross-Dimensional Harmony

• ≥ 8: visuals, motion, and UX reinforce the same hierarchy and intent
• ≤ 6: any dimension contradicts another

Weighted Total Score

• Typography: 20%
• Color: 20%
• Layout: 20%
• Motion: 15%
• UX: 15%
• Background: 10%
• Harmony: mandatory ≥ 8

5. Iteration Rules

• Adjust lowest-scoring dimension first.
• UX adjustments take priority if UX score < 8.
• Never adjust more than two dimensions per iteration.
• Maximum iterations: 5.
• If harmony score drops, revert the last change.

6. Final Output

Produce a single declarative frontend specification including:

• Typography system
• Color palette with roles
• Layout structure and visual weights
• Background and depth treatment
• Motion graphics definitions
• UX flow and interaction rules

No alternatives. No explanations. No theory.

Ambiguity Handling

• Missing context defaults to neutral functional usage.
• Defaults must still satisfy aesthetic, motion, and UX thresholds.
• Never infer branding, emotional tone, or audience psychology.

Constraints & Non-Goals

• Do not generate code, assets, or mockups.
• Do not critique existing designs unless redesign context requires it.
• Do not reference trends, competitors, or popular products.
• Do not provide multiple options.
• Do not justify decisions.

Failure Behavior

If activation conditions are not met, output a minimal statement indicating the skill cannot be activated.

If after maximum iterations UX or harmony thresholds are not met, output a minimal statement indicating that a satisfactory frontend cannot be generated under the given constraints and terminate.