Wireframe Spec

This helps you spec out wireframes with proper annotations instead of just drawing boxes. You define content priority, component placement, interaction notes, and responsive behavior across different fidelity levels from quick sketches to fully annotated mid-fi layouts. The approach focuses on content hierarchy and behavior specs rather than visual design, using standard wireframe conventions like X-boxes for images and wavy lines for text. The multi-state thinking is smart: it pushes you to show empty, loading, populated, and error states upfront rather than discovering edge cases later. Good for getting alignment on structure and behavior before anyone starts pixel pushing.

skills.sh installs: 2.5K
GitHub stars: 3.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add owl-listener/designer-skills --skill wireframe-spec --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub

Details

Repository: github.com/owl-listener/designer-skills
Categories: Frontend Development, Productivity & Planning
First seen: Jun 3, 2026

gzh-designisjiamu/gzh-design-skill微信公众号文章排版引擎，将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。主题风格从 references/theme-index.md 注册的自定义主题库中选取，自动章节编号、关键词下划线标记、引言卡片、目录导航、代码块、图片/GIF、作者签名。支持 Markdown / Word(.docx) / 2.4Kskills.sh installs

create-mcp-appmodelcontextprotocol/ext-appsThis skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View", "scaffold an MCP App", or needs2.3Kskills.sh installs

gsap-performancenexu-io/open-designOfficial GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or w2.3Kskills.sh installs

r3f-animationenzed/r3f-skillsReact Three Fiber animation - useFrame, useAnimations, spring physics, keyframes. Use when animating objects, playing GLTF animations, creating procedural motio2.2Kskills.sh installs

architecture-diagramcocoon-ai/architecture-diagram-generatorCreate polished dark-themed architecture diagrams as self-contained HTML+SVG files. Use when the user asks for system, infrastructure, cloud, security, or netwo2.2Kskills.sh installs

open-pencilopen-pencil/skillsWork with Figma .fig design files and the running OpenPencil editor — inspect structure, query nodes, analyze design tokens, export PNG/SVG/PDF/JSX, and modify 2.2Kskills.sh installs

Wireframe Spec

Install

Files

Wireframe Spec

What You Do

Wireframe Components

Content Blocks

Annotations

Content Specifications

Fidelity Levels

Wireframe Conventions

Details

More from owl-listener/designer-skills

Recommended