構造化された設計書
human + LLM章、依存関係、確度、決定状態をUIとして表示しつつ、裏側にIDやJSONを埋め込める。
What changes from Markdown
読むドキュメントから、操作できる設計UIへ。
単一HTMLは、設計書、レビュー画面、プロトタイプ、判断ログ、LLMへの差分指示を1つに閉じ込められる。人間には操作しやすいUIとして見せ、LLMには構造化された入力として渡せる。
1ファイルだけで配布、レビュー、再実行ができる
0バックエンドなしでもコメントとexportは動く
∞CSS/JSでUI、図、状態、操作を足せる
一枚HTMLで表現できること
レビュー入力
local first各要件や画面にコメント、採用/却下、優先度を付けて、後で差分指示に変換できる。
ミニプロトタイプ
interactive画面遷移、入力フォーム、フィルタ、チャート、比較表を設計書の中でそのまま動かせる。
意思決定ログ
traceableなぜ採用したか、何が未決か、次にLLMへ何を直させるかを機械可読に残せる。
プロンプト生成
copy ready人間の操作を、Claude CodeやCodexへ貼れる具体的な修正依頼に変換できる。
安全な静的配布
no secrets公開可能な情報だけを載せれば、Cloudflare PagesでURL共有できる。秘密や保存処理は外に出さない。
レビュー付き設計書の例
コメントを書く
仕様書に埋め込めるミニプロトタイプ
画面状態を切り替える
比較表もUIになる
観点
Markdown
単一HTML
読みやすさ
強い
強いが設計次第
操作
弱い
チェック、入力、切替が可能
LLM投入
手で整形
構造化して生成
配布
簡単
同じく簡単
サーバーなしでできる / できない
静的HTMLだけでできる
コメント入力、localStorage保存、JSON export、clipboard copy、図表、画面遷移デモ、ソート、フィルタ、フォーム検証、LLM用プロンプト生成。
バックエンドが必要になる
複数人のコメント同期、ログイン、DB保存、LLM APIの安全な呼び出し、秘密情報を使う処理、承認ワークフロー。
生成されるLLM投入用プロンプト
上のボタンを押すと、チェック状態とコメントからプロンプトを生成します。