Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.).
SkillScore61Maintained
Automatic
◆Design & UX Review pack
Last verified 9/1/2026
What it changes
Passed 13 of 22 test cases with the skill, and 9 of 22 without it.
Without skill39%
With skill61%
Checks it passed that the model alone missed
fixes non-compliant CSS colors upon verification failure
selects Canvas 2D for rendering medium-tier visual effects
maps the background color hex #0F172A to surface.background
and 3 more in the full report
5 fixed9 passed either way9 still failing0 broke
Pass-rate lift
+22 pp
Tokens
+44%
Agent turns
0%
Response time
-19%
Model gemini-3.6-flashMeasured 9/1/2026v214 of 23 cases passed with skill · 22 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 5
Prompt
The automated verification script verify.mjs returned a FAIL result for the generated landing page screenshot due to color drift exceeding Delta E thresholds. What is the required next step?
What was checked, without and with the skill
Checked
Without skill
With skill
fixes non-compliant CSS colors upon verification failure
Missed
Passed
re-runs verify.mjs instead of asking the user to judge fidelity visually
Passed
Passed
case-16 · gemini-3.6-flash · 9/1/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md98 lines7 filesincludes scripts
Design DNA
A 3-phase workflow for extracting, structuring, and applying design identity across three dimensions:
When the user asks for the structural dimensions or schema:
Read references/schema.md
Present the full schema with field descriptions
Explain the three dimensions and their roles:
design_system: What you can measure — exact hex values, pixel sizes, rem scales
design_style: What you can feel — mood, personality, composition strategy
visual_effects: What you can see but can't express in CSS alone — WebGL scenes, particle systems, shader distortions, scroll-driven animations
Ask if the user wants to customize or extend any dimensions
Phase 2: Analyze — Extract DNA from References
When the user provides images, screenshots, or links representing a target design style:
Read references/schema.md for the full field list
For each reference provided:
If image/screenshot: first run the deterministic color measurement (see below), then analyze the remaining visual properties directly
If URL: fetch and analyze the page's visual design
For every field in the schema, extract or infer a value from the references
When multiple references conflict, note the dominant pattern and mention variants
Output a complete Design DNA JSON — every field populated, no empty strings
After output, ask: "Want to adjust any values before using this for generation?"
Analysis approach per dimension:
Dimension 1: design_system
color: Do not estimate hex values by eye — perceived colors drift toward familiar palette defaults (often by a ΔE of 10+). When the reference is an image file, measure instead. Resolve SKILL_ROOT to the absolute directory containing this SKILL.md; never assume the current project directory contains the skill's scripts/ folder. Use absolute paths for the reference and output, and keep one uniquely named measurement file per reference: