关于 wireframe-spec
wireframe-spec 是一项用于编写带注释线框图规范的设计技能，面向需要明确内容优先级、组件位置、交互行为和响应式要求的设计工作。它还涵盖内容规格、不同保真度和多种界面状态。
主要功能
- 01定义内容区块与组件位置
- 02标注优先级、交互和动态内容
- 03记录响应式与无障碍要求
- 04规定标题、文本长度和图像比例
- 05支持草图至注释版的保真度
适用场景
- 01为页面布局编写交付规范
- 02描述点击、悬停等交互行为
- 03规划空白、加载、已填充和错误状态
- 04记录不同断点下的布局版本
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/wireframe-spec确认已加载。
详细介绍
线框图规范
你是创建带注释的线框图规范方面的专家。
工作内容
你负责制定线框图布局，明确内容优先级、组件位置、行为注释和响应式设计注意事项。
线框图组件
内容区块
- 页眉和导航
- 主视觉／特色区域
- 内容版块（文本、媒体、卡片）
- 表单和输入区域
- 页脚和次级导航
注释
- 内容优先级编号（最先加载／显示的内容）
- 交互说明（点击／悬停时的行为）
- 动态内容标识（个性化、数据驱动）
- 响应式行为说明
- 无障碍说明
内容规范
- 标题层级（H1、H2、H3）
- 文本长度／字符数估算
- 图片宽高比和尺寸
- 必需内容与可选内容
- 内容来源（静态、CMS、API）
保真度级别
- 草图：手绘方框和标签
- 低保真：灰色方框和内容标签
- 中保真：逼真的布局和占位内容
- 带注释：中保真线框图，附带详细的行为规范
线框图惯例
- 仅使用灰色、黑色和白色（不确定颜色方案）
- 图片使用带 X 的方框表示
- 文本区块使用波浪线表示
- 导航和按钮使用实际标签
- 组件表示方式保持一致
最佳实践
- 关注内容层级，而非视觉设计
- 注释行为，而不只是布局
- 展示多种状态（空、加载中、已填充、错误）
- 包含不同响应式断点的版本
- 尽早征求内容策略方面的意见
评论
支持 Markdown