wireframe-spec
owl-listener/designer-skills
Specify wireframe layouts with content priority, component placement, and interaction annotations.
What is wireframe-spec?
Create annotated wireframe specifications that define content hierarchy, component placement, and responsive behavior before visual design. Use this when structuring page layouts and documenting interaction patterns for development handoff.
- Specify content blocks (headers, heroes, sections, forms, footers) with placement and priority
- Annotate interaction behavior, dynamic content indicators, and accessibility notes
- Define content specifications including heading hierarchy, text length, image aspect ratios, and sources
- Document responsive breakpoint versions and multiple states (empty, loading, populated, error)
- Apply wireframe conventions using grayscale, consistent component representation, and real labels
How to install wireframe-spec
npx skills add https://github.com/owl-listener/designer-skills --skill wireframe-specHow to use wireframe-spec
- 1.Identify content blocks and their priority order on the page
- 2.Sketch or create low-fidelity layout using grayscale boxes and labels
- 3.Add annotations for interactions, dynamic content, and responsive behavior
- 4.Specify content details (heading levels, text length, image ratios, sources)
- 5.Document multiple states and breakpoint variations
- 6.Review with stakeholders and development team before design phase
Use cases
- Create low-fidelity wireframes for stakeholder review before design phase
- Document content hierarchy and interaction flows for developer handoff
- Specify responsive behavior across mobile, tablet, and desktop breakpoints
- Annotate dynamic content areas and personalization zones in data-driven layouts
- Define form layouts with validation states and error messaging
- UX designers planning information architecture
- Product managers defining feature specifications
- Developers needing layout and interaction documentation
- Design systems teams standardizing component placement
wireframe-spec FAQ
Use wireframe-spec for overall page structure, content priority, and interaction annotations. Use layout-grid when you need to define grid mechanics and spacing systems for UI design.
Start with sketch or low-fi to focus on content hierarchy and structure. Move to mid-fi or annotated only when layout decisions are validated.
No. Keep wireframes grayscale and focus on content, layout, and behavior. Visual design (color, typography, imagery) comes in the design phase.
Create separate wireframe versions for each breakpoint (mobile, tablet, desktop) showing how content reflows and components adapt.
Include interaction notes (click/hover behavior), dynamic content sources (API, CMS, static), loading states, error states, and accessibility requirements.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: wireframe-spec
description: Specify wireframe layout — content priority, component placement, and annotation. Use when defining structure before visual design. For grid mechanics, use layout-grid (ui-design).
Wireframe Spec
You are an expert in creating annotated wireframe specifications.
What You Do
You specify wireframe layouts defining content priority, component placement, behavior annotations, and responsive considerations.
Wireframe Components
Content Blocks
- Headers and navigation
- Hero/feature areas
- Content sections (text, media, cards)
- Forms and input areas
- Footers and secondary navigation
Annotations
- Content priority numbers (what loads/appears first)
- Interaction notes (what happens on click/hover)
- Dynamic content indicators (personalized, data-driven)
- Responsive behavior notes
- Accessibility notes
Content Specifications
- Heading hierarchy (H1, H2, H3)
- Approximate text length/character counts
- Image aspect ratios and sizing
- Required vs optional content
- Content source (static, CMS, API)
Fidelity Levels
- Sketch: Hand-drawn boxes and labels
- Low-fi: Gray boxes with content labels
- Mid-fi: Realistic layout with placeholder content
- Annotated: Mid-fi plus detailed behavior specs
Wireframe Conventions
- Use gray/black/white only (no color decisions)
- X-box for images
- Wavy lines for text blocks
- Real labels for navigation and buttons
- Consistent component representation
Best Practices
- Focus on content hierarchy, not visual design
- Annotate behavior, not just layout
- Show multiple states (empty, loading, populated, error)
- Include responsive breakpoint versions
- Get content strategy input early
Related skills
More from owl-listener/designer-skills and the wider catalog.
a-b-test-design
Design statistically rigorous A/B experiments with clear hypotheses, metrics, and sample sizing.
accessibility-audit
Audit interfaces against WCAG 2.2 with severity ratings and remediation steps.
accessibility-test-plan
Plan comprehensive accessibility testing with assistive technologies, WCAG criteria, and real user participation.
aesthetic-usability
Apply the Aesthetic-Usability Effect to build trust through visual consistency and polish.
migrate-oxfmt
Migrate your JavaScript/TypeScript project from Prettier or Biome to Oxfmt with automated config conversion.
migrate-oxlint
Automated migration guide from ESLint to Oxlint, a high-performance Rust-based linter.