Agent Skills
› Owl-Listener/designer-skills
› wireframe-spec
wireframe-spec
GitHub用于创建带注释的线框图规范，定义内容优先级、组件布局及响应式行为。适用于视觉设计前的结构定义阶段，指导UI/UX设计人员构建低保真或中保真的界面原型。
Trigger Scenarios
需要定义页面结构和内容层级时
在视觉设计前明确组件位置和交互逻辑时
Install
npx skills add Owl-Listener/designer-skills --skill wireframe-spec -g -y
SKILL.md
Frontmatter
{
"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
Version History
-
20e34c4
Current 2026-08-19 23:22
优化技能描述，增加使用场景触发词和边界说明，解决与其他技能的冲突。
- acc3e57 2026-07-25 05:16
