Does this skill require external design software?

No, it generates the XML-based code required for draw.io, which is a free and open-source diagramming tool.

Does it support mobile UI design?

Absolutely. The skill includes specific libraries and frames for both iOS (iPhone/iPad) and Android devices.

Can I generate full page layouts?

Yes, the skill includes patterns for common layouts including headers, sidebars, hero sections, dashboards, and footers.

What is the difference between the fidelity levels?

Lo-fi focuses on concept/layout with gray boxes; mid-fi adds real labels and basic styling; hi-fi includes brand colors, icons, and realistic content.

Can I edit the diagrams after they are generated?

Yes, the skill generates standard .drawio and .drawio.svg files that can be opened and modified in any draw.io or diagrams.net editor.

Wireframes & Mockups for draw.io

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

bymarkus41

•

Design Tools

Generates multi-fidelity UI/UX wireframes and functional mockups directly within draw.io diagram files for web and mobile applications.

This Claude Code skill empowers developers and designers to rapidly prototype user interfaces using the draw.io ecosystem. It provides specialized logic for creating lo-fi, mid-fi, and hi-fi wireframes, utilizing standardized shape libraries for buttons, forms, navigation, and device frames. Whether you're in the early stages of ideation or preparing pixel-perfect presentations, this skill automates the generation of complex UI components and layout patterns in an editable XML format that integrates seamlessly into your development workflow.

Key Features

0111 GitHub stars

02Support for lo-fi, mid-fi, and hi-fi design fidelities

03Standardized UI component libraries including forms, buttons, and navigation

04Automated layout generation for common web and mobile patterns

05Output in fully editable .drawio and .drawio.svg formats

06Pre-configured device frames for Web, iOS, and Android

Use Cases

01Rapidly prototyping initial app concepts for stakeholder alignment

02Creating detailed developer handoff documentation with mid-fi layouts

03Designing high-fidelity UI screens for client presentations and visual validation

Key Features

0111 GitHub stars

02Support for lo-fi, mid-fi, and hi-fi design fidelities

03Standardized UI component libraries including forms, buttons, and navigation

04Automated layout generation for common web and mobile patterns

05Output in fully editable .drawio and .drawio.svg formats

06Pre-configured device frames for Web, iOS, and Android

Use Cases

01Rapidly prototyping initial app concepts for stakeholder alignment

02Creating detailed developer handoff documentation with mid-fi layouts

03Designing high-fidelity UI screens for client presentations and visual validation