skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

wireframe-greybox

Generate lo-fi greybox wireframe dashboards using structural blocks and monospace redline annotations.

93.2k|10.8k|Updated Apr 28, 2026
Search Tags:#prototyping#blueprint#wireframe#Dashboard#low-fidelity#Design#greybox
One-click install
npx skills add https://github.com/nexu-io/open-design --skill wireframe-greybox
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframe-greybox
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/wireframe-greybox
Command: npx skills add https://github.com/nexu-io/open-design --skill wireframe-greybox

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill addresses the need for rapid, low-fidelity structural visualization during the early design phase, preventing premature focus on visual styling or branding.

Core Features & Use Cases

  • Structural Blueprinting: Creates neutral greybox layouts including app bars, sidebars, KPI rows, and chart panels.
  • Visual Placeholders: Automatically generates image placeholders with diagonal crosses and lorem-bar text to maintain focus on hierarchy.
  • Use Case: Use this when a project brief requires a quick lo-fi dashboard prototype to validate layout and information architecture before committing to high-fidelity design.

Quick Start

Generate a greybox wireframe for a desktop SaaS dashboard with a sidebar, KPI row, and chart panel.

Frequently Asked Questions about wireframe-greybox

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a greybox wireframe for a dashboard?▼

Invoke the wireframe-greybox skill with a prompt specifying your dashboard requirements, such as sidebar navigation, KPI rows, and chart panels. The skill outputs a self-contained HTML artifact with structural grey blocks and redline annotations.

What fidelity level does this wireframe skill provide?▼

This skill provides low-fidelity (lo-fi) wireframes. It focuses exclusively on structure and hierarchy using neutral grey blocks, lorem-bar text, and schematic placeholders, intentionally excluding brand colors, real imagery, or final copy.

Can I use this wireframe for mobile design?▼

The generated wireframes are optimized for desktop SaaS dashboards but include responsive CSS media queries that collapse columns for smaller screens under 1000px width.

Why are there redline annotations in the output?▼

Redline annotations are included to provide technical context and layout specifications, such as grid definitions or max-width constraints, using a distinct monospace font and accent color to differentiate them from the structural greybox elements.

Related Skills

Explore More Design & Creative Skills→
xmx0632xmx0632
1

product-design

okay, I'll respond with:

Community
Advanced
code-vibe-academycode-vibe-academy
2

designer-ui

Generate Atoms, Molecules, and high-fidelity mockups from wireframes using Atomic Design.

Official
Advanced
JangidVishJangidVish

uiux-wireframe-ia

Convert UX Strategy documents into text-based wireframes and validated information architecture.

Community
Intermediate
RefoundAIRefoundAI
1.2k

vibe-coding

Guide non-technical teams to build runnable prototypes with AI coding tools.

Official
Intermediate