wireframe-greybox

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

Quality

95%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

100%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

An exemplary single-file skill body: every token carries a skill-specific decision (exact greys, fonts, panel order, artifact contract), the workflow is a clean 5-step sequence with a thumbnail-size self-check as a validation feedback loop, and the content is appropriately scoped to one self-contained document with no external references. Nothing material is missing or padded.

Dimension	Reasoning	Score
Conciseness	The ~56-line body is lean: it spends no tokens explaining what a wireframe is or how HTML works — every line adds skill-specific decisions (palette hexes, font pairings, panel order, output contract). 'The whole point is structure, not skin' is a one-line design stance, not padding. Matches anchor 5.	5 / 5
Actionability	Fully executable guidance: exact palette values ('#f7f7f8', '#e3e3e6', '#c9c9cf', '#1c1b1a'), named fonts (Inter / system-ui, IBM Plex Mono / JetBrains Mono), an ordered per-panel layout checklist, a concrete responsive rule ('max-width container plus a media query collapses columns under ~1000px'), and a literal artifact tag template to emit. Anchor 5 — copy-paste-ready specifics covering the common case.	5 / 5
Workflow Clarity	A clear 1–5 sequence (palette → layout → write → self-check) closing with an explicit validation step: 'It should read as a blueprint at thumbnail size... If any greybox is missing, the page looks colored, or it disappears as a blank thumbnail, fix it.' That is a concrete check-then-fix feedback loop, matching anchor 5.	5 / 5
Progressive Disclosure	The skill is a single self-contained file with no references/, scripts/, or assets/ bundle, and nothing in the body points to external files; all content (Workflow, Output contract) belongs at this level. Per the simple-skill scoring note, well-organized sections with no need for external references score 5.	5 / 5
	Total	20 / 20 Passed

Description

91%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: it states the concrete visual contract of the output and includes an explicit 'Use when' clause with comprehensive, natural trigger terms in both English and Chinese. The main gap is that the capability is expressed as a noun phrase rather than an explicit action verb, leaving the 'what does this do' action slightly implicit.

Dimension	Reasoning	Score
Specificity	Enumerates concrete output characteristics — 'neutral grey blocks on a pale page', 'rectangle with a diagonal X', "solid 'lorem bars' of varying widths", 'sharp 1.5–2px borders', 'monospace redline accent' — but the action itself is implicit: the opening is a noun phrase ('A crisp greybox / blueprint lo-fi wireframe') with no explicit verb such as 'Create' or 'Produce'. This sits at anchor 4 (several specifics, minor gaps) rather than 5 (comprehensive concrete actions), and well above 3.	4 / 5
Completeness	Explicitly answers both: 'what' — a greybox/blueprint lo-fi wireframe with the enumerated visual rules — and 'when' via the concrete clause 'Use when the brief asks for...'. This matches the anchor-5 pattern of the good example (statement of capability followed by explicit 'Use when' with concrete trigger phrases).	5 / 5
Trigger Term Quality	The 'Use when' clause lists 'greybox', 'grey box wireframe', 'blueprint wireframe', 'lo-fi dashboard', 'low fidelity', 'wireframe', '线框图', and '灰盒原型' — comprehensive natural coverage including synonym variations and both English and Chinese phrasings a user would naturally say. Matches anchor 5, not 4 (which requires noticeable missing natural terms).	5 / 5
Distinctiveness Conflict Risk	A clear niche (lo-fi greybox/blueprint wireframing) that is distinct from hi-fi design or dataviz skills, but the bare generic trigger 'wireframe' and 'low fidelity' could overlap with a general wireframing or mockup skill. Minor overlap risk with closely related skills — anchor 4 rather than 5.	4 / 5
	Total	18 / 20 Passed

Validation

93%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: nexu-io/open-design
Path: design-templates/wireframe-greybox/SKILL.md
Commit: 1b47e60

Reviewed: 3 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.