UI Wireframe & Mockup Generator

Quick Start: Choose platform (Web/iOS/Android) → Add UI components from stencil library → Arrange in screen layout → Add navigation flows → Wrap in ```drawio fence.

⚠️ IMPORTANT: Always use drawio code fence. NEVER use xml — it will NOT render as a diagram.

Critical Rules

🔗 This is a drawio-derived skill. All structure, layout, and edge routing rules inherit from drawio SKILL.md. Read the base rules first.

Wireframe-specific additions:

• Check stencils/README.md for exact UI stencil names

• Use consistent spacing: 10px for tight, 20px for normal, 40px for sections

• Mobile screens: iPhone 375×812, Android 360×800 (logical pixels)

• Web wireframes: 1200px or 1440px width for desktop

Wireframe Types

Type Purpose Stencil Library Example

Web Wireframe Desktop/responsive web layouts mxgraph.mockup.* (104 components) web-landing-page.md

iOS Mockup iPhone/iPad app screens mxgraph.ios7.* (168 icons) ios-app-login.md

Android Mockup Android phone/tablet screens mxgraph.android.* (49 components) android-app-list.md

Dashboard Admin panels, data dashboards mxgraph.mockup.*

dashboard-admin.md