Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.
SkillScore77Maintained
Automatic
◆Design & UX Review pack
Last verified 8/16/2026
What it changes
Passed 17 of 22 test cases with the skill, and 9 of 22 without it.
Without skill41%
With skill77%
Checks it passed that the model alone missed
Excludes Inter from the typography plan.
Does not use Inter or Roboto fonts in the typography plan.
Uses real remote image URLs instead of placeholder images.
and 9 more in the full report
8 fixed9 passed either way5 still failing0 broke
Pass-rate lift
+36 pp
Tokens
+91%
Agent turns
0%
Response time
+5%
Model gemini-3.6-flashMeasured 8/16/2026v317 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
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
Create a visual design specification and landing page prototype for an AI platform. The product manager suggests using a dark purple-to-indigo gradient with Inter typography for a modern tech feel.
What was checked, without and with the skill
Checked
Without skill
With skill
Outputs the DESIGN SPECIFICATION block before writing component markup.
Passed
Passed
Avoids purple, violet, indigo, and fuchsia in the color palette.
Missed
Passed
Excludes Inter from the typography plan.
Missed
Passed
case-04 · gemini-3.6-flash · 8/16/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md333 linessingle file
Sibling skills (local only)
Sibling CloudBase skills ship beside this skill. Use local relative paths such as ../auth-tool-cloudbase/SKILL.md.
If a referenced sibling skill file is missing from this environment, ask the user to install the full CloudBase plugin (or the missing skill). Do not HTTP-fetch remote skill or protocol markdown into the agent context.
Activation Contract
Use this first when
The request is to decide visual direction, produce a design specification, create a prototype, or make layout, typography, color, and visual hierarchy choices for an interface.
The implementation should follow a deliberate aesthetic rather than directly coding an already-approved design.
Read before writing code if
The response must choose typography, color, spacing, layout strategy, or other visual rules before code exists.
The user asks for "design", "prototype", "look and feel", or "style" rather than straight implementation.
Then also read
Web implementation -> ../web-development/SKILL.md
Mini program implementation -> ../miniprogram-development/SKILL.md
Do NOT use for
Backend-only tasks, database design, or pure API work without interface output.
Straight implementation of an already-approved UI without new design decisions.
Generic frontend coding requests where the visual direction is already settled.
Common mistakes / gotchas
Writing JSX, WXML, or CSS before outputting the design specification.
Falling back to generic AI layouts instead of an explicit aesthetic direction.
Jumping into implementation when the design intent is still unclear.
Ignoring platform constraints after the visual concept is defined.
Minimal checklist
Read UI Design Activation Checklist before interface generation.
V8-based lightweight edge functions on EdgeOne Makers. Covers routing, KV storage access, request/response handling, and environment variables at the edge.