wireframes-mockups

Name: wireframes-mockups
Availability: InStock
Author: Markus

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

Ready to run

npx skills add https://github.com/markus41/claude --skill wireframes-mockups

💬 Prompt for ChatGPT / Claude Chat▼

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.