mcpField
W
wireframe-spec

wireframe-spec

github.com/owl-listenerDesign & UI3.1k2.3k installsUpdated 8w ago
Repository

About wireframe-spec

A design skill for producing annotated wireframe specifications, including content priority, component placement, behavior, and responsive details. It supports multiple fidelity levels and documents page states and accessibility needs.

Key features

  1. 01Content priority and component placement
  2. 02Behavior and responsive annotations
  3. 03Heading, text, and image specifications
  4. 04Sketch to annotated fidelity levels
  5. 05Empty, loading, populated, and error states

Use cases

  1. 01Planning page structure before visual design
  2. 02Documenting interaction and responsive behavior
  3. 03Comparing wireframe fidelity levels
  4. 04Specifying page states and content requirements

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/owl-listener/designer-skills --skill wireframe-spec

After installing, type/wireframe-specin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported