wireframe by markdown-viewer/skills
npx skills add https://github.com/markdown-viewer/skills --skill wireframe快速开始: 选择平台(Web/iOS/Android)→ 从组件库添加 UI 组件 → 在屏幕布局中排列 → 添加导航流程 → 用 ````drawio` 代码块包裹。
⚠️ 重要: 始终使用
drawio` 代码块。切勿使用xml` —— 它不会渲染为图表。
🔗 这是一个基于 drawio 衍生的技能。 所有结构、布局和边路由规则均继承自 drawio SKILL.md。请先阅读基础规则。
线框图特有的补充规则:
| 类型 | 用途 | 组件库 | 示例 |
|---|---|---|---|
| Web 线框图 | 桌面端/响应式网页布局 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
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 |
每周安装量
192
代码仓库
GitHub 星标数
5
首次出现
2026年2月6日
安全审计
已安装于
gemini-cli186
opencode185
github-copilot182
codex182
kimi-cli178
amp176
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 usexml` — it will NOT render as a diagram.
🔗 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:
| 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.* |
Weekly Installs
192
Repository
GitHub Stars
5
First Seen
Feb 6, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli186
opencode185
github-copilot182
codex182
kimi-cli178
amp176
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
49,900 周安装