mcpField
W
wireframe-prototyping

wireframe-prototyping

github.com/aj-geddes设计与 UI3731.4k 次安装34 周前更新
代码仓库

关于 wireframe-prototyping

面向设计与产品团队的线框图和原型设计技能，帮助验证概念、收集反馈并迭代方案，提供原型方法、示例和测试指南。

主要功能

  1. 01低保真线框图实践
  2. 02原型工具与技巧参考
  3. 03线框图示例
  4. 04原型测试指南
  5. 05基于反馈迭代设计

适用场景

  1. 01早期验证产品概念
  2. 02协调利益相关者对设计的理解
  3. 03通过用户测试收集反馈
  4. 04向开发团队交接设计

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/wireframe-prototyping确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
prototype-testing.md
prototyping-tools-techniques.md
wireframe-examples.md
templates/
component-template.tsx

详细介绍

线框图原型设计

目录

概览

线框图和原型弥合了创意与实现之间的差距，让团队能够在投入高昂的开发成本前测试概念、收集反馈并改进设计。

适用场景

  • 早期概念验证
  • 利益相关方达成共识
  • 用户测试与反馈
  • 移交给开发者
  • 功能探索
  • UX 问题解决
  • 快速迭代

快速开始

最小可用示例：

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/ 目录中的详细实现：

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

最佳实践

✅ 应该做
  • 从低保真草图开始
  • 尽早并频繁地收集反馈
  • 与真实用户进行测试
  • 根据反馈迭代
  • 使用一致的网格和间距
  • 记录交互流程
  • 纳入边界情况（空状态、错误）
  • 创建移动端优先的线框图
  • 分享原型以便协作
  • 保持线框图简洁、重点突出
❌ 不应该做
  • 直接跳到高保真设计
  • 未经验证就过度设计
  • 忽视移动端和响应式需求
  • 不收集用户意见就创建线框图
  • 不明确交互方式
  • 将线框图做得过于详细
  • 只与团队成员进行测试
  • 忽视无障碍设计
  • 过早定型设计
  • 创建不切实际的用户流程

评论

支持 Markdown