How do I use these patterns in draw.io?

The skill provides XML code snippets that can be pasted directly into draw.io, along with instructions on which shape libraries to enable (e.g., File > Open Library > wireframe).

Does it include UI components like buttons and forms?

Yes, it includes predefined styles and XML for buttons, toggles, input fields, dropdowns, navigation bars, and complete dashboard layouts.

Can I create mobile-specific designs?

Yes, the skill includes specialized libraries and frames for iOS and Android native UI components, as well as tablet and mobile phone frames.

What fidelity levels are supported by this skill?

The skill supports three levels: Lo-fi for early ideation, Mid-fi for layout validation and developer prep, and Hi-fi for pixel-perfect client presentations.

Wireframes & Mockups for draw.io

Name: Wireframes & Mockups for draw.io
Author: markus41

bymarkus41

•

디자인 도구

Generates professional UI/UX wireframes and mockups in draw.io across lo-fi, mid-fi, and hi-fi fidelity levels.

This skill empowers Claude to function as a UI/UX design assistant specifically for draw.io, enabling the rapid creation of interface blueprints. It provides structured XML patterns and best practices for three distinct fidelity levels: lo-fi for conceptual ideation, mid-fi for layout validation, and hi-fi for visual presentations. By leveraging built-in mockup libraries for web, iOS, and Android, the skill allows users to quickly assemble complex components like navigation bars, dashboard layouts, and interactive forms directly within their diagramming workflow.

주요 기능

01Multi-fidelity design support (Lo-fi, Mid-fi, Hi-fi)

02Standardized design rules for consistent spacing, colors, and typography

03Integration with draw.io mockup, bootstrap, and mobile shape libraries

04Pre-configured XML snippets for common UI components and layouts

0510 GitHub stars

06Device-specific frames for Browser, iPhone, Android, and iPad

사용 사례

01Creating stakeholder-aligned lo-fi wireframes during early discovery phases

02Generating detailed UI specifications and layouts for developer handoff

03Rapid prototyping of web and mobile application screens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add markus41/claude wireframes-mockups

For use in Claude.ai and ChatGPT