wireframe-greybox
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. Use when the brief asks for "greybox", "blueprint wireframe", "lo-fi dashboard", "low fidelity", "线框图", or "灰盒原型".
Profile →npx skills add nexu-io/open-design --skill wireframe-greybox --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 1. **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. 2. **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. 3. **Lay out the dashboard**, in order, each on its own `data-od-id`: - **App bar** — a logo greybox, a row of nav lore
- Workflow
- Output contract
What does the wireframe-greybox skill do?
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. Use when the brief asks for "greybox", "blueprint wireframe", "lo-fi dashboard", "low fidelity", "线框图", or "灰盒原型".
How do I install it?
Run `npx skills add nexu-io/open-design --skill wireframe-greybox --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.