Wireframe Creator

线框图创建器

一位 UX 设计专家，可创建低保真线框图，用于快速原型设计和迭代。这项技能专注于结构、层级和用户流程，不受视觉设计干扰，让你能在投入高保真设计前快速验证概念。

无论你需要快速绘制一个落地页草图、为应用设计完整的用户流程，还是规划仪表板布局，这项技能都能生成清晰且带注释的线框图，以传达信息架构和交互模式。

核心工作流

工作流 1：网站／落地页线框图

1. 定义页面结构

   • 页眉／导航
   • 主视觉区域
   • 内容区块
   • 页脚

2. 创建 ASCII 线框图

   • 使用方框、线条和文本表示布局
   • 通过间距和尺寸体现层级
   • 标明可交互元素
   • 为所有组件添加标签

3. 添加注释

   • 内容描述
   • 交互说明
   • 响应式行为
   • 优先级标记

4. 定义用户流程

   • 入口
   • CTA 和路径
   • 出口

5. 提供后续步骤

   • 内容要求
   • 设计注意事项
   • 开发说明

工作流 2：应用界面线框图

1. 绘制用户旅程

   • 列出所需的所有界面
   • 定义界面之间的流程
   • 找出决策点

2. 设计每个界面

   • 导航结构
   • 内容布局
   • 可交互元素
   • 状态（空、加载中、错误、成功）

3. 展示关联

   • 表示流程的箭头
   • 编号步骤
   • 决策树

4. 记录交互

   • 轻触／点击操作
   • 滑动手势
   • 长按行为
   • 转场

工作流 3：仪表板线框图

1. 定义数据层级

   • 最重要的指标
   • 次要信息
   • 详细视图
   • 筛选器／控件的位置

2. 布局面板

   • 主要内容区域
   • 侧边栏导航
   • 顶部栏工具
   • 小组件的位置

3. 设计数据可视化

   • 图表占位符
   • 表格结构
   • 卡片布局
   • 空状态

4. 规划交互

   • 下钻流程
   • 筛选器行为
   • 导出／操作
   • 刷新模式

工作流 4：用户流程线框图

1. 绘制完整流程

   • 起始状态
   • 所有决策点
   • 成功路径
   • 错误路径
   • 结束状态

2. 为每个步骤绘制线框图

   • 每个步骤对应一个界面
   • 展示状态变化
   • 标明验证

3. 连接流程

   • 界面之间的箭头
   • 标注触发条件
   • 说明条件逻辑

4. 记录边界情况

   • 各种假设情况
   • 错误处理
   • 验证反馈

快速参考

操作	命令／触发语
落地页线框图	“为 [product] 绘制落地页线框图”
应用界面线框图	“为 [feature] 界面创建线框图”
用户流程	“为 [task] 绘制用户流程”
仪表板	“为 [use case] 绘制仪表板线框图”
表单线框图	“为 [purpose] 设计表单”
导航	“为 [site] 绘制导航线框图”

线框图元素库

布局组件

+----------------------------------+
|           HEADER                 |
| [Logo]    [Nav] [Nav] [Nav] [CTA]|
+----------------------------------+

+----------------------------------+
|         HERO SECTION             |
|                                  |
|   [Headline]                     |
|   [Subheading]                   |
|   [CTA Button]                   |
|                                  |
+----------------------------------+

+-------+  +-------+  +-------+
|       |  |       |  |       |
| Card  |  | Card  |  | Card  |
|       |  |       |  |       |
+-------+  +-------+  +-------+

+----------------------------------+
|           FOOTER                 |
| [Links] [Links] [Social] [Legal] |
+----------------------------------+

表单元素

[Input Field Label]
[___________________]

[Dropdown Label]
[Select ▼]

[Radio Options]
( ) Option 1
( ) Option 2
(•) Option 3

[Checkbox Options]
[✓] Option A
[ ] Option B
[✓] Option C

[Text Area]
[                    ]
[                    ]
[                    ]

[Button]  [Secondary Button]

导航模式

Horizontal Nav:
[Logo] [Link] [Link] [Link] [Link] [Button]

Sidebar Nav:
+--------+
| [Logo] |
|        |
| [Nav]  |
| [Nav]  |
| [Nav]  |
| [Nav]  |
+--------+

Hamburger Nav (Mobile):
[☰] [Logo]          [🔍][👤]

Tabs:
[Active Tab] [Tab] [Tab] [Tab]
─────────────────────────────

数据展示

Table:
+--------+----------+--------+
| Header | Header   | Header |
+--------+----------+--------+
| Cell   | Cell     | Cell   |
| Cell   | Cell     | Cell   |
+--------+----------+--------+

Card Grid:
+-------+  +-------+  +-------+
|[IMG]  |  |[IMG]  |  |[IMG]  |
| Title |  | Title |  | Title |
| Text  |  | Text  |  | Text  |
| [Link]|  | [Link]|  | [Link]|
+-------+  +-------+  +-------+

List:
• Item with icon
• Item with icon
• Item with icon

注释符号

[Component Name] - Placeholder for element
(...) - Truncated/overflow content
[IMG] - Image placeholder
[LOGO] - Logo placement
[CTA] - Call to action button
[---] - Divider/separator
→ - User flow direction
* - Important note
? - Decision point
! - Error/warning state
✓ - Success state

线框图最佳实践

• 保持低保真：克制添加视觉润色的冲动
• 聚焦结构：关注层级和布局，而非颜色和字体
• 使用真实内容：尽可能使用实际文本，而非 lorem ipsum
• 展示各种状态：为每个组件展示空白、加载中、错误和成功状态
• 充分添加注释：说明交互、行为和限制条件
• 优先考虑移动端：从最小屏幕开始
• 为元素编号：让注释易于引用
• 保持间距一致：即使在线框图中也要保持视觉节奏
• 标注内容类型：[Headline]、[Body text]、[Button label]
• 展示所有交互：悬停、点击、滑动和手势
• 记录边缘情况：说明出现问题时会发生什么
• 保持简单：方框、线条和标签就足够了

常见模式

落地页结构

1. Header (sticky)
   - Logo + Navigation + CTA

2. Hero (above fold)
   - Headline + Subheading + CTA + Visual

3. Social Proof
   - Logos or testimonials

4. Features (3-column)
   - Icon + Headline + Description × 3

5. How It Works (stepped)
   - Step 1, Step 2, Step 3 with visuals

6. Pricing (table or cards)
   - 3 tiers with features listed

7. Final CTA
   - Headline + Button + Trust signals

8. Footer
   - Links, social, legal

仪表板布局

+-----+---------------------------+
| Nav | Top Bar [Search] [User]   |
| [L] +---------------------------+
| [I] |                           |
| [N] |     Main Content          |
| [K] |     (Charts, Tables)      |
| [S] |                           |
|     |                           |
+-----+---------------------------+

表单流程

Step 1: Basic Info
[Name Input]
[Email Input]
[Next Button]
  ↓
Step 2: Details
[Multiple fields]
[Back] [Next]
  ↓
Step 3: Confirmation
[Review info]
[Edit] [Submit]
  ↓
Success State
[✓] Thank you message
[Next action]

交付物格式

WIREFRAME SPECIFICATION
Project: [Name]
Page/Screen: [Landing Page / Dashboard / etc.]
Date: [Date]

USER FLOW
Entry → Action → Result → Next Step

WIREFRAME
[ASCII diagram of layout]

COMPONENTS

1. Header
   - Height: 64px
   - Elements: Logo (left), Nav (center), CTA (right)
   - Behavior: Sticky on scroll
   - Mobile: Collapses to hamburger menu

2. Hero Section
   - Height: 100vh
   - Layout: 60% text (left), 40% image (right)
   - Elements:
     * H1 headline (max 60 chars)
     * Subheading (max 120 chars)
     * Primary CTA button
     * Secondary CTA link
   - Responsive: Stacks vertically on mobile

3. Feature Cards
   - Layout: 3-column grid
   - Card structure:
     * Icon (top)
     * Headline (h3)
     * Description (2-3 lines)
     * Optional link
   - Responsive: 1 column mobile, 2 tablet, 3 desktop

[... more components ...]

INTERACTIONS

Hover States:
- Nav links: Underline
- Buttons: Darken background
- Cards: Lift shadow

Click Actions:
- Primary CTA → Opens signup form
- Feature cards → Expands details
- Nav links → Smooth scroll to section

CONTENT REQUIREMENTS

Copy Needed:
- [ ] H1 headline (max 60 characters)
- [ ] Subheading (max 120 characters)
- [ ] 3 feature headlines
- [ ] 3 feature descriptions
- [ ] CTA button text

Images Needed:
- [ ] Hero image (1600x900px)
- [ ] 3 feature icons (SVG)
- [ ] Logo (SVG, white and color versions)

RESPONSIVE BREAKPOINTS

Mobile (<768px):
- Single column layout
- Hamburger navigation
- Stacked hero content
- Larger touch targets (min 44px)

Tablet (768-1024px):
- 2-column feature grid
- Partial navigation visible
- Balanced hero layout

Desktop (>1024px):
- Full layout as wireframed
- All navigation visible
- Multi-column grids

STATES

Default: As shown in wireframe
Loading: Show skeleton placeholders
Error: Display error message with retry option
Empty: Show empty state with CTA
Success: Show confirmation message

NOTES
- Prioritize above-fold content
- Ensure clear CTA visibility
- Test mobile interaction zones
- Consider accessibility (focus states, screen readers)
- Plan for content that may overflow

工具集成

• 使用 layout-designer 技能获取详细的网格规范
• 使用 ui-builder 技能将线框图转换为代码
• 使用 Midjourney 根据线框图生成视觉设计
• 使用 Playwright 测试线框图交互

线框图保真度级别

低保真（本技能）

• 方框和线条
• 灰度
• 占位内容
• 重点：结构
• 速度：非常快
• 用途：早期构思、快速迭代

中保真

• 形状更加精细
• 部分真实内容
• 展示基本交互
• 重点：布局 + 内容
• 速度：中等
• 用途：利益相关者评审、用户测试

高保真

• 应用视觉设计
• 真实内容
• 交互式原型
• 重点：最终设计
• 速度：较慢
• 用途：开发者交接、最终审批

常见请求

电商产品页：主视觉图片 + 详情 + CTA + 相关产品 SaaS 注册流程：带进度指示器的多步骤表单 博客首页：精选文章 + 文章网格 + 侧边栏 移动应用引导流程：3-4 个可滑动屏幕 + 跳过/下一步 管理后台仪表板：侧边栏导航 + 指标卡片 + 数据表格 个人资料页：页眉 + 标签页 + 内容分区