Item: wireframe
Rating: 4.9
Author: Implexa

wireframe

Create UI wireframes and mockups using drawio XML format with platform-specific UI component libraries. Best for web page layouts, iOS/Android mobile app…

installs

stars

karma

SkillRank score ↗

4.9/ 10

evaluated by implexa, claude-haiku-4-5 · 2026-07-05

wireframe generates UI mockups and layouts in drawio XML format with platform-specific component libraries for web, iOS, and Android. delegates most structural decisions to a parent drawio skill and provides platform dimensions and spacing guidelines.

structure

5.0

trigger phrases

3.0

procedure

5.0

edge cases

2.0

documentation

5.0

strengths

SKILL.md

UI Wireframe &#x26; 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

don't have the plugin yet? install it then click "run inline in claude" again.

wireframe

SKILL.md

related skills