定页面结构用这Skill标线框行为

编写线框图规格说明。

wireframe-spec 是给页面线框补内容与行为说明的 Skill。它确定信息优先级、组件位置和交互注释,再标不同状态与响应变化,帮助视觉和开发接力。

灰框里只有“这里放内容”,接手者仍不知道长度、来源和是否必填。按钮与导航用真实标签,图片说明比例,动态区写清来自接口还是内容系统,才能看出布局限制。

加载、空内容、正常和错误状态应分别说明。优先级编号表达设计意图,不自动决定浏览器加载顺序;线框里的位置也要结合阅读和键盘顺序核。

适合视觉定稿之前对齐结构。本文未制作线框;原文用灰度避免过早决定颜色,但不是所有协作都必须禁用语义标识。线框完整也不等于实际内容、组件行为和多尺寸验证已经完成。

分类:设计创作

来源仓库:owl-listener/designer-skills

适合用来做什么

  • 请为我指定一个线框布局,优先显示主要内容。
  • 在视觉设计之前,定义一个包含组件放置和注释的线框。

安装 wireframe-spec

npx skills add https://www.iskills.cc/skills/owl-listener/designer-skills/wireframe-spec/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 wireframe-spec 的用途与原始说明

浏览全部 Skill 指南