Skip to content
Get packs

Wireframe Greybox

Produces a grey, blueprint-style lo-fi wireframe page for laying out structure before visual design.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When asked for a greybox, blueprint, or low-fidelity wireframe, the agent builds a single self-contained HTML page that shows layout and hierarchy using neutral grey blocks, crossed-out boxes for images, grey bars for text, and one colored monospace annotation accent. It deliberately ignores real colors, copy, and imagery so the team can focus on structure before styling. The result is a preview file you can open in a browser.

Great for

  • Designers sketching the structure of a dashboard or app screen before committing to a visual style
  • Product teams who want quick low-fidelity mockups to discuss layout in reviews
  • Developers who need a rough page skeleton to build from

Skip it if

  • Final, polished UI design, since the skill intentionally strips out color, type, and imagery (wrong tool for production visuals)
  • Projects that need real content or data previews, because all text and numbers are placeholders

Try asking

  • “Greybox a lo-fi blueprint wireframe for a desktop SaaS dashboard with app bar, sidebar, KPI row and table”
  • “Make a low fidelity wireframe for a mobile checkout flow”
  • “Create a blueprint wireframe of a landing page with hero, feature grid and footer”
Step-by-step guide: how to use Wireframe GreyboxInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    wireframe-greybox.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip wireframe-greybox.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip wireframe-greybox.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the screen type and key sections (e.g. app bar, sidebar, KPI row) so the layout matches your intent
  • Open the generated HTML at thumbnail size to confirm it reads as a blueprint before sharing
  • Ask for a second pass with more detailed annotations if you need to explain spacing or grid decisions

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.