About wireframe
wireframe is a drawio-derived skill for generating web, iOS, and Android wireframes and mockups. It guides component selection, screen layout, and navigation-flow diagrams using platform-specific stencil libraries.
Key features
- 01Web、iOS 和 Android 界面线框图
- 02平台专用 UI stencil 库
- 03屏幕布局与导航流程
- 04按规范生成 drawio 图表
Use cases
- 01设计网页落地页布局
- 02绘制移动应用登录界面
- 03规划管理面板和数据仪表盘
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/wireframein Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
examples/android-app-list.mddashboard-admin.mdios-app-login.mdweb-landing-page.mdDetails
From the project READMEUI 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
| 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 |