What is the wireframe-spec skill?
The wireframe-spec skill is a SKILL.md in the prototyping-testing plugin of Owl-Listener's designer-skills repository. It makes an AI coding agent specify wireframe layout with content priority, component placement and annotations, using gray boxes and real labels. Use it to define structure before visual design.
The wireframe-spec skill is one of the prototyping-testing skills in Owl-Listener's designer-skills repository. It asks the agent to write annotated wireframe specifications covering content priority, component placement, behaviour and responsive considerations.
The description positions it before visual design. For grid mechanics it points to layout-grid in the ui-design plugin, so this skill stays on structure and notes.
What a wireframe spec contains
- Content blocks: headers, navigation, hero areas, text, media and card sections, forms, footers and secondary navigation.
- Annotations: priority numbers, click and hover notes, dynamic content markers, responsive and accessibility notes.
- Content specs: heading hierarchy, approximate text length, image aspect ratios, required versus optional content and the source of each item.
Fidelity levels and conventions
The skill defines four fidelity levels: sketch, low-fi gray boxes, mid-fi realistic layout and annotated mid-fi. It sets gray, black and white only, an X-box for images and wavy lines for text.
Who the wireframe-spec skill is for
Best for
- Agreeing a page's structure with a client or developer before anyone chooses colour or type.
- Getting an agent to document empty, loading, populated and error states beside the happy path.
- Feeding a later build step. Related: landing-page-design and frontend-design.
Not for
- Visual decisions. The skill forbids colour choices on purpose, so it will not pick a palette or brand look.
- Grid mechanics such as columns and gutters, which the file sends to layout-grid. Related: layout.
- Interactive prototypes. It produces specifications, not clickable flows.
Use it with UiChemy
A wireframe spec is the brief for the page that follows. After design and build, UiChemy turns the result into editable WordPress: Figma to WordPress converts a Figma file, and Composer adjusts it visually. Click Get Started on uichemy.com.
How to install Wireframe Spec Skill: Annotated Layouts for AI Agents
/plugin marketplace add Owl-Listener/designer-skills
/plugin install prototyping-testing@designer-skillsAdd the marketplace
Run
/plugin marketplace add Owl-Listener/designer-skillsinside Claude Code. The README says this step only tells the agent where the skills live and installs nothing yet.Install the prototyping-testing plugin
Run
/plugin install prototyping-testing@designer-skills. The wireframe-spec skill ships inside this plugin. You can also type/plugin, open the Discover tab, tick the plugin and press enter.Using Gemini CLI instead
The README says each plugin is also a Gemini CLI extension. Clone the repository, create
.gemini/extensionsin your project root and copy the cloned.gemini/extensionscontents into it.Ask for the skill by task
Try a prompt such as: use wireframe-spec to document the signup page. Name the page so the agent can list blocks, states and breakpoints.
Check that it loaded
Ask the agent to spec a pricing page wireframe. It should return numbered content priorities, gray block conventions, notes for each state and a responsive note, with no colour choices.
Key features
- Content blocksLists headers and navigation, hero or feature areas, text, media and card sections, forms and input areas, and footers.
- Priority numbersAnnotations number what loads or appears first, so the agent records which content matters most on the page.
- Interaction notesBehaviour such as what happens on click or hover is written next to the block it belongs to.
- Dynamic content markersPersonalized or data-driven areas are flagged, so developers know which parts are not static.
- Content specificationsHeading hierarchy, approximate character counts, image aspect ratios, required versus optional content and the content source such as static, CMS or API.
- Four fidelity levelsSketch with hand-drawn boxes, low-fi gray boxes with labels, mid-fi with placeholder content and annotated mid-fi with behaviour specs.
- Gray-only conventionsGray, black and white only with an X-box for images, wavy lines for text and real labels for navigation and buttons.
- Multiple statesThe agent shows empty, loading, populated and error states instead of one ideal screen.
- Responsive versionsBreakpoint versions and responsive behaviour notes are part of the spec, with accessibility notes and early content strategy input.
Frequently asked questions
What is the wireframe-spec skill?
It is a SKILL.md in the prototyping-testing plugin of Owl-Listener's designer-skills repository. It guides an AI coding agent to specify wireframe layouts with content priority, component placement, behaviour annotations and responsive notes before visual design.
How do I install the wireframe-spec skill?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install prototyping-testing@designer-skills. The skill ships inside that plugin, which also covers test plans and heuristic evaluation. The Discover tab of /plugin offers the same choice.
Does wireframe-spec choose colours?
No. One of its conventions is gray, black and white only, with no colour decisions, and its best practices say to focus on content hierarchy instead of visual design. Colour belongs to a later stage with a different skill.
What fidelity levels does the skill describe?
Four: sketch with hand-drawn boxes and labels, low-fi with gray boxes and content labels, mid-fi with realistic layout and placeholder content, and annotated, which is mid-fi plus detailed behaviour specs. Pick one to match how far along the project is.
What is the difference between wireframe-spec and layout-grid?
Wireframe-spec defines structure: what content goes where, with priority and notes. Layout-grid, from the ui-design plugin, handles grid mechanics, and the skill's description points to it for that. Related: layout.
Which AI coding agents can use the skill?
The README says the collection is for Claude Code and Gemini CLI, with each plugin also packaged as a Gemini CLI extension. No other agents are mentioned, so anything else is outside what the author documents.
What license does the skill use?
GitHub lists the repository as MIT licensed. The wireframe-spec folder sits inside the prototyping-testing plugin of that repository. Verify the license in the repository before redistributing the folder in a product.