Wireframe Greybox Skill
SkillMediaLets your agent draw lo-fi greybox wireframes with grey blocks, image placeholders, and lorem-bar text.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Wireframe Greybox Skill skill
About this capability
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 bluep
What this skill tells your AI
The instructions your AI receives, as published by nexu-io/open-design in design-templates/wireframe-greybox/SKILL.md and read by ahel’s review.
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 (#c9c9cffor soft edges,#1c1b1afor 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. Amax-widthcontainer plus a media query collapses columns under ~1000px. - Self-check. It should read as a blueprint at thumbnail size: grey blocks, X-crossed image boxes, lorem bars, and exactly one accent color on the monospace redlines. If any greybox is missing, the page looks colored, or it disappears as a blank thumbnail, fix it.
Output contract
Emit between <artifact> tags:
<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
Signals
- GitHub stars
- 95k
- Forks
- 11k
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
wireframe-greybox- Source
- github.com/nexu-io/open-design