機能要件から画面構成・ワイヤーフレームまでを段階的に落とし込むスキル。 design-discussion や feature-discussion の成果物を入力として、 2ステップ(アクションフロー → ワイヤーフレーム + 画面設計ノート)で画面設計を行う。 ワイヤーフレームを見ながらユーザーと一緒に必要な機能・画面要素を詰めていく。 成果物は PlantUML Salt による視覚的なワイヤーフレーム。 Use when: 機能から画面に落としたい、画面構成を考えたい、 ワイヤーフレームを作りたい、画面設計をしたい、画面フローを整理したい。 design-discussion の後に使うと効果的。 Triggers: "画面構成", "画面設計", "ワイヤーフレーム", "画面に落とす", "ui flow design", "UIフロー設計", "wireframe", "画面を考えたい", "UIフロー", "画面遷移", "screen design", "画面フロー", "screen flow"
「機能ができた!でもどんな画面にすればいいかわからない」を解決する。 AI が全部決めるのではなく、ワイヤーフレームを見ながらユーザーと一緒に詰めていく。
以下のいずれかを入力として受け取る:
.claude/design_discussion/sessions/<name>/)入力の粒度: 「タスクをカンバン形式で管理。ラベル・期限・担当者あり」程度の詳細さが必要。 曖昧な場合はユーザーに補足質問する。
.claude/ui_flow_design/sessions/<session-name>/
├── workflow-state.json ← プロセス状態管理(2ステップ)
├── 01_user-action-flow.md ← ステップ1: ユーザーアクションフロー(テキスト)
├── 01_state-diagram.puml ← ステップ1: アクションフロー(Salt ワイヤーフレーム版)
├── 02_screen-info.md ← ステップ2: 画面設計ノート(議事録形式)
└── 02_full-layout.puml ← ステップ2: 全画面ワイヤーフレーム(1枚に統合)
.puml.md には説明テキストと .puml への参照だけ書く.md 内に PlantUML コードブロックを埋め込まない画面仕様を修正した場合、以下のファイルを 必ず連動して更新 する:
01_user-action-flow.md のフロー説明01_state-diagram.puml のワイヤーフレーム版フロー02_screen-info.md の設計ノート02_full-layout.puml の全画面ワイヤーフレーム1つだけ更新して他を放置しない。
出力: 01_user-action-flow.md + 01_state-diagram.puml
前提: 入力ファイル(design-discussion 成果物 or 機能説明)
01_user-action-flow.md に出力01_state-diagram.puml に出力
completed に更新@startsalt
title ユーザーアクションフロー
{
{^"1. 初回起動"
(画面のSalt ワイヤーフレーム)
}
.
<color:blue>**>>> ユーザーのアクション説明**</color>
.
{^"2. 次の状態"
(画面のSalt ワイヤーフレーム)
}
...
}
@endsalt
出力: 02_full-layout.puml + 02_screen-info.md
前提: ステップ1 が completed
ワイヤーフレームファーストのアプローチ:
02_full-layout.puml で全画面のワイヤーフレームを作る02_screen-info.md に議事録形式で記録.puml ファイルを更新した後、必ず doc-sync エージェントを run_in_background: true で起動する。
メインの作業(ユーザーとのやりとり)を止めずに、バックグラウンドで .md を同期更新させる。
Agent(
subagent_type: "ui-flow-design:doc-sync",
run_in_background: true,
prompt: "02_full-layout.puml が更新されました。02_screen-info.md を同期してください。"
)
議事録形式で、以下を随時追記していく:
plantuml-salt スキルを参照して正確な Salt 記法を使う。
Critical Rules:
} | { は絶対に1行で書く} の対応を必ず確認する^ は必ずペアで閉じる!theme ディレクティブはCursor互換性のため使わないworkflow-state.json でプロセスの状態を管理する:
{
"meta": {
"app": "アプリ名",
"sessionId": "セッションID",
"createdAt": "日付",
"updatedAt": "日付",
"sourceFiles": ["入力ファイルのパス"]
},
"steps": [
{
"id": 1,
"name": "ユーザーアクションフロー",
"status": "pending | in_progress | completed | needs_revision",
"outputFiles": ["01_user-action-flow.md", "01_state-diagram.puml"],
"iterations": [
{
"round": 1,
"generatedAt": "日付",
"userFeedback": "ユーザーからのフィードバック or null",
"approved": false
}
]
},
{
"id": 2,
"name": "画面設計・ワイヤーフレーム",
"status": "pending | in_progress | completed | needs_revision",
"outputFiles": ["02_full-layout.puml", "02_screen-info.md"],
"iterations": []
}
],
"currentStep": 1,
"decisions": []
}
.claude/ui_flow_design/sessions/<session-name>/
セッション名は design-discussion と合わせると紐付けが明確になる。