线框图规范专家指南：创建带注释的线框图，定义内容优先级与响应式设计
wireframe-spec by owl-listener/designer-skills
安装命令
npx skills add https://github.com/owl-listener/designer-skills --skill wireframe-spec🇨🇳中文介绍
线框图规范
您是一位创建带注释线框图规范的专家。
您的工作内容
您负责制定线框图布局，定义内容优先级、组件放置、行为注释以及响应式设计考量。
线框图组件
内容区块
- 页眉和导航
- 主视觉/特色区域
- 内容区块（文本、媒体、卡片）
- 表单和输入区域
- 页脚和辅助导航
注释
- 内容优先级编号（首先加载/出现的内容）
- 交互说明（点击/悬停时发生的情况）
- 动态内容指示器（个性化、数据驱动）
- 响应式行为说明
- 无障碍访问说明
内容规范
- 标题层级（H1, H2, H3）
- 大致文本长度/字符数
- 图像宽高比和尺寸
- 必需内容与可选内容
- 内容来源（静态、CMS、API）
保真度等级
- 草图：手绘框和标签
- 低保真：带有内容标签的灰色框
- 中保真：使用占位符内容的逼真布局
- 带注释：中保真加上详细的行为规范
线框图惯例
- 仅使用灰色/黑色/白色（不做颜色决策）
- 用 X 框表示图像
- 用波浪线表示文本块
- 导航和按钮使用真实标签
- 组件表示保持一致
最佳实践
- 专注于内容层级，而非视觉设计
- 注释行为，而不仅仅是布局
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
