01 功能说明
一种标注式线框图方法，将布局区块、内容约定、响应式行为和状态覆盖结合起来。
Wireframe Spec 在配色和视觉润色之前定义屏幕的结构意图。它涵盖内容区块、位置、优先级和行为标注，并为响应式差异及数据驱动内容留出空间。即使在低保真阶段，真实的导航和按钮标签也有助于理解结构。
该来源不止要求绘制方框，还要求明确标题层级、文本长度预期、图像比例、必需与可选材料以及内容来源。它还要求涵盖空白、加载、已有内容和错误状态，因此线框图并不局限于理想状态下的屏幕。
预期交付物
选择草图、低保真、中保真或标注式保真度，并确定主要内容区域。
为区块提供真实标签、优先级、数据来源和交互标注。
说明断点变化以及空白、加载、已有内容和错误版本。
02 适用场景
不要求使用特定的线框图工具；可用的需求简报必须包含内容和状态信息。
03 关键决策
一个矩形无法说明内容是否会更新、是否会打开面板，或是否依赖 API。
长度和宽高比要求可以避免后续布局决策依赖无法实现的内容。
04 示例任务
下面的示例简报尚未经过测试。使用前请检查该技能的设置说明。
按照仓库记录的安装方式操作，并保留其中引用的所有配套文件。本条目描述的是一种聚焦的设计方法，而非可执行应用程序。
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/wireframe-spec/SKILL.md不要求使用特定的线框图工具；可用的需求简报必须包含内容和状态信息。
运行该技能之前，请调整这份简报中的范围、来源材料和约束。
使用 wireframe-spec 为可搜索的模板库页面制作线框图。明确区块优先级、真实的导航标签、搜索和筛选行为、标题层级、卡片图像比例以及内容来源。包含移动端、空白、加载和请求失败状态，同时保持中性的视觉样式。根据以下可观察标准检查实际输出。
OpenDesign 为编程智能体提供本地设计工作区。本条目并不表示该技能已捆绑提供，也不表示其中包含其外部工具、凭据和软件依赖项。
05 来源与许可证
本页描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能发生变化。
9a6930cf84a8一种标注式线框图方法，将布局区块、内容约定、响应式行为和状态覆盖结合起来。
由 OpenDesign 根据链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度信号，并不代表技能使用量或质量评分。
06 开始前的问题
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/wireframe-spec/SKILL.md