wireframe

Original：🇺🇸 English
Translated

Create UI wireframes and mockups using drawio XML format with platform-specific UI component libraries. Best for web page layouts, iOS/Android mobile app mockups, and Bootstrap-based designs. Built on drawio with mockup-specific stencils. NOT for simple flowcharts (use mermaid) or data visualization (use vega).

4installs
Sourcemarkdown-viewer/skills
Added on

NPX Install

npx skill4agent add markdown-viewer/skills wireframe

Tags

Translated version includes tags in frontmatter
ui-wireframingmockup-designdrawio-stencilsplatform-specific-uiweb-mobile-prototyping

SKILL.md Content

View Translation Comparison →

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

TypePurposeStencil LibraryExample
Web WireframeDesktop/responsive web layouts
mxgraph.mockup.*
(104 components)		web-landing-page.md
iOS MockupiPhone/iPad app screens
mxgraph.ios7.*
(168 icons)		ios-app-login.md
Android MockupAndroid phone/tablet screens
mxgraph.android.*
(49 components)		android-app-list.md
DashboardAdmin panels, data dashboards
mxgraph.mockup.*
dashboard-admin.md