skills.rest
markus41
markus41COMMUNITY
Explore all skills by this author →
GitHub

wireframes-mockups

Generate UI/UX wireframes and mockups in draw.io across fidelity levels.

18|2|Updated Dec 12, 2025
Search Tags:#prototyping#wireframing#ux design#ui design#ui components#draw.io#mockups
One-click install
npx skills add https://github.com/markus41/claude --skill wireframes-mockups
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframes-mockups
Source: https://github.com/markus41/claude/tree/main/plugins/drawio-diagramming/skills/wireframes-mockups
Command: npx skills add https://github.com/markus41/claude --skill wireframes-mockups

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of creating visual representations of user interfaces, from initial concept sketches to high-fidelity designs, enabling faster iteration and clearer communication.

Core Features & Use Cases

  • Multi-fidelity Design: Supports lo-fi, mid-fi, and hi-fi design stages.
  • Extensive Libraries: Provides pre-built components for various platforms (iOS, Android, Bootstrap) and UI elements (buttons, forms, navigation).
  • Use Case: Quickly generate a lo-fi wireframe for a new mobile app screen, then iterate to a mid-fi version with realistic labels and input fields, and finally to a hi-fi mockup with brand colors and shadows.

Quick Start

Use the wireframes-mockups skill to generate a lo-fi wireframe for a login page.

Frequently Asked Questions about wireframes-mockups

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

FAQPage Schema
How do I create UI mockups and wireframes in draw.io?▼

UI mockups and wireframes can be generated in draw.io across lo-fi, mid-fi, and hi-fi fidelity levels. The skill outputs visual representations using platform-specific components for iOS, Android, and Bootstrap, facilitating screen flow diagrams and responsive design considerations.

What is the difference between lo-fi, mid-fi, and hi-fi wireframing?▼

Lo-fi, mid-fi, and hi-fi wireframing represent progressive design fidelity stages. Lo-fi captures initial concept sketches, mid-fi adds realistic labels and input fields, and hi-fi applies brand colors and shadows to finalize the UI mockup for clearer communication.

Can I use Bootstrap and iOS UI components for mobile app prototyping?▼

Yes, mobile app prototyping is supported using pre-built UI components for Bootstrap and iOS. The skill provides extensive libraries of common UI elements like forms, buttons, and navigation to streamline the visual design process.

What's the best way to design screen flow diagrams for responsive web applications?▼

Designing screen flow diagrams for responsive web applications is facilitated by generating UI/UX wireframes with responsive design considerations. The skill uses draw.io to map user flows and screen transitions using Bootstrap components and common UI elements.

Do I need any external dependencies to generate UX wireframes?▼

No external dependencies are required to generate UX wireframes. The skill operates standalone using draw.io to produce UI mockups, providing pre-built component libraries for iOS, Android, and Bootstrap without needing additional setup.

Are there limitations when creating Android UI components in draw.io mockups?▼

Limitations are minimal as the skill provides pre-built Android UI components for draw.io mockups. Users can generate screen flow diagrams and responsive design layouts, though outputs are constrained to the available component libraries within the draw.io environment.

Related Skills

Explore More Design & Creative Skills→
lucaspedrozaemlucaspedrozaem
1

wireframes

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

Community
Intermediate
liangmiQwQliangmiQwQ

cc-design

Generate hi-fi HTML designs and prototypes from user briefs.

Community
Advanced
jasonmichaelbell78-creatorjasonmichaelbell78-creator

ux-researcher-designer

Generate data-driven personas and journey maps from user data.

Community
Advanced
soq123soq123

recreate-screenshot

Reproduce a UI screen from a screenshot with pixel-perfect fidelity.

Community
Intermediate