Wireframe Greybox
FreeCreate structured greybox wireframes for design mockups.
Free · Opens the source repo
What Wireframe Greybox does
The Wireframe Greybox skill is designed for creating low-fidelity wireframes that emphasize structure over aesthetics. This skill produces a clean, neutral greybox layout, using grey blocks to represent various UI elements without the distraction of color, real text, or images. It is particularly useful when you need to convey the layout and hierarchy of a design concept in a clear and straightforward manner, making it ideal for initial design discussions or feedback sessions.
This skill focuses on the essentials of wireframing, utilizing a pale background and medium grey blocks to represent different components of a user interface. Text is represented as solid grey bars, while images are depicted as rectangles with diagonal crosses, ensuring that the design remains purely functional. The only color present in the wireframe is a single redline accent used for annotations, which helps to maintain clarity and focus on the structure of the layout.
The workflow for using this skill is straightforward and emphasizes a systematic approach to layout design. Users are guided to create a self-contained HTML document that includes inline CSS for styling, ensuring that the wireframe is portable and easy to share. The skill also provides specific instructions for laying out various components such as app bars, sidebars, KPI rows, and chart panels, making it a comprehensive tool for designers looking to create effective wireframes quickly.
Overall, the Wireframe Greybox skill is an excellent choice for designers and developers who need to produce clear, structural representations of their ideas without the noise of detailed design elements. It is particularly beneficial in early stages of the design process, where the focus is on layout and functionality rather than visual fidelity.
When to use it
Use this skill when you need to create low-fidelity wireframes for design reviews or brainstorming sessions.
When not to use it
This skill is not suitable for high-fidelity designs or when detailed visual elements are required.
What you can build with it
Initial Design Review
Use the Wireframe Greybox skill to create a structural layout for a design review meeting, focusing on hierarchy and functionality.
Client Feedback Sessions
Generate low-fidelity wireframes to present to clients, allowing for quick feedback on layout without the distraction of detailed visuals.
Team Brainstorming
Facilitate brainstorming sessions by using greybox wireframes to visualize ideas and concepts in a clear and structured manner.
How to install Wireframe Greybox
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/wireframe-greybox --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioWireframe 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
- 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.
- Set the greybox palette. Page is a pale neutral (
#f7f7f8), blocks are medium grey (#e3e3e6), borders are crisp and defined (#c9c9cffor soft edges,#1c1b1afor 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. - 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).
- Write one self-contained HTML document —
<!doctype html>through</html>, CSS inline, no external JS or images. SVG and CSS draw every placeholder. Amax-widthcontainer plus a media query collapses columns under ~1000px. - 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.
Frequently asked questions about Wireframe Greybox
Similar skills
Penpot UI/UX Design
Create professional UI/UX designs in Penpot with ease.
UX Theming
Streamline your VS Code theming process with best practices.
Wireframe
Create low-fidelity UI wireframes in SVG format.
Waitlist Page
Create a clean, focused pre-launch landing page.
Hallmark
Design skill for creating unique, structured UIs.
UI Styling
Create beautiful, accessible user interfaces effortlessly.