Wireframe Creator 是一个由 UX 设计专家角色驱动的技能，专门用于创建低保真线框图，以支持快速原型与迭代。它的核心聚焦于结构、层级和用户流程，刻意排除视觉设计干扰，从而在投入高保真设计之前快速验证概念。无论是落地页草图、完整的应用用户流程，还是仪表盘布局，该技能都能产出清晰、带注释的线框图，用于沟通信息架构与交互模式。
核心工作流
工作流 1：网站/落地页线框图 定义页面结构：页眉/导航、主视觉区（Hero）、内容区块、页脚。创建 ASCII 线框图：用框、线和文本表示布局，通过间距和尺寸体现层级，标示交互元素，为所有组件加标签。添加注释：内容描述、交互说明、响应式行为、优先级标记。定义用户流程：入口点、CTA 与路径、退出点。提供后续步骤：内容需求、设计考量、开发说明。
工作流 2：应用界面线框图 梳理用户旅程：列出所有需要的界面、定义界面之间的流转、识别决策点。设计每个界面：导航结构、内容布局、交互元素、状态（空、加载、错误、成功）。展示连接关系：用箭头指示流转、编号步骤、决策树。记录交互：点击/触摸动作、滑动手势、长按行为、过渡效果。
工作流 3：仪表盘线框图 定义数据层级：最重要的指标、次要信息、详情视图、筛选/控件位置。布局面板：主内容区、侧边导航、顶部栏工具、组件位置。设计数据可视化：图表占位符、表格结构、卡片布局、空状态。规划交互：下钻流程、筛选行为、导出/操作、刷新模式。
工作流 4：用户流程线框图 绘制完整流程：起始状态、所有决策点、成功路径、错误路径、结束状态。为每一步绘制线框图：每步一个界面、展示状态变化、标示校验。连接流程：界面之间的箭头、注释触发条件、说明条件逻辑。记录边界情况：如果……会怎样、错误处理、校验反馈。
快速参考（命令/触发语） 落地页线框图："Wireframe a landing page for [product]"；应用界面线框图："Create wireframe for [feature] screen"；用户流程："Map user flow for [task]"；仪表盘："Wireframe dashboard for [use case]"；表单线框图："Design form for [purpose]"；导航："Wireframe navigation for [site]"。
线框图元素库 包含布局组件（页眉、Hero 区、卡片网格、页脚）、表单元素（输入框、下拉、单选、复选、文本域、按钮）、导航模式（水平导航、侧边栏导航、移动端汉堡导航、标签页）、数据展示（表格、卡片网格、列表）以及注释符号（[组件名]、(...)截断内容、[IMG]图片占位、[LOGO]标志位置、[CTA]行动按钮、[---]分隔线、→ 用户流程方向、* 重要注释、? 决策点、! 错误/警告状态、✓ 成功状态）。
线框图最佳实践 保持低保真：抵制添加视觉润色的冲动；聚焦结构：关注层级和布局，而非颜色/字体；使用真实内容：尽量使用实际文本而非占位文本；展示状态：每个组件的空、加载、错误、成功状态；大量注释：解释交互、行为和约束；移动优先：从最小屏幕开始；编号元素：便于引用注释；使用一致间距：即使线框图也保持视觉节奏；标示内容类型：[标题]、[正文]、[按钮标签]；展示所有交互：悬停、点击、滑动、手势；记录边界情况：出错时会发生什么；保持简单：框、线和标签足矣。
常见模式 落地页结构：1. 页眉（吸顶，含 Logo + 导航 + CTA）；2. Hero（首屏，含标题 + 副标题 + CTA + 视觉）；3. 社会证明（Logo 或用户评价）；4. 功能（三列，图标 + 标题 + 描述 × 3）；5. 工作原理（分步，步骤 1、2、3 配视觉）；6. 定价（表格或卡片，3 个档位列明功能）；7. 最终 CTA（标题 + 按钮 + 信任信号）；8. 页脚（链接、社交、法律）。仪表盘布局：侧边导航 + 顶部栏（搜索、用户）+ 主内容区（图表、表格）。表单流程：步骤 1 基本信息 → 步骤 2 详情 → 步骤 3 确认 → 成功状态。
交付物格式 提供线框图规格模板，包含：项目名称、页面/界面、日期；用户流程（入口 → 动作 → 结果 → 下一步）；线框图（ASCII 布局图）；组件（编号列出每个组件的高度、元素、行为、移动端表现、响应式）；交互（悬停状态、点击动作）；内容需求（文案清单、图片清单）；响应式断点（移动 <768px、平板 768-1024px、桌面 >1024px）；状态（默认、加载、错误、空、成功）；注释（优先首屏内容、确保 CTA 清晰可见、测试移动端交互区域、考虑无障碍、为可能溢出的内容做规划）。
工具集成 使用 layout-designer 技能获取详细栅格规格；使用 ui-builder 技能将线框图转为代码；使用 Midjourney 从线框图生成视觉设计；使用 Playwright 测试线框图交互。
线框图保真度层级 低保真（本技能）：框和线、灰度、占位内容；聚焦结构；速度非常快；用于早期构思、快速迭代。中保真：更精细的形状、部分真实内容、展示基本交互；聚焦布局 + 内容；速度适中；用于干系人评审、用户测试。高保真：应用视觉设计、真实内容、交互式原型；聚焦最终设计；速度较慢；用于开发交接、最终批准。
常见请求 电商产品页：Hero 图 + 详情 + CTA + 相关产品；SaaS 注册流程：带进度指示的多步表单；博客首页：特色文章 + 文章网格 + 侧边栏；移动应用引导：3-4 个可滑动界面 + 跳过/下一步；管理仪表盘：侧边导航 + 指标卡片 + 数据表格；个人资料页：页眉 + 标签页 + 内容区块。