skills.rest
Logos-Liber
Logos-LiberOFFICIAL
Explore all skills by this author →
WebsiteGitHub

wireframing-prototyping

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the design process by providing tools and techniques for creating wireframes, user flows, sitemaps, and interactive prototypes, ensuring clear communication and efficient handoff to developers.

Core Features & Use Cases

  • Wireframing: Utilize various tools and techniques (low-fi to high-fi) to map out screen layouts and information architecture.
  • Prototyping: Build interactive prototypes to simulate user journeys and test usability.
  • Design Handoff: Facilitate seamless transfer of design specifications and assets to development teams.
  • Use Case: A product designer needs to quickly create a clickable prototype for a new mobile app feature to get early feedback from stakeholders before committing to high-fidelity visuals.

Quick Start

Use the wireframing-prototyping skill to create a low-fidelity wireframe for a user login screen.

Frequently Asked Questions about wireframing-prototyping

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

FAQPage Schema
How do I create a wireframe for a mobile app feature?▼

Create wireframes by mapping out screen layouts and information architecture using low-fi to high-fi techniques, ensuring clear communication and efficient handoff to developers.

What is the best way to build interactive prototypes for user testing?▼

The best way to build interactive prototypes is to simulate user journeys and test usability early, allowing stakeholders to provide feedback before committing to high-fidelity visuals.

How does design handoff work between designers and developers?▼

Design handoff works by facilitating a seamless transfer of detailed design specifications and assets from designers to development teams, ensuring efficient collaboration and clear communication.

When do I need to map out user flow diagrams and sitemaps?▼

You need to map out user flow diagrams and sitemaps when establishing the information architecture for digital products, ensuring structured navigation and clear user journeys before prototyping.

Can I use this for low-fidelity wireframing without high-fidelity visuals?▼

Yes, you can use low-fidelity wireframing to quickly map out screen layouts and information architecture, allowing you to get early stakeholder feedback before committing to high-fidelity visuals.

Related Skills

Explore More Design & Creative Skills→
SkobynSkobyn

ui-ux-designer

Create accessible UI components and design systems for web and mobile products.

Community
Advanced
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
CANTAGESTUDIOCANTAGESTUDIO
3

ux-information-architecture

Design information architecture as ASCII diagrams for applications and websites.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate