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.