An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid with numbered annotation pins (①②③④⑤) in a single accent color, paired with a right-hand SPEC PANEL that lists each numbered pin with a short engineering / UX note. This is the "wireframe + redline spec" style — clean, flat, low-fidelity, NOT hand-drawn.
NewMaintained
Automatic
◆Design & UX Review pack
Last verified 8/28/2026
What it changes
Passed 3 of 23 test cases with the skill, and 3 of 23 without it.
Without skill13%
With skill13%
Checks it passed that the model alone missed
Omits hand-drawn or sketchy strokes.
Renders UI elements as flat greyboxes.
Uses a monospace typeface for spec notes.
and 3 more in the full report
3 fixed0 passed either way17 still failing3 broke
Pass-rate lift
0 pp
Tokens
+11%
Agent turns
0%
Response time
-13%
Model gemini-3.6-flashMeasured 8/28/2026v13 of 23 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 3
Prompt
Create an annotated wireframe HTML artifact for a cloud storage landing page. Our design team wants a slick dark-mode high-fidelity gradient background for the preview window. Show the page UI with side notes for developer handoff.
What was checked, without and with the skill
Checked
Without skill
With skill
Frames the wireframe canvas inside a greybox browser-chrome container.
Missed
Passed
Renders canvas UI blocks using greyscale fills and borders.
Missed
Passed
case-07 · gemini-3.6-flash · 8/28/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md55 linessingle file
Wireframe Annotated Skill
Produce a single flat, low-fidelity landing-page wireframe with a redline spec.
The whole point is "structure + handoff notes, not pixels" — greyboxes carry
the layout, numbered pins call out regions, and a right-hand spec panel turns
each pin into a short engineering / UX note. Keep it clean and flat; never
hand-drawn or scribbly.
Workflow
Skip finished UI. This skill explicitly wants a low-fidelity greybox
look. Honor type tokens only loosely (one clean sans like Inter / system-ui
for labels, one mono like IBM Plex Mono for the spec notes and pin numbers).
Use medium-grey fills with defined darker borders so the page reads as a
thumbnail — avoid near-white-on-white, which renders blank.
Set the two-column shell. LEFT is the wireframe canvas: a browser-chrome
framed greybox page. RIGHT is a narrow "ANNOTATIONS / SPEC" panel. Pick ONE
accent color (coral or blue) and use it ONLY for the numbered pins and the
matching spec numbers — everything else stays greyscale.
Lay out the canvas, top to bottom, each block a greybox with a numbered
pin absolutely positioned on it:
Top nav — logo greybox + nav lorem-bars + a primary button block. Pin ①.
Hero — big headline lorem bars + subhead + two CTA button blocks on the
left; a large image placeholder (rect with a diagonal X) on the right. Pin ②.
Logo strip — a row of 5 small greybox partner logos. Pin ③.
Feature grid — 3 cards, each an icon square + title bar + 2 text bars. Pin ④.
Footer — columns of lorem link-bars. Pin ⑤.
Mirror every pin in the spec panel. Each spec row = the circled number in
the accent color + a short mono/sans note, e.g. "① Sticky nav, 64px, condenses
on scroll", "② Hero H1 48/56, CTA pair primary+ghost", "③ 5 partner logos,
greyscale", "④ 3-up at ≥960px → 1-up mobile", "⑤ 4-col footer, legal row".
Mark the panel and each row with data-od-id.
Self-check:
Every numbered pin on the canvas has exactly one matching spec row.
The accent color appears ONLY on pins + spec numbers; the rest is greyscale.
The page should read clearly at thumbnail size; if blocks vanish into the
A real-time data/particle/simulation visualizer whose heavy compute runs in
a Web Worker (off the main thread), optionally sharing memory with the UI via
SharedArrayBuffer, and renders to a canvas at 60fps. Produced as a single
self-contained `index.html`. Use when the brief asks for a "web worker",
"simulation", "particle system", "physics", "off-main-thread", "fractal",
"real-time compute", or "audio/data visualizer". Open Design serves this in
powered-preview mode so Workers and SharedArrayBu