线框原型设计指南：从低保真到高保真，提升产品设计效率与用户体验

wireframe-prototyping by aj-geddes/useful-ai-prompts

464 周安装量

153 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill wireframe-prototyping

设计用户体验产品管理

🇨🇳中文介绍

线框原型设计

概述

线框图和原型是连接想法与实现的桥梁，使团队能够在投入高昂的开发成本之前测试概念、获取反馈并完善设计。

使用时机

早期概念验证
利益相关者对齐
用户测试与反馈
开发人员交接
功能探索
用户体验问题解决
快速迭代

快速开始

最小工作示例：

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)

参考指南

references/ 目录下的详细实现：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

指南	内容
原型设计工具与技术	原型设计工具与技术
线框图示例	线框图示例
原型测试	原型测试

🇺🇸English

Wireframe Prototyping

Overview
When to Use
Quick Start
Reference Guides
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:

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	Prototyping Tools & Techniques
Wireframe Examples	Wireframe Examples
Prototype Testing	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

Weekly Installs

293

Repository

aj-geddes/usefu…-prompts

GitHub Stars

121

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode266

codex251

gemini-cli249

cursor233

github-copilot222

claude-code210