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.
