mcpField
F
figma-prototype-plan

figma-prototype-plan

github.com/mohitagw15856设计与 UI1.5k49 次安装5 天前更新
代码仓库

关于 figma-prototype-plan

figma-prototype-plan 是一项围绕用户研究问题规划 Figma 原型的技能。它定义原型范围、交互、测试任务和设置,并区分需要构建与模拟的部分,以控制工作量。

主要功能

  1. 01按研究目标限定原型范围
  2. 02规定交互触发方式与目标画面
  3. 03编写参与者测试任务脚本
  4. 04指导 Figma 设置与重置
  5. 05区分实际构建和模拟元素

适用场景

  1. 01为用户测试规划原型
  2. 02明确可点击流程与静态画面
  3. 03准备基于场景的测试任务

安装

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

$npx skills add https://github.com/mohitagw15856/pm-claude-skills --skill figma-prototype-plan

安装后在 Claude Code 中输入/figma-prototype-plan确认已加载。

详细介绍

Figma 原型规划技能

规划要在 Figma 中制作哪些原型以及如何制作——根据用户测试需求确定范围、定义每项交互,并设置测试场景。避免过度构建,确保原型能够回答研究问题。

必需输入

  • 研究问题(你想了解什么?)
  • 要制作原型的功能或流程
  • 原型保真度(低保真线框图 / 中保真功能原型 / 高保真像素级原型)
  • 测试方法(主持式现场 / 主持式远程 / 无主持)
  • 测试任务数量

输出结构

1. 原型范围

范围内: [包含真实交互的流程——列出具体屏幕] 范围外: [以静态方式展示的屏幕——不值得做成交互式] 理由: 原型应当是测试假设所需的最小方案。

2. 交互规范

交互 N:[描述]

  • 触发方式:点击 / 滑动 / 悬停 / 提交表单
  • 元素:[Figma 图层名称]
  • 目标:[Figma 画板名称]
  • 动画:即时 / 溶解 / 向左推入 / 向右推入 / 向上滑入
  • 时长:[ms]
  • 是否重置:是 / 否
3. 原型流程图
[Start frame]
  -> Tap "Action"
[Next frame]
  -> Tap "Complete" -> [Success frame]
  -> Tap "Cancel"   -> [Back to start]
4. 测试任务脚本

任务 N:[标题]

场景(读给参与者听): “[提供背景信息但不指示点击路径的真实场景]”

观察内容:

  • [需要观察的内容]

成功条件:[具体触发条件]

5. Figma 设置指南
  • 起始画板:[名称]
  • 设备预览:[设备]
  • 原型设置:背景颜色、显示设备、类型
  • 分享:可查看链接、参与者之间的重置流程
6. 构建与模拟表
元素构建模拟备注
主要 CTA 流程是研究核心
次要导航是不在测试范围内
错误状态是测试恢复能力

质量检查

  • 范围仅限研究问题所需的内容
  • 每项交互都有指定的目标画板
  • 任务脚本基于场景(而非“点击 X”)
  • 为每项任务定义成功标准
  • 定义参与者之间的重置流程

反模式

  • 不要为所有内容都制作原型——范围必须限制在能够回答具体研究问题的交互上
  • 不要设计原型流程却不同时编写测试任务脚本——两者必须完全一致
  • 不要跳过参与者之间的重置流程——未重置的原型状态会干扰测试结果
  • 不要在未说明哪些交互可点击、哪些为静态的情况下规划原型——含糊不清会导致范围蔓延
  • 不要在未先明确原型需要回答的研究问题时确定原型范围

示例触发语

  • “为我们针对 [功能] 的用户测试规划 Figma 原型”
  • “这个原型需要构建哪些交互?”
  • “帮我为 [研究问题] 设置 Figma 原型”
  • “为我们的 [功能] 原型编写测试任务脚本”
  • “哪些内容应该制作成原型,哪些应该保留为静态屏幕?”

评论

支持 Markdown