Back to Details

wireframe

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Wireframe & Mockup Generator

UI线框图与原型生成指南

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.
快速入门： 选择平台（网页/iOS/Android）→ 从模具库中添加UI组件→ 排列为屏幕布局→ 添加导航流程→ 用
```drawio
代码块包裹。
⚠️ 重要提示： 请始终使用
```drawio
代码块。切勿使用
```xml
——它无法渲染为图表。

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
🔗 此技能基于drawio开发。所有结构、布局和边缘路由规则均继承自drawio SKILL.md。请先阅读基础规则。
线框图专属补充规则：
  • 查看stencils/README.md获取准确的UI模具名称
  • 使用统一间距：紧凑间距为10px，常规间距为20px，区块间距为40px
  • 移动设备屏幕尺寸：iPhone为375×812逻辑像素，Android为360×800逻辑像素
  • 网页线框图：桌面端宽度设为1200px或1440px

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
类型用途模具库示例
网页线框图桌面端/响应式网页布局
mxgraph.mockup.*
（共104个组件）		web-landing-page.md
iOS原型iPhone/iPad应用界面
mxgraph.ios7.*
（共168个图标）		ios-app-login.md
Android原型Android手机/平板应用界面
mxgraph.android.*
（共49个组件）		android-app-list.md
仪表板原型管理面板、数据仪表板
mxgraph.mockup.*
dashboard-admin.md