skills.rest
lucaspedrozaem
lucaspedrozaemCOMMUNITY
Explore all skills by this author →
GitHub

wireframes

Create annotated lo-fi and hi-fi wireframes for SaaS page layouts.

1|Updated Apr 3, 2026
Search Tags:#design#layout#prototyping#interaction#wireframes#saas#information-architecture
One-click install
npx skills add https://github.com/lucaspedrozaem/saasskills --skill wireframes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframes
Source: https://github.com/lucaspedrozaem/saasskills/tree/main/skills/wireframes
Command: npx skills add https://github.com/lucaspedrozaem/saasskills --skill wireframes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Wireframes help teams plan page layouts, information architecture, and interaction patterns before visual design or implementation, reducing back-and-forth and speeding up delivery.

Core Features & Use Cases

  • Create lo-fi and hi-fi wireframes with annotations for interactions and responsive behavior.
  • Define content blocks, navigation, and layout for dashboards, settings, onboarding, pricing, and other SaaS pages.
  • Use ASCII or visual tools to communicate structure to stakeholders and engineers.

Quick Start

Create a lo-fi wireframe for a SaaS settings page and annotate the primary actions and responsive behavior.

Frequently Asked Questions about wireframes

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

FAQPage Schema
How do I plan SaaS page layouts and content hierarchy before visual design?▼

SaaS page layouts and content hierarchy are planned using wireframes to define information architecture, content blocks, and interaction patterns. This process communicates structure to stakeholders and engineers before visual design begins.

What is the best way to annotate interaction patterns and responsive behavior for dashboards?▼

Annotating interaction patterns and responsive behavior for dashboards is done by adding detailed notes directly to lo-fi and hi-fi wireframes. This specifies navigation flow and layout adjustments across different screen sizes.

Can I create wireframes for onboarding flows and pricing pages using ASCII?▼

Wireframes for onboarding flows and pricing pages can be created using ASCII or visual tools. This approach communicates structural layout and content inventory to engineering teams without needing high-fidelity visual assets.

Does wireframe planning support accessibility and design system alignment?▼

Wireframe planning supports accessibility and design system alignment by generating output-ready formats. These formats include structured content inventory and annotations aligned to established design systems and accessibility standards.

When do I need low-fidelity wireframes versus high-fidelity wireframes for settings pages?▼

Low-fidelity wireframes are needed early to outline basic settings page structure, while high-fidelity wireframes are used later to detail precise interactions and responsive behavior before implementation.

Related Skills

Explore More Design & Creative Skills→
HechaoYannetHechaoYannet

create-architecture

Generate a master architecture document from GDDs, ADRs, and governance constraints.

Community
Advanced
soeiroosoeiroo

wireframe-spec

Specify annotated wireframe layouts with content priority and behavior annotations.

Community
Intermediate
tomada1114tomada1114
4

designing-wireframes

Design ASCII wireframes and UX flows from detailed requirements.

Community
Basic
hb9397hb9397

create-prototype

Generates standalone interactive HTML prototypes with Tailwind CSS from requirement IDs and descriptions.

Community
Advanced