AIエージェントでPixelayを使う

Pixelay用のHypermatic Agent Skillをインストールして、Codex、Claude Code、Grokなどの対応エージェントに正しい見た目のQAワークフローを教えます。

Hypermatic Agent Skillsは、AIエージェントにPixelayの簡潔な手順書を提供します。Pixelayのスキルは、非公開のリンクを保護し、報告する違いには見た目の根拠を求めながら、認証が必要なWebサイトや公開Webサイトの比較を案内します。

Hypermatic Agent Skillsをインストール

ターミナル用のインストーラーか、ターミナル不要のプロンプトをコピーします。1回のインストールで、Hypermaticの12個のプラグインのスキルがすべて入ります。

Pixelayのスキルをインストールする ​

  1. Hypermatic Agent Skillsを開きます。
  2. ターミナル用のコマンドをコピーするか、ターミナル不要のプロンプトをコピーしてエージェントに貼り付けます。
  3. インストール済みのスキルにhypermatic-pixelayが表示されていることを確認します。
  4. タスクにPixelayのスキルを使うよう、エージェントに依頼します。

スキルでできること ​

  • Figmaのフレームを、正しいWebサイトのURLとレスポンシブのブレークポイントに対応付ける。
  • 公開サイトや認証が必要なサイトの比較ワークフローを安全に準備する。
  • オーバーレイと計測を使って、見た目の違いを見つける。
  • スクリーンショット、計測結果、比較した正確なページを返す。

Quick Actions ​

サポートされている繰り返しのタスクは、プラグインのパネルを表示せずにPixelayのQuick Actionsで実行できます。リファレンスには、プレーンなフィールドの例、選択に関する要件、機械可読なレジストリが含まれています。インストール済みのプラグインのQuick Actionsの一覧から、サポートされているアクションを選んでください。結果は、通常の通知、ドキュメントの変更、保存されたファイルとして返されます。

プロンプトの例 ​

  • Use the Pixelay skill to compare these frames with our staging website.
  • Use the Pixelay skill to check these three responsive breakpoints.
  • Use the Pixelay skill to summarize the largest visual differences.

承認と確認 ​

エージェントはワークフローを案内できるほか、依頼した変更を承認すれば、利用可能なFigma、ブラウザ、コンピューター操作のツールを使って作業することもできます。非公開の比較リンクや認証情報は、公開される出力に含めないでください。スクリーンショットを比較しただけでは、元のWebサイトが変更されたことの証明にはなりません。

トライアルの上限 ​

Pixelayがトライアル回数を使い切ったと表示した場合、エージェントは再試行をやめ、Pixelayの料金と購入オプションを案内する必要があります。決済とライセンスの有効化はご自身で行い、Pixelayが有効になったらエージェントに伝えてください。

スキルを最新に保つ ​

Hypermatic Agent Skillsに戻り、Updateコマンドを使って、Pixelayの最新の安定版の手順をインストールします。