
2026/03/24 16:46
**Show HN: ProofShot – AI コーディングエージェントに UI を検証させるための「目」** - **概要** ProofShot は、人工知能が生成したコードを開発中に視覚的に検査し、ユーザーインターフェース(UI)を自動で検証できるツールです。 - **仕組み** 1. AI が UI プロトタイプを構築します。 2. ProofShot がそのインターフェースのスクリーンショットを取得します。 3. 取得した画像と期待されるレイアウトやデザイン仕様を比較し、差異があれば自動的にフラグ付けします。 - **メリット** - AI が生成するコードの手作業による視覚品質保証(QA)を排除。 - レイアウトバグを早期発見してイテレーションサイクルを高速化。 - 複雑な UI コンポーネント間で一貫性を保ちやすくします。 - **始め方** リポジトリへアクセスし、プロジェクトをクローン後、セットアップガイドに従って ProofShot を CI/CD パイプラインまたはローカル開発環境に統合してください。 *オープンソース – コントリビューション歓迎!*
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
要約
ProofShotはオープンソースでエージェント非依存のCLIです。ブラウザセッション(
session.webm)を自動的に記録し、ステップごとのスクリーンショットを取得し、サーバーログを収集して、すべてのアーティファクトをタイムスタンプ付きフォルダにまとめます。ワークフローは proofshot start、proofshot stop、proofshot exec、proofshot diff、proofshot pr などのコマンドで駆動されます。
Claude Code、Cursor、Codex(OpenAI)、Gemini CLI、Windsurf、GitHub Copilot、およびシェルコマンドを実行できる任意のエージェントに対応しています。使用前にユーザーは
proofshot install を実行してインストール済みのAIツールを検出し、必要なスキルファイル(例:~/.claude/skills/proofshot/SKILL.md や ~/.cursor/rules/proofshot.mdc)を適切な場所に配置します。
アーティファクトには
viewer.html、SUMMARY.md、ステップスクリーンショット、session-log.json、server.log、および console-output.log が含まれます。ツールは10以上の言語(JavaScript/Node.js、Python、Ruby/Rails、Go、Java/Kotlin、Rust、PHP、C#/.NET、Elixir/Phoenix)にわたるエラー検出も提供します。
テスト用サンプルアプリケーション(
sample-app、todo-app、chat-app)がリポジトリとともに配布されます。ProofShotはTypeScript/ESMで構築されており、tsupでバンドリングし、vitestでテストを実行します。MITライセンスです。
今後の拡張として、
proofshot pr(GitHub CLI gh が必要)を介してアーティファクトをGitHubプルリクエストにインラインコメントとしてアップロードする機能と、ffmpeg を使用した .webm ビデオを .mp4 へ変換するオプションがあります。AI生成コードの視覚的証拠を提供することで、ProofShotは信頼性向上、デバッグ支援、およびAIコーディングワークフローにおける品質保証の改善を目指します。本文
ProofShot – オープンソースでエージェント非依存の CLI、AI コーディングエージェントに「視点」を提供
概要
ProofShot は軽量な CLI で、Claude Code、Cursor、Codex、Gemini CLI、Windsurf、GitHub Copilot など、あらゆる AI コーディングエージェントと組み合わせて使用できます。コード生成からビジュアル検証までのサイクルを完結させます。
ブラウザセッションを記録し、スクリーンショットを撮影、コンソール/サーバーのエラーを収集して、すべてを人間がレビューできるアーティファクトとしてまとめます。
主な機能
| 機能 | 説明 |
|---|---|
| ブラウザ記録 | ヘッドレス(またはヘッダ付き)Chromium でビデオキャプチャ () |
| インタラクティブビューア | – スクロールバー、タイムライン、操作マーカー、コンソール/サーバーログタブ |
| 自動ワークフロー | 3 段階の CLI: → エージェント操作 → |
| エラー検出 | サーバーログを解析し、10 税以上の言語(JS/Node, Python, Ruby/Rails, Go, Java/Kotlin, Rust, PHP, C#/.NET, Elixir/Phoenix 等)に対応 |
| GitHub PR 統合 | でアーティファクトをアップロードし、PR に整形済みコメントを投稿 |
| ベンダーロックイン/クラウド依存なし | アーティファクトはローカルに保存され、アップロードするまで外部へ送信されません |
クイックスタート
npm install -g proofshot # CLI + エージェントブラウザ(ヘッドレス Chromium) proofshot install # AI ツールを検出し ProofShot スキルをインストール
3 段階のワークフロー
-
開始
proofshot start \ --run "npm run dev" \ --port 3000 \ --description "Login form verification" -
テスト – エージェントがブラウザを操作(
を例に)agent-browseragent-browser snapshot -i agent-browser open http://localhost:3000/login agent-browser fill @e2 "test@example.com" agent-browser click @e5 agent-browser screenshot ./proofshot-artifacts/step-login.png -
停止
proofshot stop
アーティファクトは
./proofshot‑artifacts/<timestamp>/ に生成されます。
| ファイル | 説明 |
|---|---|
| 完全なビデオ録画 |
| インタラクティブビューア |
| Markdown レポート(エラー、スクリーンショット、動画) |
| 重要瞬間のスクリーンショット |
| アクションタイムライン |
| 開発サーバーの stdout/stderr |
| ブラウザコンソール出力 |
コマンド一覧
| コマンド | 用途 | 例 |
|---|---|---|
| インストール済みエージェント用にスキルを検出・設定 | , , |
| 検証セッション開始 | , , |
| 記録停止とアーティファクト生成 | |
| agent‑browser へのパススルーで自動ログ記録 | , |
| ベースラインとのビジュアル回帰比較 | |
| アーティファクトアップロードと PR コメント投稿 | , |
| アーティファクトディレクトリを削除 |
前提条件:GitHub CLI (
) がインストールされ、認証済みであることが必要です。gh
が利用可能ならffmpegは自動的に.webmに変換されます。.mp4
対応エージェントとスキルのインストールパス
| エージェント | スキル配置場所 |
|---|---|
| Claude Code | |
| Cursor | |
| Codex (OpenAI) | |
| Gemini CLI | |
| Windsurf | |
すべてのスキルはユーザーレベルでインストールされ、プロジェクト単位の設定は不要です。
使ってみる
git clone https://github.com/AmElmo/proofshot.git cd proofshot npm install && npm run build && npm link # サンプルアプリ cd test/fixtures/sample-app npm install
AI エージェントを
sample-app ディレクトリで起動し、次のプロンプトを入力します。
「ProofShot でサンプルアプリを検証してください。ホームページから開始し、ヒーローセクションを確認し、ダッシュボードへ移動してメトリックをチェック、その後設定に行きプロフィール名を更新してください。各ページのスクリーンショットを撮ってください。」
またはエージェントなしで自動テストスクリプトを実行できます。
アーティファクトは
proofshot-artifacts/ に生成されます。
エラー検出
ProofShot はサーバーログから既知のエラーパターン(
src/utils/error-patterns.ts を参照)を検索します。必要に応じて新しいパターンを追加してください。
ドキュメント
- アーキテクチャと設計上の決定
- サンプルアプリ(SaaS ダッシュボード、カンバンボード、チャットインターフェース)
コントリビュート
- 言語:TypeScript (ESM‑only)
- ビルドツール:tsup
- テストフレームワーク:vitest
npm install npm run build # 変更後に実行 npm test # テストを走らせる npm run dev # ウォッチモードで開発
ライセンス
MIT © ProofShot