mcpbeat

Prototype

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

410 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
482
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill prototype

The instruction itself

4 sections, as written by the author

Skill: Prototype & Research

Guide work through the right fidelity level with validation.

Steps

  • Read workflows/prototyping.md (5-level fidelity ladder, journey mapping template, usability-testing script, sample data).
  • Identify the current need and pick the lowest fidelity that answers it — never skip levels:
  • Content-first (info needs) → Wireframe (layout/nav) → Low-fi (task completion) → High-fi (visual/a11y) → Code (feasibility/perf).
  • For flows: produce a user-journey map with decision points, error paths, and edge cases.
  • For validation: define the usability test (tasks, success criteria, 5-user rule) using the script.
  • High-fi/code steps pull tokens (tokens/*), components (components/*), taste (taste/*), and a11y (accessibility/*).

Output

The artifact at the chosen fidelity + an explicit "what we validate next" plan.

Verification (before declaring done)

  • The fidelity matches the question being answered — no level skipped.
  • Flows include decision points, error paths, and edge cases (empty/loading/overflow), not just the happy path.
  • A concrete validation step is named (tasks + success criteria), not "test later".
  • High-fi/code artifacts pass the same token + a11y bar as design-code (no hardcoded values, contrast, states).

How to use it

Copy the folder

Take plugin87/prototype from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.