PixelCheck: AIエージェントがウェブページを視覚的に検証できるnpmパッケージ

PixelCheckは、AIエージェントが自分たちが生成したWebページを視覚的に検証できるようにするnpmパッケージです。あなたが手動でボタン、フロー、ロケール、デバイスをチェックする代わりに、エージェントがページを開き、ボタンをクリックし、フォームに入力し、構造化データを抽出し、UIを採点します。すべて自律的に行います。

存在理由

著者はコードを書かないが、Claudeを使ってフロントエンドコードを作成している。しかし、Claudeは「目が見えない」というボトルネックに直面した。ログインフロー、日本語翻訳、アラビア語のRTLレイアウトなど、すべての確認に手動でブラウザを開く必要があった。スクリーンショットを撮り、貼り付け、問題を説明するのに毎週何時間も費やしていた。PixelCheckはそのループをなくすために作られた。

主な機能

• ページを開き、自然言語コマンドで操作
• ボタンをクリックし、フォームに入力
• 任意のページから構造化データを抽出
• UIを採点（実際の人間のように）
• ページの2つのバージョンを比較
• アプリを異なるユーザーペルソナで操作：東京の主婦（MacBook）、ラゴスの起業家（Tecno）、72歳のアメリカ人退職者（iPad）、アラビア語のビジネスマン（RTL）、上海の学生（Xiaomi）

技術詳細

• ローカルで動作 — SaaSは介在しない
• 著者はゼロ行のコードを書いていない；すべての文字はClaude Codeによって生成された
• すべてのロジックは平易な英語でClaude Codeに記述され、それが動作するソフトウェアに変換された

誰のためか

フロントエンド作業にAIコーディングエージェントを使用し、手動スクリーンショットなしで自動視覚検証を求める開発者向け。

試してみる

npmで公開中。著者はこれを、コードを一行も書かずに、製品インサイトをClaude Codeでソフトウェアに変換できることの証明として提供している。