关于 wireframe
wireframe 是用于生成 Web、iOS 和 Android 线框图与 Mockup 的 drawio 衍生技能。它借助平台专用 stencil 库，指导组件选择、屏幕布局和导航流程绘制。
主要功能
- 01生成 Web、iOS 和 Android 线框图
- 02使用平台专用 UI stencil 库
- 03规划屏幕布局与导航流程
- 04按规范输出 drawio 图表
适用场景
- 01设计网页落地页布局
- 02绘制移动应用登录界面
- 03规划管理面板和数据仪表盘
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/wireframe确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
examples/android-app-list.mddashboard-admin.mdios-app-login.mdweb-landing-page.md详细介绍
UI 线框图与模型图生成器
**快速入门：**选择平台（Web/iOS/Android）→ 从模板库添加 UI 组件 → 在屏幕布局中排列 → 添加导航流程 → 使用 ```drawio 围栏包裹。
⚠️ **重要：**始终使用
```drawio代码围栏。切勿使用```xml——它无法渲染为图表。
关键规则
🔗 **这是一个衍生自 drawio 的技能。**所有结构、布局和边缘路由规则均继承自 drawio SKILL.md。请先阅读基本规则。
线框图专属补充：
- 查看 stencils/README.md，了解准确的 UI 模板名称
- 使用一致的间距：紧凑布局为 10px，常规布局为 20px，分区间距为 40px
- 移动端屏幕：iPhone 375×812、Android 360×800（逻辑像素）
- Web 线框图：桌面端宽度使用 1200px 或 1440px
线框图类型
| 类型 | 用途 | 模板库 | 示例 |
|---|---|---|---|
| Web 线框图 | 桌面端/响应式 Web 布局 | 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 |
评论
支持 Markdown