Wireframe Specby Owl-Listener

Wireframe Spec Skill.

Make a low-fidelity screen precise enough to discuss behavior and content.

Prototyping
Wireframes

Source Review · Wireframe SpecSKILL.md

Task Prototyping Produces • An annotated screen structure with content priorities. • Content requirements including headings, lengths, images, and sources. • Notes for responsive layouts and empty, loading, and error states. Before You Start No particular wireframing tool is required; a usable brief must include content and state information.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Specify Structure Before Visual Styling

An annotated-wireframe method combining layout blocks, content contracts, responsive behavior, and state coverage.

Source-based workflowNot an execution benchmark

The Working Approach

Wireframe Spec defines a screen's structural intent before color and visual polish. It covers content blocks, placement, priority, and behavior annotations, with room for responsive differences and data-driven content. Real navigation and button labels help make the structure understandable even at low fidelity.

The source goes beyond boxes by asking for heading hierarchy, text-length expectations, image proportions, required versus optional material, and content sources. It also calls for empty, loading, populated, and error states, so the wireframe is not limited to the ideal screen.

Expected Deliverables

An annotated screen structure with content priorities.
Content requirements including headings, lengths, images, and sources.
Notes for responsive layouts and empty, loading, and error states.

See the Example Brief

From Brief to Review

01
Choose Fidelity and Blocks
Select sketch, low, mid, or annotated fidelity and establish the major content regions.
02
Specify Content and Behavior
Give blocks real labels, priorities, data sources, and interaction annotations.
03
Cover Variants
Describe breakpoint changes and the empty, loading, populated, and error versions.

02 When to Use It

When to Use It

No particular wireframing tool is required; a usable brief must include content and state information.

A Good Fit

Before Visual DesignUseful when layout and content decisions need agreement without a color or styling debate.
Design Handoff PreparationMakes hidden assumptions about dynamic content and interaction visible early.

Limits to Check

Not a Final Visual SystemThe source deliberately avoids color decisions and uses neutral wireframe conventions.
Not Grid Mechanics AloneColumn and gutter mathematics belong to Layout Grid; this specification concentrates on content and behavior.

Bring These Inputs

Screen PurposeState the task and the content needed to complete it.
Content SourcesIdentify static copy, CMS fields, API data, and required or optional blocks.
State and Device NeedsList responsive contexts and empty, loading, or failure conditions.

03 Decisions That Matter

Decisions That Matter

Annotations Carry the Missing Behavior
A rectangle cannot explain whether content updates, opens a panel, or depends on an API.
Content Constraints Arrive Early
Length and aspect-ratio requirements can prevent later layout decisions from relying on impossible content.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the repository's documented installation route and retain any referenced companion files. This entry describes a focused design method rather than an executable application.

Upstream Source File

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/wireframe-spec/SKILL.md

No particular wireframing tool is required; a usable brief must include content and state information.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use wireframe-spec for a searchable template library page. Specify block priority, real navigation labels, search and filter behavior, heading hierarchy, card image proportions, and content sources. Include mobile, empty, loading, and failed-request states while keeping visual styling neutral.

Inspect the Result

Check the actual output against these observable criteria.

Every important interaction has an annotation.
Required content and data sources are identified.
The specification includes more than a populated desktop screen.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill File: prototyping-testing/skills/wireframe-spec/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 9a6930cf84a8

Editorial Source Summary

An annotated-wireframe method combining layout blocks, content contracts, responsive behavior, and state coverage.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does it produce a polished mockup?

Its focus is annotated structure. The source explicitly uses neutral wireframe conventions rather than final color decisions.

Why include text lengths?

They expose layout assumptions and help content planning before visual design becomes expensive to change.

Can a wireframe describe dynamic content?

Yes. The source includes dynamic-content indicators, source types, and multiple UI states.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills