Agent が書く単一 HTML を、人がレビューして Agent に返す
dev-process-kit は、Agent に生成させる単一 HTML ページ（プロトタイプ、ストーリーマップ、イベントストーミングなど）に共通の構造とレビューの仕組みを与えるフレームワークです。ビルド不要で、script タグ 1 つで読み込めます。
- 書く Agent がテンプレートに沿って単一 HTML を書く。中身のデータは JSON で HTML に埋め込む。
- レビューする 人がブラウザ上でコメントや構造の変更を残す。下書きは LocalStorage に残り、再読込しても消えない。
- 返す 「変更・コメントをコピー」（または Claude に送る）で変更要求を Agent に渡し、HTML を作り直してもらう。反映済みの下書きは自動で消える。
Templates
開発プロセスの成果物ごとのテンプレートです。Agent はデータを書くだけで、画面とレビューはテンプレートが用意します。
Event Storming
ドメインイベントを時系列に並べ、コマンド・集約・ポリシーとの因果をたどる。
User Story Mapping
Activity と Step の背骨の下に、リリースごとにユーザーストーリーを並べる。
Example Mapping
ストーリーごとにルール・具体例・疑問を積み、要件の抜けを洗い出す。
Visually Grill
設計を図で示しながら質問を投げ、回答とコメントを Agent に返す。
UX Prototype
画面の流れをストーリーとステップに分けて並べ、プレビューで確かめる。
Slides
一枚ずつ順にめくるスライドで、仕組みや変更を Agent が解説する。
Task Context Board
Agent と進めるタスクの状況・Todo・成果物・報告を一枚で追い、質問や提案に答える。
Delegation Poker
判断ごとに 7 段階の委任レベルのカードを出し合い、Agent に何をどこまで任せるかを合意する。
Whiteboard
付箋・図形・フレームを自由に置いてつなぎ、ブレストや振り返りを一枚で進める。
Plain
ヘッダーとレビューだけを持ち、中身は自由に書く。
Patterns
テンプレートに当たらない資料は、Plain に図のコンポーネントと自由な HTML を組み合わせて作ります。
Components
Plain やテンプレートの中に置ける図や表示のコンポーネントです。
使い方
バージョンを固定した URL から、使うテンプレートの entry を 1 つ読み込みます。
<script type="module"
src="https://cdn.jsdelivr.net/npm/dev-process-kit@<version>/dist/templates/prototype.js"></script>
<dpk-template-prototype storage-key="my-flow">
<script type="application/json">{ "activities": [] }</script>
</dpk-template-prototype>
図を使うときは components.js も読み込みます（全部入りは index.js）。