Generates a frontend interface that is visually pleasing and experientially sound by jointly optimizing aesthetics, motion graphics, and user experience (UX) using quantified evaluation. Use only when the user explicitly invokes this skill by name to redesign a frontend. Trigger keywords: use human-optimized-frontend, redesign frontend, redesign interface.
SkillScore70Maintained
Automatic
◆Design & UX Review pack
Last verified 8/19/2026
What it changes
Passed 16 of 23 test cases with the skill, and 4 of 23 without it.
Without skill17%
With skill70%
Checks it passed that the model alone missed
The output excludes design rationale.
The output contains no CSS code blocks.
The output contains no design rationale.
and 23 more in the full report
15 fixed1 passed either way4 still failing3 broke
Pass-rate lift
+52 pp
Tokens
-31%
Agent turns
0%
Response time
-52%
Model gemini-3.6-flashMeasured 8/19/2026v116 of 23 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 15 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 15
Prompt
Please redesign the user dashboard for our task management platform using the sundial-org/human-optimized-frontend skill. I need a complete frontend design blueprint that defines typography scales, palette assignments with roles, layout weights and alignment grids, background depth strategy, animation rules, and UX interaction mechanics for the full screen.
What was checked, without and with the skill
Checked
Without skill
With skill
The response contains no CSS code blocks.
Passed
Passed
The typography specification excludes Inter font.
Missed
Passed
The H1 heading scale multiplier is set between 2.2 and 2.6.
Missed
Passed
case-01 · gemini-3.6-flash · 8/19/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md174 linessingle file
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.