A crisp greybox / blueprint lo-fi wireframe — neutral grey blocks on a pale page, image placeholders drawn as a rectangle with a diagonal X, text shown as solid "lorem bars" of varying widths, sharp 1.5–2px borders, and a single monospace redline accent for annotations. Reads like a structural blueprint before any visual design is applied.
NewMaintained
Automatic
◆Design & UX Review pack
Last verified 8/28/2026
What it changes
Passed 4 of 22 test cases with the skill, and 18 of 22 without it.
Without skill83%
With skill17%
Checks it passed that the model alone missed
The dashboard elements use data-od-id attributes for section layout.
The response wraps the output in an artifact element with type="text/html".
1 fixed7 passed either way5 still failing9 broke
Pass-rate lift
-67 pp
Tokens
+27%
Agent turns
0%
Response time
+34%
Model gemini-3.6-flashMeasured 8/28/2026v18 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
A test case the skill fixed. Same model, same prompt, with and without the skill.
Prompt
I need a high-level layout prototype for our new SaaS analytics dashboard. Please build a structural greybox mock in HTML where layout and hierarchy are represented using neutral blocks, placeholder lines, and schematic UI sections like navigation, metrics, a chart container, and a data list. Wrap the entire single-file HTML code inside a single artifact block with a single introductory sentence before it.
What was checked, without and with the skill
Checked
Without skill
With skill
The response wraps the output in an artifact element with type="text/html".
Missed
Passed
The document contains no external script dependencies such as CDN links.
Passed
Passed
The dashboard elements use data-od-id attributes for section layout.
Missed
Passed
case-01 · 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.md56 linessingle file
Wireframe Greybox Skill
Produce a single crisp greybox wireframe page. The whole point is
structure, not skin — communicate hierarchy and layout with neutral
grey blocks, never with real color, copy, or imagery. Everything is a
placeholder: text is grey "lorem bars", images are rectangles with a
diagonal cross, numbers are big solid blocks. The only color on the page
is the single redline accent reserved for monospace annotations.
Workflow
Stay structural. Ignore any DESIGN.md that pushes finished UI —
this is deliberately low fidelity. Use a clean system sans (Inter /
system-ui) for shape and a mono (IBM Plex Mono / JetBrains Mono) for
the redline annotations only. No hand-drawn fonts, no brand color.
Set the greybox palette. Page is a pale neutral (#f7f7f8),
blocks are medium grey (#e3e3e6), borders are crisp and defined
(#c9c9cf for soft edges, #1c1b1a for emphasis), and exactly one
accent (a blue or coral redline) carries every monospace annotation.
Keep contrast high enough to read as a small thumbnail — never
near-white-on-white.
Lay out the dashboard, in order, each on its own data-od-id:
App bar — a logo greybox, a row of nav lorem-bars, and an
avatar circle on the right.
Sidebar nav — icon squares + lorem-bar labels; mark one item
active with a filled/inverted block.
KPI row — four greyboxes, each a small label bar above a big
solid "number" bar.
Chart panel — an inline SVG greybox: axes plus a few
hatched/grey bars or a schematic line. No real data.
List / table panel — a header row plus ~5 rows of lorem bars,
with one column of image-placeholders drawn as a box with a
diagonal X.
Annotations — one or two small monospace redlines pinned to the
canvas (e.g. 01 · 12-col grid, max-width 1280).
Write one self-contained HTML document — <!doctype html>
through </html>, CSS inline, no external JS or images. SVG and CSS
draw every placeholder. A max-width container plus a media query
collapses columns under ~1000px.
Self-check. It should read as a blueprint at thumbnail size: grey
Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the writing handbook".