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

线框图类型

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

类型	用途	模具库	示例
网页线框图	桌面端/响应式网页布局	`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