wireframe-spec

Specify annotated wireframe layouts with content priority and component placement.

2.0k|325|Updated Mar 7, 2026
One-click install
npx skills add https://github.com/Owl-Listener/designer-skills --skill wireframe-spec
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wireframe-spec
Source: https://github.com/Owl-Listener/designer-skills/tree/main/prototyping-testing/skills/wireframe-spec
Command: npx skills add https://github.com/Owl-Listener/designer-skills --skill wireframe-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers need a clear, repeatable method to specify how content is prioritized and placed in wireframes, preserving intent across devices.

Core Features & Use Cases

  • Define content priority, component placement, and behavior annotations for layouts.
  • Specify fidelity levels (sketch to annotated) and consistency rules for wireframes.
  • Use cases include early design explorations, design reviews, and handoff documentation.

Quick Start

Describe the annotated wireframe spec for a given layout request.

Frequently Asked Questions about wireframe-spec

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an annotated wireframe specification for early UX design exploration?

To create an annotated wireframe specification, define content priority, component placement, and behavior annotations for your layout. This method ensures design intent is preserved and clearly communicated during early UX explorations and design reviews.

What is the best way to document content hierarchy and responsive behavior for desktop and mobile wireframes?

Documenting content hierarchy and responsive behavior involves specifying content priority and component placement across desktop and mobile breakpoints. Applying consistent annotation rules ensures layout fidelity and responsive behavior notes are clearly captured for handoff documentation.

Can I use this wireframe specification method for both low-fidelity sketches and detailed annotated layouts?

Yes, you can use this wireframe specification method for both low-fidelity sketches and detailed annotated layouts. It allows you to specify fidelity levels and apply consistency rules, ensuring clarity whether you are doing early design explorations or final handoff documentation.

How do I specify component placement and behavior annotations for a UX design review?

To specify component placement and behavior annotations for a UX design review, define how content is prioritized within the layout. Enforcing content hierarchy alongside responsive behavior notes provides a clear, repeatable method to communicate layout intent across devices.

Why do I need to define content priority when creating wireframe layouts for cross-device design?

Defining content priority when creating wireframe layouts is needed to preserve design intent across devices. It provides a clear, repeatable method to specify how content is prioritized and placed, ensuring consistent user experiences across desktop and mobile breakpoints.