skills.rest
MonumentalSystems
MonumentalSystemsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

wireframing-prototyping

Create structured UX wireframes, user flows, and sitemaps for web and mobile experiences.

17|5|Updated Feb 6, 2026
Search Tags:#prototyping#user flows#wireframing#sitemap#design handoff#ux testing
One-click install
npx skills add https://github.com/MonumentalSystems/Atlas-Agent-Teams --skill wireframing-prototyping-monumentalsystems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframing-prototyping
Source: https://github.com/MonumentalSystems/Atlas-Agent-Teams/tree/main/teams/design-ux/skills/wireframing-prototyping
Command: npx skills add https://github.com/MonumentalSystems/Atlas-Agent-Teams --skill wireframing-prototyping-monumentalsystems

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Wireframing and prototyping help you translate vague product ideas into clear user flows and sitemaps so you can align stakeholders and reduce costly redesign later.

Core Features & Use Cases

  • Wireframing across fidelity levels: Create low-, mid-, and high-fidelity wireframes to match your stage of validation, from early ideation to stakeholder-ready design.
  • User flow and sitemap planning: Define happy paths, alternative/error paths, and the information architecture that connects screens.
  • Prototype interactions and design handoff: Specify interactive behaviors and deliver developer-ready handoff artifacts (assets, specs, style guidance) for accurate implementation.
  • User testing readiness: Prepare realistic tasks, run testing sessions, analyze findings, and plan iterations based on observed issues.

Quick Start

Create a low-fidelity wireframe plus a simple happy-path user flow for a new “appointment booking” feature, then list the key screens and annotations your developer will need.

Frequently Asked Questions about wireframing-prototyping

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create wireframes and user flows for a new app feature?▼

To create wireframes and user flows, define the happy path and alternative error paths, then structure the information architecture connecting screens to reduce ambiguity in product design.

What level of wireframe fidelity do I need for early ideation versus stakeholder review?▼

Wireframe fidelity ranges from low for early ideation to mid and high fidelity for stakeholder-ready design, allowing you to match the validation stage and reduce costly redesigns later.

How should I prepare for UX testing and developer handoff after prototyping?▼

Prepare for UX testing and developer handoff by specifying interactive behaviors, creating realistic tasks, and delivering annotated artifacts with clear hierarchy and style guidance for implementation.

Can I map out a complete sitemap and information architecture before designing screens?▼

Yes, you can map a complete sitemap and information architecture before screen design to define navigation structures and align stakeholders on product scope.

What is the best way to document user flows and error paths for mobile experiences?▼

Document user flows and error paths for mobile experiences by defining structured happy paths, annotating alternative routes, and specifying interaction behaviors for clear developer handoff.

When should I not use high-fidelity wireframes during product design?▼

Avoid high-fidelity wireframes during early ideation when validation requirements are low, as premature detail can lock in design decisions and increase costly redesigns.

Related Skills

Explore More Design & Creative Skills→
cpfcoachingcpfcoaching

idea-refine

Guide users through divergent and convergent thinking to refine ideas into actionable concepts.

Community
Advanced
aj-geddesaj-geddes
472

UX Designer

Design user flows and ASCII wireframes with WCAG 2.1 AA accessibility specifications.

Community
Basic
GDSDNGDSDN
3

ux-create-wireframe

Design wireframes, prototypes, and interaction flows from user research insights.

Community
Advanced
Logos-LiberLogos-Liber
17

wireframing-prototyping

Create wireframes, user flows, sitemaps, and interactive prototypes for digital products.

Official
Intermediate