Define or refine a project design system for web and mobile interfaces. Use after visual direction is known and before broad component implementation to establish tokens, type, spacing, layout, states, accessibility, and responsive component rules.
SkillScore76Maintained
Automatic
◆Design & UX Review pack
Last verified 9/26/2026
What it changes
Passed 17 of 23 test cases with the skill, and 13 of 23 without it.
Without skill56%
With skill76%
Checks it passed that the model alone missed
Requires verification against a dense screen.
Identifies missing permission component states.
Identifies missing destructive component states.
and 9 more in the full report
9 fixed10 passed either way2 still failing4 broke
Pass-rate lift
+20 pp
Tokens
+37%
Agent turns
0%
Response time
+59%
Model gemini-3.6-flashMeasured 9/26/2026v2 · latest is v319 of 25 cases passed with skill · 23 comparable
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
A newer attempt on gemini-3.6-flash on 10/4/2026 did not produce a publishable comparison (not comparable). The snapshot above is the previously measured run.
See it in action
One of 8 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 8
Prompt
Our team is refactoring global UI specs across feature teams. Where should the primary design system document reside, and what file needs to be updated with semantic token specs?
What was checked, without and with the skill
Checked
Without skill
With skill
Specifies docs/product/design/DESIGN.md as the exact target file path.
Missed
Passed
case-22 · gemini-3.6-flash · 9/26/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md13 linessingle file
UI UX Pro Max Design System
Use this adaptation for design-system decisions, not as a second competing art director.
Update docs/架构与设计/DESIGN.md and the owning UI specification with semantic color, typography, spacing, radius, elevation, motion, grid, breakpoints, density, component states, accessibility, reduced motion, and data-display rules.
Reuse an existing system before creating tokens.
Trace each rule to a recurring product need.
Separate semantic roles from raw values.
Cover hover, focus, active, disabled, loading, error, empty, permission, and destructive states.
Verify against at least one dense screen and one narrow viewport.
Do not run upstream installers, create symlinks, or overwrite provider configuration.