wireframe
29
总安装量
29
周安装量
#7216
全站排名
安装命令
npx skills add https://github.com/markdown-viewer/skills --skill wireframe
Agent 安装分布
gemini-cli
28
codex
27
opencode
27
github-copilot
26
kimi-cli
26
amp
25
Skill 文档
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
| 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 |