Paperclip Agents を使用して Web サイトを構築して公開する方法1 min read

Paperclip は AI Web サイト チームを調整します。これは Web サイトのパブリック ホストではありません。 これを使用して、概要を細分化し、責任のある作業を割り当て、QA 証拠を収集し、承認をルートします。次に、レビューしたコードをホスティング プロバイダーを通じてデプロイするか、AgentGrid.io を通じて適切なアプリ アーティファクトを明示的に公開します。 「完了」に移行したタスクはパブリック展開ではありません。

ホームページ、特集ページ、問い合わせルートを含む 3 ページの製品発売サイトを考えてみましょう。デザイナー、コーダー、QA エージェント、およびマーケティング レビュー担当者は、承認基準を共有し、どのリビジョンがレビューされているかを知っている場合にのみ、並行して作業できます。このガイドでは、エージェント オーケストレーションを魔法のワンクリック サイト ビルダーとして扱うことなく、ハンドオフを構築する方法を説明します。

Paperclip と AgentGrid.io を使用して Web サイトを公開する方法

Paperclip は、エージェントの作業を割り当てとして整理し、成果物として出力を追跡できます。 AgentGrid.io は、結果の Web ページまたはドキュメントが検査され、承認された場合は公開される別の場所になります。これらの役割を折りたたまないでください。Paperclip タスクまたはそのアーティファクト レコードは、自動的には AgentGrid アーティファクトにはなりません。また、これらの製品は、統合が検証されていない限り、ネイティブ接続を持つものとして記述されるべきではありません。

1. 最初に宛先ワークスペースを作成します

AgentGrid で、出力をレビューするチームのワークスペースを作成または選択します。誰かを招待する前にチームのメンバーシップを確認してください。 Paperclip のエージェントを既存の実行パス上に維持し、担当者に成果物を転送させることができます。 AgentGrid のエージェントの招待は、互換性があり、意図的に構成されたアシスタントのオプションのルートであり、Paperclip のエージェント名簿や承認チェーンが AgentGrid に表示されるという証拠ではありません。エージェントを招待する場合は、ワンタイム リンクを送信する前に、AgentGrid の招待手順を使用し、不要な共有機能と公開機能のチェックを外してください。

Paperclip では、ランディング ページのコンセプト、必須セクション、事実主張のソース リンク、指名された人間のレビュー担当者など、課題に厳格な承認概要を与えます。割り当ての内部ステータスを公開の許可とは区別してください。完了とマークされたタスクは、要求された作業が検査のために納品されたことを意味し、公開が許可されたことを意味するものではありません。

2. 実際の出力を転送する

エージェントが終了したら、エージェントが生成したファイルまたは書き込まれたアーティファクトを検査します。小規模なサイトの場合は、関連ファイルを ZIP としてパッケージ化し、AgentGrid の ZIP インポートを使用します。テキスト レポートの場合は、サポートされているドキュメントをインポートするか、新しいドキュメントを作成します。レビュー担当者がペーパークリップ課題に接続できるように名前を付け、準備ができているもの、暫定的なもの、およびソース資料がどこに存在するかについての短いメモを含めます。ファイルがエージェントの環境でレンダリングされたのとまったく同じであると仮定するのではなく、AgentGrid プレビューを確認してください。

3. タスクレビューとリリースレビューを分離する

Paperclip を使用して、課題とそのステータスを追跡します。関係者に、AgentGrid アーティファクト自体を検査し、コンテンツ、リンク、アクセシビリティ、および外部向けの主張についてコメントを残すように依頼します。 AgentGrid はアーティファクト コメントをサポートしているため、実用的なフィードバックで公開されるものを参照できます。リビジョンを組み込み、新しいプレビューを確認します。タスクのスコープが変更された場合は、ペーパークリップの割り当ても更新しますが、どちらかのツールでの承認をもう一方のツールへの魔法のような同期として扱わないでください。

4. チェックしたバージョンを公開する

人間の所有者が公開リリースを承認した後にのみ、AgentGrid の公開フローを使用してください。結果のページを訪問者として開き、承認された成果物と比較します。 AgentGrid は、編集可能なワークスペース アーティファクトをパブリック デプロイメントから区別します。後続の変更には別の公開アクションが必要です。自動統合や非表示の承認ブリッジを要求せずに、プロセスでパブリック URL が必要になった場合に、パブリック URL を引き継ぎメモとしてペーパークリップ タスクに記録し直します。

曖昧な指示ではなく、チームにウェブサイトの目標を与える

まず、対象者、コンバージョン目標、必要なページ、ビジュアルリファレンス、コンテンツ所有者、アクセシビリティへの期待、ドメインまたはホスティング先などの狭い概要から始めます。最初のリリースでは、応答性の高いレイアウト、メタデータ、作業中の連絡ルート、および範囲外のものを指定します。

Paperclip でプロジェクトと目標を作成し、作業を所有するタスクに分割します。そのタスク モデルは、単一の責任ある所有者をサポートし、関係、スレッド、レビュー ステージをブロックします。ストラテジストまたは PM エージェントに計画を、デザイナーに視覚的な方向性を作成し、コーディング エージェントに実装を、QA エージェントにテストを、そして人間に起動の承認を割り当てます。これらは、事前にパッケージ化された Web サイト ビルダーではなく、ユーザーが構成するロールです。ペーパークリップ自作 ウェブサイトチームの例 は、機能ページ、実装によってブロックされた QA、およびレビューを経たプレビュー展開を示しています。

計画プロンプト: 「訪問者[目標]を支援する、[視聴者]向けの3ページのWebサイトを計画します。サイトマップ、ページレベルの承認基準、コンテンツギャップ、画像要件、およびタスクの依存関係マップを作成します。何も展開しないでください。各成果物に所有者を割り当て、人間が行う必要がある決定を特定します。」

エージェントを割り当てる前にリリース契約を定義する

オーディエンス、プライマリ変換、承認済みコピー、ページ インベントリ、ビジュアル アセット、必要なブレークポイント、ターゲット ホスト、および起動所有者を設定します。バージョン 1 では支払いやアカウントの作成を行わないなど、明示的な非目標を含めます。すべてのページに測定可能な受け入れ基準を与えます。特集ページではオファーについて説明し、連絡先リンクは有効な宛先に到達し、すべてのルートには意味のあるタイトルが付けられます。

ソース、デザイン、証拠をまとめて保管する

ビルダーにリポジトリまたは共有プロジェクトの場所を与えます。デザイナーはレイアウト仕様とアセットを提供します。コーダーは同じブリーフに対して実装します。タスクのコメントは、ブランチ、プル リクエスト、プレビュー、テスト結果にリンクする必要があります。 Paperclip はタスクにリンクされた出力を収集し、証拠を確認できますが、タスクの添付ファイルが自動的にライブ Web サイトまたは正規のソース リポジトリになるわけではありません。

アクセスを許可する前に境界を設定します。エージェントがシェル内の GitHub ID を通じてコードをプッシュできる場合、Paperclip のツールごとの「Ask first」コントロールは、それらのシェル Git コマンドを管理しません。リポジトリへのアクセスを制限し、GitHub のブランチ保護と PR レビューを要求します。デプロイメントコネクタの場合、ビルドログの読み取りと運用デプロイメントの開始を区別してください。 Paperclip の Netlify ガイダンスでは、展開および構成の変更については、最初に確認するかオフにすることを推奨しています。資格情報を Web サイトのソースから除外し、各エージェントにそのタスクに必要なアクセスのみを与えます。

ビルドプロンプト: 「承認されたサイトマップを [リポジトリ] に実装します。合意されたデザインを保持し、ナビゲーションとフォームを機能させ、タイトルと説明のメタデータをすべてのページに追加します。ブランチで作業し、プロジェクトのチェックを実行し、PR とプレビュー URL を Paperclip タスクに添付し、本番展開の前に停止します。」

個別の問題ステータス、ソース管理、公開

ペーパークリップには、各号の所有者と引き継ぎに伴う証拠が記録されます。リポジトリには実装が保持されており、ホスティング プロバイダーがデプロイされた Web サイトを実行します。各問題を正確なブランチ、PR、プレビュー、テスト ログ、スクリーンショットにリンクします。タスクが「最新」のみを参照している場合、レビュー担当者は、最終的にデプロイされたブランチと一致しないプレビューを誤って承認する可能性があります。

「完了したようです」というメッセージではなく、レビューをゲートにします

QA にデスクトップとモバイルで実際のプレビューを開くよう依頼してください。最初の画面のプロミス、キーボード ナビゲーション、代替テキスト、壊れたリンク、フォームの動作、読み込み、コンソール エラー、ページのメタデータを確認します。マーケティング担当者に製品の宣伝文句と CTA を検証してもらいます。再現可能な証拠を記録します。フォームにバックエンドが必要な場合は、送信をエンドツーエンドでテストします。

Paperclip の実行ポリシーは、実行者がタスクに完了のマークを付けようとしたときに、問題をレビュー担当者にルーティングし、次に承認者にルーティングできます。要求された変更は元の実行者に返されます。公開リリースには人間による承認ステージを使用し、レビュー担当者が最終プレビューとターゲット ドメインを検査するまで、タスクの承認では公開を許可しないことを指定します。

QAプロンプト: 「狭いモバイル ビューポートとデスクトップで、受け入れ基準に照らしてプレビューをテストします。合格、不合格、証拠 URL またはスクリーンショット、および再現手順の表を返します。承認またはデプロイは行わず、失敗を実装所有者に送り返します。」

発売のための実用的な受け入れチェックリスト

• 製品: ヒーローの約束、価格設定、CTA の宛先を承認されたコピーと比較します。
• 機能: ナビゲーションをクリックし、テスト コンタクト リクエストを送信し、成功または失敗のパスを検査します。
• レスポンシブデザイン: 狭い画面、デスクトップ、コンテンツのオーバーフロー、画像のトリミング、および読み取り可能なスペースを確認します。
• アクセシビリティ: キーボードの順序、ラベル、代替テキスト、意味上の見出し、コントラストを確認します。
• 検索と信頼性: ルート固有のタイトルと説明、リンク切れ、コンソール エラー、プロダクション アセットのロードを確認します。

承認されたビルドを実際のパブリック URL にデプロイします。

最終レビューの前に制作先を選択してください。従来のコードベースの場合は、リポジトリを Netlify や Vercel などのホストに接続し、そのビルド設定と環境変数を確認し、最初にホストでプレビューを生成します。人間の承認後、そのホストの文書化されたワークフローを使用して、レビューされたリビジョンをプロモートまたはデプロイします。ログアウトした状態で運用 URL を開きます。ナビゲーション、フォーム、証明書、ドメイン、デプロイされたリビジョンをテストします。 Paperclip をサーバー上で実行すると、オーケストレーション アプリにアクセスできるようになるだけです。ウェブサイトは公開しません。

Web サイトが適切な HTML または React アプリ アーティファクトである場合、 AgentGrid.io 人々と接続されているエージェントが同じバージョンを編集する共有場所にすることができます。プロジェクト フォルダーまたは ZIP をインポートするか、接続されているエージェントに目的のワークスペースにアーティファクトを作成させます。そこでレンダリングされたアプリと履歴を確認します。アーティファクト リンクは、ワークスペースにアクセスできるユーザーのみに公開されます。パブリッシュは、パブリック URL を作成する別の明示的なアクションです。接続されたエージェントには、公開機能と人間による公開要求が必要です。その後の編集は、再公開されるまで公開ページに公開されません。カスタム ドメインには、対象となる有料プランと検証済みの DNS が必要です。これは代替公開ルートであり、Paperclip が自動的に AgentGrid.io と統合されるという主張ではありません。

起動プロンプト: 「人間が承認したリビジョンは[コミットまたはアーティファクトのバージョン]です。[指定されたホスト]にデプロイするか、明示的な承認後にのみ[指定されたAgentGrid.ioアーティファクト]を公開してください。パブリックURL、デプロイされたリビジョン、ビルド結果、およびスモークテストチェックリストを返します。ターゲットまたは権限が欠落している場合は、停止して尋ねてください。」

プロモーションでは特定のリビジョンを参照する必要があります

リリース前に、承認されたコミットまたはアーティファクトのバージョン、ターゲットのホストまたはワークスペース、ドメイン、および公開を開始できるユーザーを記録します。ホストがプレビュー URL を生成する場合は、プロモートする前に、同じリビジョンの最終プレビューを検査してください。その後、特権セッションを使用せずにパブリック URL を開き、重要なスモーク テストを繰り返します。運用設定で問い合わせルートまたはアセットが壊れた場合に備えて、ロールバック参照を保存します。

チームは各レイヤーをいつ使用する必要がありますか?

ペーパークリップ: 複数のエージェントに割り当てられた問題、依存関係、レビュー、および責任ある人間の起動所有者が必要な場合に選択します。ソース管理や Web ホストの代わりとなるのではなく、チームに何をすべきかを指示し、作業を追跡します。

リポジトリとホスト: サイトに既存のエンジニアリング リリース プロセス、サーバー機能、インフラストラクチャ設定、または確立されたロールバック制御が必要な場合は、このパスを選択します。レビューされたコミットとデプロイメントの記録により、ライブ バージョンが特定されるはずです。

承認済みバージョンから続行する

Paperclip は課題とレビューを所有します。リポジトリとホスト独自の従来の運用環境。 AgentGrid.io は、共有され、バージョン管理された成果物とその意図的な公開を保持できます。エージェントからサイトへの別のワークフローの比較については、次のサイトを参照してください。 Grok ボット公開ガイド;共有アーティファクトの背後にあるハンドオフの問題については、以下を参照してください。 当社のAgentGrid.ioの紹介;デザインファーストのパスについては、を参照してください。 Claude Design Web サイトの公開。

承認された Web サイトを 1 か所に保管する準備はできていますか? AgentGrid.io アーティファクトを作成する、適切なアクセス権を持つ次の共同編集者を招待し、公開バージョンがレビューに合格した場合にのみ公開します。