Wireframe Spec
- 1k installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
wireframe-spec is a Claude Code skill that generates annotated wireframe specifications defining content priority, component placement, interaction behavior, and responsive considerations before UI implementation.
About
wireframe-spec is a Claude Code skill from owl-listener/designer-skills for creating annotated wireframe specifications before visual design or frontend coding begins. The skill documents content blocks—headers, hero areas, forms, cards, and footers—with priority numbering, click and hover behavior notes, dynamic content indicators, and responsive layout considerations. Developers and designers reach for wireframe-spec when a feature needs shared layout agreement across engineering and design without polished mockups. It outputs structured spec documents that guide component placement and interaction scope early in the build cycle.
- Creates annotated wireframe specs with content priority, component placement, and behavior notes
- Defines four fidelity levels: Sketch, Low-fi, Mid-fi, and fully Annotated
- Specifies heading hierarchy, text lengths, image ratios, and content sources
- Enforces monochrome conventions using X-boxes for images and wavy lines for text
- Delivers ready-to-implement layout documentation that removes UI ambiguity
Wireframe Spec by the numbers
- 1,019 all-time installs (skills.sh)
- +50 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #381 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill wireframe-specAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1k |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you spec wireframes before UI build?
Generate clear, annotated wireframe specifications that define content priority, component placement, and interaction behavior before handing off to UI implementation.
Who is it for?
Developers and designers aligning on page structure and interaction scope before high-fidelity UI or component implementation starts.
Skip if: Teams needing production-ready visual design, design-system components, or CSS implementation rather than layout specification documents.
When should I use this skill?
The user needs wireframe layouts with content priority, component placement annotations, or behavior notes before UI implementation.
What you get
Annotated wireframe documents with content-priority numbers, component maps, interaction notes, and responsive layout guidance.
- Annotated wireframe spec
- Content-priority map
- Interaction and responsive behavior notes
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
- 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
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Pick wireframe-spec for annotated layout specs; use spacing-system or visual design skills when the task shifts to tokens or high-fidelity UI polish.
FAQ
What does wireframe-spec include in annotations?
wireframe-spec adds content-priority numbers, interaction notes for click and hover states, dynamic-content indicators, and responsive considerations. It maps headers, heroes, forms, cards, and footers before UI build.
Is wireframe-spec a visual design tool?
wireframe-spec produces structured layout and behavior specifications, not polished visual mockups or production CSS. Use it to align structure and interactions before high-fidelity design or frontend coding.
When should developers invoke wireframe-spec?
wireframe-spec fits early feature planning when teams need shared layout specs with component placement and behavior notes. Invoke it before implementing UI when requirements are still layout-focused.
Is Wireframe Spec safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.