wireframe について
wireframeは、Web、iOS、Androidのワイヤーフレームやモックアップを作成するdrawio派生スキルです。各プラットフォームのステンシルを使い、コンポーネント選択、画面配置、ナビゲーションフローの作成を支援します。
主な機能
- 01Web、iOS、Androidのワイヤーフレーム作成
- 02プラットフォーム別UIステンシル
- 03画面配置とナビゲーションフロー
- 04規則に沿ったdrawio図の生成
活用シーン
- 01Webランディングページのレイアウト設計
- 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 を継承します。まず基本ルールを読んでください。
ワイヤーフレーム固有の追加事項：
- UI ステンシルの正確な名前については、stencils/README.md を確認してください
- 一貫した間隔を使用します：狭い間隔は 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 対応