Can I customize the colors and branding?

Absolutely. While lo-fi designs use placeholders, the hi-fi patterns allow you to specify brand hex codes, custom typography, and specific icon sets.

How do I use the generated designs?

The skill generates XML code for .drawio or .drawio.svg files, which can be opened and edited in any draw.io compatible editor or embedded in your project documentation.

Can I generate mobile-specific app screens?

Yes, the skill includes specialized patterns and frames for iPhone (iOS), Android devices, and Tablets (iPad) using native component libraries.

Does it support common web frameworks like Bootstrap?

Yes, the skill is configured to use the mxgraph.bootstrap library, allowing Claude to generate grid systems and components consistent with Bootstrap standards.

What design fidelity levels does this skill support?

It supports three distinct levels: Lo-fi for concept exploration (gray boxes), Mid-fi for layout validation (grayscale with real labels), and Hi-fi for visual design (brand colors and realistic content).

draw.io UI/UX Design & Wireframes

Name: draw.io UI/UX Design & Wireframes
Author: markus41

bymarkus41

•

Design Tools

Generates professional UI/UX wireframes and mockups directly in draw.io using standardized fidelity levels and component libraries.

This skill empowers Claude to act as a UI/UX designer by generating structured draw.io XML for everything from low-fidelity concept sketches to high-fidelity visual mockups. It leverages built-in draw.io shape libraries—including Bootstrap, iOS, and Android—to create consistent layouts, forms, and dashboard interfaces. Whether you need a rapid mobile app screen or a complex web dashboard, this skill provides the specific XML patterns, styling rules, and component libraries required to produce professional design artifacts directly within your repository.

Key Features

01Deep integration with draw.io's native mockup and wireframe shape libraries

02Automatic application of design systems, including spacing, typography, and color hierarchy

0311 GitHub stars

04Multi-fidelity generation supporting Lo-fi, Mid-fi, and Hi-fi levels

05Standardized UI components for Web, iOS, and Android platforms

06Pre-styled XML patterns for forms, navigation bars, and dashboards

Use Cases

01Generating mid-fidelity layout validations for developer handoff and technical documentation

02Rapidly prototyping new feature ideas during early-stage stakeholder alignment

03Creating high-fidelity, brand-aligned mockups for client presentations and visual design reviews

Key Features

01Deep integration with draw.io's native mockup and wireframe shape libraries

02Automatic application of design systems, including spacing, typography, and color hierarchy

0311 GitHub stars

04Multi-fidelity generation supporting Lo-fi, Mid-fi, and Hi-fi levels

05Standardized UI components for Web, iOS, and Android platforms

06Pre-styled XML patterns for forms, navigation bars, and dashboards

Use Cases

01Generating mid-fidelity layout validations for developer handoff and technical documentation

02Rapidly prototyping new feature ideas during early-stage stakeholder alignment

03Creating high-fidelity, brand-aligned mockups for client presentations and visual design reviews