菜单
Web/アプリの画面ワイヤーフレーム（構造・レイアウト・導線）をASCII図とMarkdown注釈で作成するSkill。 「ワイヤーフレームを作って」「画面構成を設計して」「画面のレイアウトを考えて」「UI構造を整理して」「画面の骨組みを作って」 「wireframeを書いて」「画面設計して」「ラフを作って」などの依頼で発動する。 出力はASCIIワイヤーフレーム + 画面注釈（状態・制約・挙動）のMarkdown。モックアップ（見た目重視）やプロトタイプ（動作検証）とは異なる。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/lilpacy/dotfiles --skill wireframe-builder命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | wireframe-builder |
| description | Web/アプリの画面ワイヤーフレーム（構造・レイアウト・導線）をASCII図とMarkdown注釈で作成するSkill。 「ワイヤーフレームを作って」「画面構成を設計して」「画面のレイアウトを考えて」「UI構造を整理して」「画面の骨組みを作って」 「wireframeを書いて」「画面設計して」「ラフを作って」などの依頼で発動する。 出力はASCIIワイヤーフレーム + 画面注釈（状態・制約・挙動）のMarkdown。モックアップ（見た目重視）やプロトタイプ（動作検証）とは異なる。 |
Web/アプリの画面ワイヤーフレームを、ASCIIアート図 + Markdown注釈で作成するSkill。
以下のいずれか、または組み合わせ：
入力が曖昧な場合、まずユーザーゴールと主要タスクを確認する。
| # | 画面名 | 目的 | 主要CTA |
|---|--------|------|---------|
| 1 | ログイン | 認証 | ログインボタン |
| 2 | ダッシュボード | 状況把握 | 新規作成 |
flowchart LR
A[ログイン] --> B[ダッシュボード]
B --> C[詳細]
B --> D[設定]
┌─────────────────────────────────────────┐
│ [Logo] [検索] [👤 User] │ ← Header
├─────────────────────────────────────────┤
│ ┌─────────┐ ┌─────────────────────────┐│
│ │ Nav │ │ Main Content ││
│ │ ・Home │ │ ┌─────────────────────┐ ││
│ │ ・Items │ │ │ Card 1 │ ││
│ │ ・設定 │ │ └─────────────────────┘ ││
│ └─────────┘ │ ┌─────────────────────┐ ││
│ │ │ Card 2 │ ││
│ │ └─────────────────────┘ ││
│ └─────────────────────────┘│
└─────────────────────────────────────────┘
各画面に対して以下を記載：