wireframe-greybox

nexu-io/open-design · plugins/_official/examples/wireframe-greybox/SKILL.md

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 "灰盒原型".

Design & CreativeNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

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

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 (#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.
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. A max-width container 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.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/wireframe-greybox · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/wireframe-greybox" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/wireframe-greybox" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/wireframe-greybox

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so wireframe-greybox is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

wireframe-greybox

nexu-io/open-design · plugins/_official/examples/wireframe-greybox/SKILL.md

Design & CreativeNo license★ 91788⑂ 10564commit 9881cff

What this skill does

Wireframe Greybox Skill

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 (#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.
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. A max-width container 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.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/wireframe-greybox · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/wireframe-greybox" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/wireframe-greybox" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/wireframe-greybox

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so wireframe-greybox is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

wireframe-greybox

What this skill does

Wireframe Greybox Skill

Workflow

Output contract

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

wireframe-greybox

What this skill does

Wireframe Greybox Skill

Workflow

Output contract

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits