開発ストーリー / PROTOLENS

要件を HTML にしたら、
意見にも、届く場所を。

閲覧できる要件から、場所に結び付いたコメントへ。人もエージェントも使える、次の修正のための文脈を残します。

01 / ページは、チャットだけでは伝わらないことを伝える

要件を説明するために、HTML プロトタイプを使うことが増えました。レイアウト、情報の階層、操作の意図を直接見せられます。それでも、フィードバックはチャットに散らばったまま。「この部分を変えて」は、ページと場所がなければ、すぐに意味がわからなくなります。

ProtoLens の領域アンカーと具体的なフィードバック
図 01マーカーからコメントへ、コメントから元の内容へたどれます。この画面では、元の中国語のレビュー資料をそのまま表示しています。

02 / フィードバックを実際の内容に結び付ける

ProtoLens は GitHub の静的ファイルを、継続して使えるレビューリンクにします。レビューする人が領域や文章にコメントを結び付けることで、次の担当者は切り離されたスクリーンショットから推測せずに、問題の場所を見つけられます。

フィードバックを、次の修正までつなぐ

01HTML

要件を閲覧できる形にする

02場所に結び付く意見

正確な文章や領域にコメントする

03Markdown / MCP

人やエージェントが修正に使える文脈を渡す

04修正とレビュー

修正したプロトタイプを確認する

作業の流れの概要です。すべてのコメントをエージェントが自動で実装したり、受け入れたりするという意味ではありません。

03 / 人の判断を、AI の次の作業へつなぐ

コメントを集めるのは、その一部にすぎません。Markdown への書き出しと MCP アクセスで、修正する人やエージェントに必要な意見を渡せます。人の判断が次の作業に入りますが、修正されたプロトタイプには改めてレビューが必要です。

静的レビューに絞る、という選択

この作業で主に扱う入力は HTML、SVG、PNG です。ProtoLens は任意のビルド、依存関係のインストール、アプリケーションのバックエンド実行は行いません。そのため、操作を伴う一部の動作は、製品本来の環境で確認する必要があります。