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