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).

3installs

Sourcemarkdown-viewer/skills

Added on2026-02-10

NPX Install

npx skill4agent add markdown-viewer/skills wireframe

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

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