SkillAgentSearch skills...

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.

GenerateConvertImprove

Install / Use

npx skills add nexu-io/open-design --skill wireframe-greybox

Installs into whichever agent you are using.

About this skill
📄

SKILL.md

Installable skill definition

Quality Score

90/100

Category

Marketing

Supported Platforms

Universal

Our assessment of wireframe-greybox

wireframe-greybox scores 90/100 on our quality scale, 23rd of 111 Marketing skills we index (top 21%).

Its SKILL.md is 3.7 KB long, split into 3 sections with 1 code example: a solid amount of guidance for an agent.

With 97,896 GitHub stars, it is one of the more widely adopted skills in the catalogue.

Substance
26/30
Structure
12/20
Description
15/15
Adoption
20/20
Freshness
15/15

Maintenance, license and trust

  • The repository was last updated today, so wireframe-greybox is actively maintained.
  • It is released under the Apache-2.0 license, a permissive license that allows use, modification and commercial use with attribution.
  • Its trust signals score 100/100, with no cautions. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.

wireframe-greybox compared with similar skills

All 4 of these similar skills score higher than wireframe-greybox; compare them before choosing.

SkillScoreStarsUpdatedFormat
wireframe-greybox (this skill)by nexu-io9097.9ktodaySKILL.md
LocalAIby mudler10049.3ktodayMCP Server
algorithmic-artby anthropics100177.9k2d agoSKILL.md
pptxby anthropics100177.9k2d agoSKILL.md
designby nextlevelbuilder100130.2k3d agoSKILL.md

Frequently asked questions

How do I install wireframe-greybox?
Run npx skills add nexu-io/open-design --skill wireframe-greybox. The install tabs above show the steps for each supported agent.
Which AI agents does wireframe-greybox work with?
It is written for Universal, as a SKILL.md file. Other agents that read the same format can often use it too.
Is wireframe-greybox safe to use?
It is Apache-2.0-licensed and scores 100/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
Is wireframe-greybox still maintained?
The repository was last updated today, so wireframe-greybox is actively maintained.

Skill content

View source on GitHub

name: wireframe-greybox description: | 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 "灰盒原型". triggers:

  • "greybox"
  • "grey box wireframe"
  • "blueprint wireframe"
  • "lo-fi dashboard"
  • "low fidelity"
  • "wireframe"
  • "线框图"
  • "灰盒" od: mode: prototype platform: desktop scenario: design fidelity: wireframe preview: type: html entry: index.html design_system: requires: false sections: [color, typography, layout, components] example_prompt: "Greybox a lo-fi blueprint wireframe for a desktop SaaS dashboard — app bar, sidebar nav, a 4-up KPI row, a schematic chart panel, and a list/table with image-placeholder thumbnails, all in neutral grey with monospace redline annotations."

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 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).
  4. 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.
  5. 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.

Related Skills

LocalAI

49.3k

LocalAI is the open-source AI engine. Run any model - LLMs, vision, voice, image, video - on any hardware. No GPU required.

algorithmic-art

177.9k

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.

pptx

177.9k

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an em…

design

130.2k

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG…

nexu-io

View profile

View on GitHub
GitHub Stars97.9k
CategoryMarketing
Updated15h ago
Forks11.4k
nexu-io/wireframe-greybox

Languages

TypeScript

Trust signals

100/100

From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.

No cautions