---
id: ssh2-wireframe-prototyping
name: "wireframe-prototyping"
url: https://skills.yangsir.net/skill/ssh2-wireframe-prototyping
author: aj-geddes
domain: design
tags: ["wireframing", "prototyping", "ux-design", "figma", "sketch"]
install_count: 913
rating: 4.20 (40 reviews)
github: https://github.com/aj-geddes/useful-ai-prompts
---

# wireframe-prototyping

> 创建线框图和交互式原型，用于可视化用户界面和产品设计，帮助团队在开发前理解和迭代产品概念。

**Stats**: 913 installs · 4.2/5 (40 reviews)

## Before / After 对比

### 快速创建线框图与交互原型，验证设计理念

## Readme

# Wireframe Prototyping

## Table of Contents

- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)

## Overview

Wireframes and prototypes bridge the gap between ideas and implementation, enabling teams to test concepts, get feedback, and refine designs before costly development.

## When to Use

- Early concept validation
- Stakeholder alignment
- User testing and feedback
- Developer handoff
- Feature exploration
- UX problem-solving
- Rapid iteration

## Quick Start

Minimal working example:

```yaml
Wireframe Principles:

Low Fidelity (Sketches):
  Tools: Paper, whiteboard, Balsamiq
  Time: 30 minutes - 2 hours
  Detail: Basic layout, no colors/fonts
  Best For: Brainstorming, exploration
  Cost: Free

Medium Fidelity:
  Tools: Figma, Sketch, Adobe XD
  Time: 2-8 hours
  Detail: Layout, content, basic interaction
  Best For: Team alignment, feedback
  Cost: Low

High Fidelity:
  Tools: Figma, Framer, web dev tools
  Time: 8+ hours
  Detail: Visual design, interactions, animations
  Best For: Developer handoff, user testing
  Cost: Medium

---
## Wireframe Components
// ... (see reference guides for full implementation)
```

## Reference Guides

Detailed implementations in the `references/` directory:

| Guide | Contents |
|---|---|
| [Prototyping Tools & Techniques](references/prototyping-tools-techniques.md) | Prototyping Tools & Techniques |
| [Wireframe Examples](references/wireframe-examples.md) | Wireframe Examples |
| [Prototype Testing](references/prototype-testing.md) | Prototype Testing |

## Best Practices

### ✅ DO

- Start with low-fidelity sketches
- Get feedback early and often
- Test with real users
- Iterate based on feedback
- Use consistent grids and spacing
- Document interaction flows
- Include edge cases (empty states, errors)
- Create mobile-first wireframes
- Share prototypes for collaboration
- Keep wireframes simple and focused

### ❌ DON'T

- Jump directly to high-fidelity
- Over-design before validation
- Ignore mobile/responsive needs
- Create wireframes without user input
- Leave interactions undefined
- Make wireframes too detailed
- Test only with team members
- Ignore accessibility
- Lock into designs too early
- Create unrealistic user flows


---
*Source: https://skills.yangsir.net/skill/ssh2-wireframe-prototyping*
*Markdown mirror: https://skills.yangsir.net/api/skill/ssh2-wireframe-prototyping/markdown*