关于 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