Use when creating distinct website directions, a client review picker, asset catalog, previews, and Cloudflare-ready handoffs.
SkillScore80Maintained
Automatic
◆Design & UX Review pack
Last verified 9/29/2026
What it changes
Passed 18 of 22 test cases with the skill, and 12 of 22 without it.
Without skill56%
With skill80%
Checks it passed that the model alone missed
Includes 32px PNG favicon exports.
Outputs alpha-site-design-assets.zip.
Outputs alpha-site-cloudflare-drop.zip.
and 6 more in the full report
6 fixed14 passed either way5 still failing0 broke
Pass-rate lift
+24 pp
Tokens
+104%
Agent turns
0%
Response time
-24%
Model gemini-3.6-flashMeasured 9/29/2026v120 of 25 cases passed with skill · 22 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 6
Prompt
We want to initialize a new project workspace named `fintech-app` with slug `fintech-v1` using the unified command line interface. What specific command flags should be passed?
What was checked, without and with the skill
Checked
Without skill
With skill
Invokes scripts/web_design_picker.py with the init subcommand.
Missed
Passed
Passes the --slug flag when initializing the project.
Passed
Passed
case-16 · gemini-3.6-flash · 9/29/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md220 lines36 filesincludes scripts
Web design picker
Build a complete website-concept review package rather than isolated mockups. The default deliverable is three materially different, responsive website directions; a review shell that switches among them without losing the presentation context; a full-screen presentation mode; a searchable asset catalog with per-format, per-family, and download-all controls; two primary release archives; and supporting review, source, and full-handoff archives.
When invoked for an actual website project, perform the work. Do not stop at a strategy document unless the user asks only for strategy.
Default output contract
Create:
Three standalone direction source pages in src/concepts/, built into dist/concepts/.
One generated review picker at dist/index.html.
One generated asset catalog at dist/design-assets.html.
Direction-specific logos, favicons, palettes, design tokens, and supporting graphic elements.
Optimized client media when source video or animation is supplied.
Desktop and mobile preview images when browser automation is available.
A lean static deployment ZIP with index.html at its root.
A separate complete design-assets handoff ZIP.
A machine-readable and human-readable QA report.
Use scripts/web_design_picker.py as the unified command-line entry point for scaffolding, building, validating, browser-testing, and packaging. Read the workflow reference before beginning a full project.
Non-negotiable rules
Build three distinct design theses, not one template with three palettes.
Each direction must differ in information architecture, typography, spacing, geometry, media treatment, interaction, and emotional register.
Keep each concept independently usable as a static page with its own title, viewport metadata, favicon, accessible navigation, and responsive layout.
Use real supplied content and media as evidence. Do not invent capabilities, clients, metrics, certifications, software compatibility, or testimonials.
Treat trademarks and product names accurately. Never imply an affiliation that does not exist.
Do not use stock imagery merely to fill a composition. Prefer client assets, purposeful diagrams, custom vector elements, crops of real work, or restrained typography.
Avoid generic AI-site styling. Apply the anti-slop guardrails and run scripts/slop_lint.py before packaging.
Do not make a fake contact flow. A prototype form may download a structured brief or clearly state that submission is not connected. Production submission requires a real endpoint.
Do not bundle font files for handoff unless the user owns redistribution rights. Prefer system fonts, licensed web delivery, or outlined logo artwork.
Every direction and the review shell must include a favicon set.
Preserve reduced-motion preferences and keyboard operation.
Do not place a wrapper folder inside the Cloudflare Drop ZIP. The first archive entry must be index.html.
Keep the deployment ZIP lean. Do not place the complete handoff ZIP inside it. The asset page should assemble ZIP downloads client-side from individual static files.