HTML Demoとフロントエンドプロジェクト専用のPrototype Notes Skillです。
最近、AIにプロトタイプページやフロントエンドコードを直接生成してもらうことに、ますます慣れてきました。
ページはすぐに完成しますが、それに伴って新たな問題も出てきます。
「このボタンをクリックした後に、二重確認が必要です。」
「ここの画像は見栄えがよくないので、別の表現に変えてください。」
「テーブルのカテゴリを切り替えたら、下のデータも同時に絞り込む必要があります。」
こうした内容は、いったいどこに書けばよいのでしょうか。
スクリーンショットを送る、赤枠を描く、ドキュメントを書く、グループチャットに一言追加する。開発者はページを見ながら長時間探すことになります。ページを修正すれば古いスクリーンショットは使えなくなり、意見が増えるほどチャット内の文脈も失われやすくなります。
そこで、Prototype Notes（プロトタイプ注釈）というSkillを作りました。HTMLプロトタイプやフロントエンド開発環境に独立した注釈ツールを追加し、要望や修正意見をページ上の実際の場所に直接残せます。
具体的には何をするもの？
簡単に言えば、Webページに「現場の付箋」を貼るようなものです。
注釈モードを有効にしてページ上の任意の場所を右クリックすると、次の2種類の内容を追加できます。
要望説明：プロダクトマネージャー向け。新しい要望や要件変更を記述するためのもので、優先度、ステータスを設定し、複数の説明を追加できます。
修正意見：レビュアー向け。レビューの提案を記録するためのもので、署名の入力が必要ですが、優先度やステータスの設定は不要です。
>注釈モードを有効にし、右クリックして追加する注釈の種類を選択
送信すると、説明はページ上の小さなアイコンに折りたたまれます。開発者はアイコンをクリックして文脈を確認でき、「スクリーンショットのどの場所について言っているのか」を推測する必要がありません。
主な機能
01 要望説明とレビュー意見を分離
プロダクト要件とレビュー提案は、もともと別の種類の情報です。Skillでは、それらを同じフォームに無理に詰め込まず、右クリックの入口から明確に分けています。
>要望説明：複数の内容、優先度、追加または変更のステータス、保存時刻
>修正意見：レビュアーの署名を入力し、レビュー提案を直接記録
02 1つのマーカーに複数の説明を追加
同じ場所に関する要望のために、アイコンを横一列に並べる必要はありません。1つの要望マーカーに複数の要望説明を追加でき、修正意見マーカーにも複数の意見を追加できます。件数はバッジで表示されます。
03 マーカーとポップアップを移動
マーカーの位置が正確でない場合は、ドラッグして再配置できます。ポップアップも移動できるため、確認中のページ内容を隠しません。マーカーは相対位置を記録するので、ページのスクロールやサイズ変更があっても、できるだけ対象要素に追従します。
04 説明に画像を直接貼り付け
文字だけでは説明しにくい場合は、スクリーンショットをコピーして現在の説明に直接貼り付けられます。画像は自動的に圧縮されて注釈データとともに保存され、個別に削除することもできます。
05 注釈モード以外は完全に読み取り専用
普段の閲覧時には、誤って内容を変更することはできず、通常の右クリック操作も妨げません。注釈モードを手動で有効にした場合のみ、注釈の追加、編集、移動、インポート、削除が可能です。
>通常の閲覧モード：説明は確認できるが、編集や削除の操作はない
06 Gitリポジトリ内のJSONに自動保存
注釈データはプロジェクトのルートディレクトリにある次のファイルに保存されます。
.prototype-notes/annotations.json
保存、移動、インポート、削除を行うと、開発環境がこのファイルを自動的に更新します。チームメンバーがGitにコミットすれば、注釈をプロジェクトとともに共有し、レビューし、履歴として残せます。手動でのインポートとエクスポートも、障害復旧用として引き続き利用できます。
07 本番ビルドに注釈コードを含めない
これは「クリックして非表示にする」ことで安全に見せかけるツールではありません。Viteプロジェクトでは開発モードでのみランタイムを読み込み、保存APIも開発サーバー上にのみ登録されます。静的HTMLプロジェクトでは、公開前に削除処理を実行できます。リリース時の確認目標は、本番成果物に注釈ランタイムと注釈内容がまったく含まれていないことです。
気に入っている小さな工夫
青いドキュメントアイコンとオレンジ色の意見アイコン。 ポップアップを開かなくても、プロダクト要件なのかレビュー意見なのかが分かります。
右クリックを制御するのは注釈モードのときだけ。 普段はWebページ本来の操作を邪魔せず、記録したいときだけ有効にできます。
各説明に最新の保存時刻を表示。 開発者は、自分が見ているのが更新直後のバージョンかどうかを判断できます。
ローカルキャッシュによるバックアップ。 自動書き込みに失敗しても、ブラウザ内の下書きがすぐに失われることはなく、ツールバーにも「同期に失敗しました」と表示されます。
出所識別子を内蔵。 現在のバージョンでは「泥嚎的AI实验室」と表示され、ランタイム、開発ツール、エクスポートしたJSONにも統一された検証可能な識別子が保持されます。
どんな問題を解決するのか？
第一に、要件の文脈が失われにくくなることです。要望がページから離れて、チャット履歴やドキュメントの中だけに残ることがなくなります。
第二に、プロダクトと開発者の位置特定コストを減らせることです。具体的なコントロールに注釈が付くため、ページを開けばどこを修正すべきか分かります。
第三に、プロダクト要件とレビュー feedbackを分離できることです。誰が提案したのか、どのような種類の内容なのかを一目で見分けられます。
第四に、AIプロトタイプを実際の反復プロセスに組み込めることです。AIが素早く生成し、注釈レイヤーが後続のフィードバックをAIや開発者に再び渡します。
第五に、リリース時の安全性を損なわないことです。注釈は開発・レビュー環境にのみ存在し、正式な製品機能にはなりません。
シーン別の使い方
シーン1：AIが生成した単一ページHTML Demo
AIにPrototype Notes Skillを使わせて注釈レイヤーを追加し、付属のローカル開発サービスを起動します。プロダクト担当者はページ上で右クリックして要望を記入し、保存するとプロジェクトのJSONに自動的に記録されます。確認が完了したらランタイムを削除し、静的ページを公開します。
シーン2：Vue / React + Viteフロントエンドプロジェクト
Skillはランタイムを開発ツールディレクトリに配置し、開発サーバーでのみ動作する保存プラグインをインストールします。通常どおりプロジェクトの開発コマンドを実行すれば利用でき、本番ビルド時には注釈ランタイムを読み込みません。
シーン3：プロダクト担当者と開発者が同じGitリポジトリで協業
プロダクト担当者が注釈を保存してannotations.jsonをコミットすると、開発者はコードを取得するだけで元のページ上で確認できます。修正が完了したら、引き続きコミットします。Gitがバージョン、マージ、履歴を管理し、注釈ツールがページ上の現場の意図を伝えます。
シーン4：デザインまたは業務レビュー
レビュアーは「修正意見を追加」を選択し、署名を記入して提案を記録します。プロダクト要件がレビュー意見と混ざることはなく、開発者も誰からの意見なのかを把握できます。
シーン5：閲覧権限のみのレビュー会
注釈モードをオフにしても、参加者はアイコンをクリックして内容を確認できますが、編集はできません。すべてのマーカーをワンクリックで非表示にして、ページをすっきりした表示に戻すこともできます。
Skillのインストールと呼び出し方
このSkillは現在まだオープンソース化されていません。試してみたい場合：
「泥嚎的AI实验室」をフォローしてください。
ダイレクトメッセージでキーワード原型批注を送ってください。
Skillの圧縮ファイルと使用説明をお送りします。
圧縮ファイルを入手したら、個人用Codex Skillディレクトリに解凍します。
C:\Users\あなたのユーザー名\.codex\skills\prototype-notes
Codexのタスクを再度開くと、次のように呼び出せます。
$prototype-notesを使って、現在のHTMLプロトタイプに注釈機能を追加してください。
自然言語で直接指示することもできます。
「このVue/Viteプロジェクトにプロトタイプ注釈をインストールし、データをGit JSONに自動保存してください。本番ビルドには注釈コードを含めないでください。」
「この単一ページHTML Demoに要望説明と署名付きの修正意見を追加し、ローカルプレビューも起動してください。」
使用中によくある問題
1. ページは開くが、保存してもJSONが変わらない
多くの場合、通常の静的サーバーを使っていることが原因です。ブラウザからGitファイルに直接書き込むことはできないため、SkillがインストールしたHTML開発サービスを使うか、Viteで付属の開発プラグインを有効にする必要があります。ツールバーに「同期に失敗しました」と表示されても、下書きはローカルキャッシュに保持されます。
2. 別のパソコンに替えたら注釈が表示されない
.prototype-notes/annotations.jsonがGitにコミットされていること、相手が最新のコードを取得していることを確認してください。localStorageは自分の端末用のバックアップにすぎず、チームで共有する媒体ではありません。
3. 右クリックしても注釈メニューが表示されない
まず右下の「注釈」ボタンをクリックして、注釈モードに入ってください。通常モードではブラウザ標準の右クリックを維持し、普段の操作を妨げないようになっています。
4. ページのリニューアル後にマーカーの位置がずれた
注釈モードでアイコンを新しい位置へドラッグしてください。頻繁に構造を変更する重要な領域では、AIに安定したdata-prototype-anchorを追加させると、変わりやすいDOM階層への依存を避けられます。
5. Gitでannotations.jsonをマージすると競合が発生する
このツールは非同期の協業向けであり、リアルタイムの複数人編集には対応していません。注釈を始める前に最新ブランチを取得してください。複数人が同時に変更した場合は、マーカーIDと更新時刻を基準に競合を確認します。本当のリアルタイム多人同期が必要なら、データベースサービスの導入を検討してください。
6. 社内の要望やスクリーンショットが外部に流出するのが心配
注釈内容、レビュアーの署名、ページのルート、貼り付けた画像には機密情報が含まれる可能性があります。プロジェクトにはプライベートリポジトリを使用してください。ローカル開発サービスを信頼できないネットワークに公開せず、.prototype-notesディレクトリもオンラインに公開しないでください。
7. 画像が多く、ブラウザに保存できない
ランタイムは画像を圧縮し、1つの説明に追加できる画像数にも制限を設けていますが、スクリーンショットが増えるとJSONも大きくなります。問題に直接関係する画面だけを残し、大きな画像は先にトリミングしてから貼り付けることをおすすめします。
最後に
AIによって「ページを作る」ことはますます速くなりました。しかし、ページを納品可能な製品にするまでには、明確な要件、レビュー、協業が必要です。
このSkillを作ったのは、巨大なプロジェクト管理システムをもう1つ作るためではありません。小さく、具体的な不足を補いたかったからです。
意見が本当に生まれた場所に残るようにすること。