wireframing

线框图

此技能可让 Agent 生成三种保真度级别的线框图：低保真（区块布局和内容层级）、中保真（定义组件并使用占位内容）和高保真（像素级精准的规格，包含真实内容、间距数值和交互说明）。由于 Agent 以文本形式工作，线框图会以 ASCII／框线字符布局或结构化组件规格呈现，并标注精确尺寸。每个线框图都包含组件清单、交互注释和响应式断点行为。

工作流

1. 明确屏幕及其用途：确定要绘制线框图的屏幕或视图、它在用户流程中的作用，以及该屏幕上的主要用户操作。确定目标平台（桌面网页、平板、移动设备）和任何框架限制（例如 Bootstrap 网格、Material Design 组件）。这一步有助于控制范围，避免线框图偏离预期重点。

2. 定义组件清单：列出屏幕所需的所有 UI 组件：导航栏、标题、卡片、表单、按钮、表格、模态框、工具提示、空状态和加载状态。对于每个组件，注明其内容要求（标签文本、数据字段、图片尺寸）和交互行为（可点击、可展开、可拖动、可编辑）。此清单将作为线框图的物料清单。

3. 创建低保真布局：生成区块级布局，展示内容区域及其空间关系。使用 ASCII 框线字符表示各个区域。重点关注信息层级：用户首先、其次、再次看到什么。此阶段不要指定精确像素值或真实内容，而是使用 [Hero Image]、[Product Grid 3×2]、[CTA Button] 等标签。

4. 提升至中保真：用有代表性的内容替换占位标签。添加具体组件类型（下拉菜单还是单选按钮，文本输入框还是文本区域），定义列数和大致比例，并注明关键间距关系（例如“卡片间距为 16px”）。包括导航状态（活动标签、面包屑路径）和基本内容层级（标题级别、正文、说明文字）。

5. 生成高保真规格：添加精确尺寸、间距数值（以 px 或 rem 为单位）、排版规格（字体、字号、字重、行高）、颜色令牌引用、圆角值和阴影级别。为每个交互元素标注其行为：悬停状态、焦点状态、点击操作、验证规则、错误消息。包括响应式断点说明，描述每个断点下的变化。

6. 记录响应式行为：针对每个线框图，说明在移动设备（< 640px）、平板（640-1023px）和桌面设备（≥ 1024px）上的布局变化。描述哪些组件会堆叠、折叠、隐藏或重新排列。注明移动设备上的触控目标尺寸（最小 44x44px）和任何手势交互（滑动关闭、下拉刷新）。

用法

向 Agent 提供屏幕名称、屏幕用途、目标平台和所需的保真度级别。提供现有设计系统令牌或组件库的引用。Agent 将生成包含组件清单和交互注释的线框图。

示例

示例 1：分析仪表板的 ASCII 线框图

用户请求：“为 Web 分析仪表板创建一个低到中保真度的线框图。采用桌面布局。需要展示侧边栏导航、KPI 摘要卡片、折线图和数据表格。”

Agent 响应：

┌──────────────────────────────────────────────────────────────────────┐
│  ┌─────────┐   Dashboard                     🔔  👤 Jane Smith ▾   │
│  │  LOGO   │                                                        │
├──┴─────────┴─┬───────────────────────────────────────────────────────┤
│              │                                                       │
│  Dashboard • │  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐    │
│  Analytics   │  │ Total Users │ │  Revenue    │ │ Bounce Rate │    │
│  Reports     │  │   12,482    │ │  $48,250    │ │   34.2%     │    │
│  Settings    │  │  ▲ +8.3%   │ │  ▲ +12.5%  │ │  ▼ -2.1%   │    │
│              │  └─────────────┘ └─────────────┘ └─────────────┘    │
│              │                                                       │
│              │  ┌───────────────────────────────────────────────┐    │
│              │  │                                               │    │
│              │  │          Sessions Over Time (Line Chart)      │    │
│              │  │       ___/\      /\                           │    │
│              │  │     _/    \____/  \___                        │    │
│              │  │   _/                  \__                     │    │
│              │  │  Jan  Feb  Mar  Apr  May  Jun                 │    │
│              │  │                                               │    │
│              │  └───────────────────────────────────────────────┘    │
│              │                                                       │
│              │  ┌───────────────────────────────────────────────┐    │
│              │  │  Page            Views    Bounce   Avg Time   │    │
│              │  │  ─────────────── ──────── ──────── ────────── │    │
│              │  │  /home           8,421    32.1%    2m 14s     │    │
│              │  │  /pricing        3,892    28.7%    3m 42s     │    │
│              │  │  /docs           2,104    41.3%    5m 08s     │    │
│              │  │  /blog           1,876    45.6%    1m 52s     │    │
│              │  │                                               │    │
│              │  │  ◀ 1 2 3 ... 12 ▶                  Showing   │    │
│              │  │                                    1-10 of 47 │    │
│              │  └───────────────────────────────────────────────┘    │
│              │                                                       │
└──────────────┴───────────────────────────────────────────────────────┘

组件清单：

组件	内容	交互
侧边栏导航	4 个项目：Dashboard、Analytics、Reports、Settings	点击进行导航；活动项目使用粗体和左侧强调边框
KPI 卡片（×3）	指标名称、数值、带趋势箭头的变化百分比	点击可深入查看详情
折线图	时间序列、6 个月范围、单个数据集	悬停显示包含准确数值的工具提示；上方设有日期范围选择器
数据表格	4 列，可排序，带分页（每页 10 行）	点击列标题进行排序；点击行查看页面详情
顶部栏	Logo、页面标题、通知铃铛、用户头像 + 下拉菜单	铃铛显示计数徽标；头像打开个人资料/退出菜单

响应式行为：在平板电脑上（< 1024px），侧边栏折叠为仅含图标的导航栏（宽 48px）。在移动设备上（< 640px），侧边栏变为包含 4 个图标的底部标签栏；KPI 卡片在单列中垂直排列；数据表格切换为卡片列表布局，每行一张卡片。

示例 2：带注释的移动应用屏幕规范

用户请求：“为移动应用的‘创建任务’屏幕制作高保真线框图规范。包含表单字段、验证规则和交互说明。”

Agent 响应：

屏幕：创建任务（移动设备，宽 375px）

┌─────────────────────────────────┐
│  ← Back        Create Task      │  ← Top bar: 56px height
│─────────────────────────────────│
│                                 │
│  Task Name *                    │  ← Label: 14px/500, gray-600
│  ┌─────────────────────────────┐│
│  │ Enter task name...          ││  ← Input: 44px height, 16px text
│  └─────────────────────────────┘│
│  ⚠ Task name is required        │  ← Error: 12px/400, red-500
│                                 │
│  Description                    │
│  ┌─────────────────────────────┐│
│  │                             ││
│  │ Add details...              ││  ← Textarea: 120px min-height
│  │                             ││
│  └─────────────────────────────┘│
│                                 │
│  Priority                       │
│  ┌──────┐ ┌──────┐ ┌──────┐   │
│  │ Low  │ │ Med  │ │ High │   │  ← Segmented control: 36px h
│  └──────┘ └──────┘ └──────┘   │
│                                 │
│  Due Date                       │
│  ┌─────────────────────────────┐│
│  │ 📅  Select date...          ││  ← Tappable, opens date picker
│  └─────────────────────────────┘│
│                                 │
│  Assignee                       │
│  ┌─────────────────────────────┐│
│  │ 👤  Select team member...   ││  ← Opens searchable member list
│  └─────────────────────────────┘│
│                                 │
│  ┌─────────────────────────────┐│
│  │        Create Task          ││  ← Primary button: 48px height
│  └─────────────────────────────┘│    bg: blue-600, text: white
│                                 │
└─────────────────────────────────┘

详细规范：

• 屏幕内边距：水平方向 16px，顶部 24px（导航栏下方），底部 32px（安全区域）
• 字段间距：字段组（标签 + 输入框 + 错误提示）之间间隔 20px
• 输入框：高度 44px，边框 1px gray-300，圆角半径 8px，水平方向内边距 12px。聚焦状态：边框 blue-500，环形边框 2px blue-100。
• 错误状态：输入框边框为 Red-500，错误消息显示在下方，顶部间距 4px，并通过 aria-describedby 将输入框与错误文本关联。
• 优先级分段控件：各分段等宽，填满可用宽度（扣除内边距）。选中分段：背景为 blue-600，文字为白色，圆角半径 6px。未选中分段：背景为 gray-100，文字为 gray-700。
• 创建任务按钮：全宽，高度 48px，圆角半径 10px。禁用状态（无任务名称）：背景为 gray-300，不可点击。加载状态：使用微调器替换文字。
• 键盘行为：点击“任务名称”会打开键盘，回车键标记为“下一步”，点击后将焦点移至“描述”。点击“描述”会打开键盘，回车键标记为“完成”。

验证规则：

• 任务名称：必填，最多 100 个字符。若为空，在失去焦点时显示错误。
• 描述：选填，最多 1000 个字符。达到 800 个字符时显示字符计数。
• 优先级：若未选择，默认为“中”。
• 截止日期：选填。不能早于当前日期。如果选中后又清除，不报错。

最佳实践

• 从能回答当前问题的最低保真度开始：如果问题是“此页面要放什么内容？”，低保真区块布局就足够了。布局本身尚未确定时，不要给出像素级规格。
• 在每个线框图中包含空状态和错误状态：只展示正常状态的界面并不完整。绘制用户在没有数据、请求失败以及出现验证错误时看到的内容。
• 标注交互，而不只是布局：静态线框图会遗漏关键的设计决策。直接在线框图中注明每个交互元素在轻触、滑动、悬停和获得焦点时会发生什么。
• 使用具有代表性的真实内容，而不是 lorem ipsum：真实内容能暴露占位文本掩盖的布局问题，例如过长的名称溢出、过短的描述留下尴尬的空白，以及位数不同的数字。
• 在线框图旁说明响应式行为：没有断点说明的线框图会被每位开发者以不同方式解读。明确说明每个断点下哪些内容会堆叠、折叠、隐藏或重新排列。
• 为每个屏幕维护组件清单：列出每个组件的内容要求和交互行为。这份清单可作为设计评审和开发实现的检查表。

边缘情况

• 屏幕需要无限滚动或分页：绘制初始加载状态、加载更多指示器（骨架行或旋转图标）以及列表末尾状态（“没有更多结果”）。注明滚动触发点（例如，“距离底部 200px 时加载更多”）。
• 内容由用户生成，长度不可预测：在线框图中展示最少内容版本（单词标题、无描述）和最多内容版本（100 字符标题、完整段落描述）。定义截断规则：最大行数、省略号行为、“显示更多”切换。
• 屏幕必须支持多个用户角色：如果管理员能看到编辑/删除按钮，而查看者看不到，就绘制这两种变体并清楚标注。注明哪些元素会根据条件显示，以及由什么控制其显示。
• 离线或网络连接缓慢状态：绘制数据加载期间显示的屏幕骨架/占位版本。对于网络请求失败的情况，添加明确的错误状态和重试操作。
• 无障碍要求会影响布局：如果线框图使用仅靠颜色区分的状态指示器（红/黄/绿圆点），请添加文本标签或图标作为替代。注明移动端线框图中所有交互元素的最小轻触目标尺寸（44x44px）。