wireframe
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
```drawiocode 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
More from markdown-viewer/skills
architecture
Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.
2.0Kuml
Create UML diagrams using PlantUML syntax. Best for software modeling — Class, Sequence, Activity, State Machine, Component, Use Case, and Deployment diagrams with concise text-based notation and auto-layout.
1.9Kinfographic
Create template-based infographics with space-separated key-value syntax (NOT YAML). Best for KPI dashboards, timelines, roadmaps, SWOT analysis, funnels, comparisons, and org charts with quick visual impact.
1.8Kcanvas
Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.
1.8Kgraphviz
Create directed/undirected graphs using DOT language with automatic layout. Best for dependency trees, call graphs, package hierarchies, and module relationships requiring fine-grained edge routing.
1.8Knetwork
Create network topology diagrams using PlantUML syntax with mxgraph device icons (Cisco, Citrix, etc.). Best for LAN/WAN layouts, datacenter interconnects, and physical/logical network design.
1.7K