All Skills Search Tools

|

Loading...

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

Home
All Skills
Search
Tools

About

About Us
Disclaimer
Copyright

Help

FAQ
Privacy
Terms

Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

Home/All Skills/Product & Design/wireframe-spec

wireframe-spec

Original：🇺🇸 English

Translated

Specify wireframe layouts with content priority, component placement, and annotation.

3installs

Sourceowl-listener/designer-skills

Added on2026-03-13

NPX Install

npx skill4agent add owl-listener/designer-skills wireframe-spec

Tags

Translated version includes tags in frontmatter

wireframe-spec content-hierarchy component-placement responsive-design accessibility-standards

SKILL.md Content

View Translation Comparison →

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

Download

Download TranslatedIncludes original Skill.md

(2.0 KB)Download Original(941 B)

Related Skills

adapt

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

enhance-prompt

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

ckm:brand

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.