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.