Guide · Agent skill
How to use the Wireframe Greybox agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The wireframe-greybox skill is a set of instructions that tells an AI agent how to draw a low-fidelity wireframe when you ask for a greybox, blueprint, or lo-fi layout. It is useful for designers, product teams and developers who want to settle the structure of a screen before any colors, fonts or imagery are chosen. After this guide you will know what the skill does, how to install it, how to phrase a request so it triggers, and what to check in the output.
Wireframe Greyboxnexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the wireframe-greybox ZIP from this page.
- 2Unzip into a skills folder. Extract it into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. Go to Settings → Capabilities → Skills and upload the ZIP.
- 4Ask for a greybox. Use a trigger word such as greybox, low fidelity or wireframe, and describe the screen.
- 5Open the preview. Open the generated HTML file in a browser to review the layout.
What the skill makes the agent do
When the skill is active, the agent builds one self-contained HTML page that shows layout and hierarchy using neutral grey blocks. Image areas are drawn as rectangles with a diagonal X, text is shown as solid grey bars of varying widths, and large numbers are big solid blocks.
The skill deliberately ignores real colors, copy and imagery. The only color on the page is a single redline accent used for small monospace annotations. The result is a preview file you can open in a browser.
- App bar with a logo placeholder, nav bars and an avatar circle
- Sidebar navigation with one active item marked
- A row of four KPI greyboxes
- An inline SVG chart panel with axes and grey bars or a line, using no real data
- A list or table with image placeholders in one column
- One or two monospace annotations pinned to the canvas
How to install the wireframe-greybox skill
The skill ships as a ZIP file that you download from this page. Unzip it into one of these locations:
Use ~/.claude/skills/ to make the skill available across your projects, or use a project's .claude/skills/ folder to limit it to that project.
Alternatively, in the Claude apps you can upload the ZIP under Settings → Capabilities → Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
How to trigger the skill with natural requests
You do not need a special command. The skill activates when your request uses one of its trigger words. The source lists "greybox", "grey box wireframe", "blueprint wireframe", "lo-fi dashboard", "low fidelity", "wireframe", "线框图" and "灰盒" as triggers.
Describe the screen and say what kind of wireframe you want. Naming the screen parts helps the agent place them in the right order.
- Greybox a low fidelity wireframe for a desktop SaaS dashboard with an app bar, sidebar and KPI row.
- Make a blueprint wireframe of a settings page with a form and a save button.
- Give me a lo-fi dashboard layout with a chart panel and a table of orders.
What the skill needs and how it runs
The source lists no special requirements. It does not run scripts and does not use the network. The skill is a set of instructions plus an example file, and the agent writes the HTML page itself.
The package contains two files: SKILL.md, which holds the instructions, and example.html, an example of the output.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Files: SKILL.md and example.html
Safety notes on scripts and network access
Because the skill runs no scripts and makes no network calls, its own behavior is limited to writing one HTML document. The output is a single file with CSS inline and no external JavaScript or images.
Still, review any skill before you install it, and open the generated file in your browser the same way you would any file an agent produces.
- No scripts are run by this skill
- No network access is used by this skill
- Output is one self-contained HTML file
Tips for better wireframes
Keep the request structural. Ask about layout, order and hierarchy rather than colors or brand style, since the skill strips those out on purpose.
Use the output as a discussion piece. Its placeholders make it clear that the text and numbers are not real.
- Name the screen type (dashboard, settings, checkout) and the main regions
- Ask for specific annotations, such as a grid note, to appear as redlines
- Do not expect real copy or data; every text and number is a placeholder
- Move to a visual design tool once the structure is agreed
What people use it for
- Sketching the structure of a dashboard or app screen before choosing a visual style
- Producing quick low-fidelity mockups to discuss layout in a product review
- Creating a rough page skeleton that a developer can build from
Frequently asked questions
How do I install the wireframe-greybox skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.
What does the wireframe-greybox skill need to run?
The source lists no requirements. It runs no scripts and uses no network access, so it works as a set of instructions that the agent follows.
Is the wireframe-greybox skill free to use?
The item is listed under the Apache-2.0 licence. Check the licence file in the source repository for the terms that apply to your use.
Why does the wireframe have no colors or real text?
The skill intentionally strips out real colors, copy and imagery so the team can focus on structure before styling. All text and numbers are placeholders.
Can I use this skill for a final, polished UI?
No. The skill is meant for low-fidelity structure, so it is the wrong tool for production visuals. Use a visual design tool once the layout is agreed.
What should I do if the skill does not trigger?
Include one of the listed trigger words, such as greybox, low fidelity or wireframe, in your request. Describing the screen type and its main regions also helps the agent pick up the right layout.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want a quick, structure-only wireframe that you can open in a browser and discuss in a review. Pick a full design tool instead if you need polished visuals, real content or realistic data previews.
Download the skill