• 安定性
  • データ
  • 自動化
  • 人間による確認

AIを活用してUIテスト用の安定したアセットを作成する方法

Lorem Picsumをエージェントに接続して、画像のランダムな変更によるテストの失敗を防ぎましょう。シード文字列を利用することで、UIコンポーネントに特定のビジュアルを固定して使用できます。

このページについてAIに聞く

すぐに答え

UIテストで毎回同じ画像を取得するにはどうすればよいですか?

エージェントに特定のシード文字列を指定して、一意で再現可能な画像をリクエストしてください。これにより、ランダムな写真ではなく、常に同じコンテンツを自動テストで使用できるようになります。テストスイートに安定したURLとメタデータを提供できます。

実行結果

この設定で実現できること

AIが画像の取得を代行するため、あなたはテストロジックの構築に集中できます。

安定性

予測可能なテスト実行

AIがシード文字列を使用して、毎回同一の画像を呼び出します。予期しないビジュアルの変化によるUIテストの失敗を防ぎます。

データ

画像メタデータへのアクセス

エージェントが取得した画像の詳細情報を抽出できます。指定したサイズや種類が正しく使用されているか検証するのに役立ちます。

自動化

URLの直接生成

AIが画像へのダイレクトリンクを生成します。生成されたリンクは、そのままテストコードやコンポーネントのプロパティに組み込めます。

人間による確認

手動によるビジュアル確認

最終的なUIの確認は人間が行います。AIはアセットを提供しますが、レイアウトが適切かどうかを判断するのはあなたです。

ワークフロー

画像リクエスト時にAIが行うプロセス

エージェントは、テスト要件と画像プロバイダーを繋ぐ架け橋となります。

  1. シード要件の特定

    既存のテストスイートやデザイン要件に適合する、特定のシード文字列をエージェントが決定します。

    get_seed_info
  2. 画像リンクの取得

    エージェントがプロバイダーを呼び出し、指定されたシードに関連付けられた画像の直接URLを取得します。

    get_seed_image_url
  3. 画像プロパティの検証

    画像の詳細を確認し、サイズや内容がテストの期待値と一致しているかをエージェントが検証します。

    get_seed_info
  4. コードへの提供

    最終的なURLまたはメタデータを、エージェントのワークフローやチャット画面に直接提供します。

    get_seed_image_url

試してみる

以下のプロンプトをコピーして開始できます。

これらのプロンプトを使用して、テストアセットの生成を開始しましょう。

出発点

括弧内のテキストを、実際の画像サイズやシード番号に書き換えて使用してください。

Lorem Picsum Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_BpGvsd3F7ZiU2FdSC6HlwGpJk3sdjmn8ZITZjym3/mcp

Claude Desktop

以下の手順で数秒で接続できます。

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Lorem Picsum capabilities are ready to use.
設定 · claude_desktop_config.jsonコピー
{
  "mcpServers": {
    "lorem-picsum-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_BpGvsd3F7ZiU2FdSC6HlwGpJk3sdjmn8ZITZjym3/mcp"
    }
  }
}
チャットにコピー04
  • シード 'test-123' を使用して、400x400の画像のURLを取得してください。

  • シード 'ui-component-alpha' の画像のメタデータを教えてください。

  • ダッシュボードのテスト用に、800x600の安定したプレースホルダーが必要です。シード 'dashboard-bg' を使用してください。

  • シード 'profile-avatar-01' を使用している画像のサイズを確認してください。

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

ここから始める

Lorem Picsumを一度接続すれば、あとは指示するだけです。

一度接続するだけで、エージェントは画像ライブラリ全体にアクセスできるようになります。認証情報は暗号化され、安全に管理されます。

Lorem PicsumをAIに接続する

FAQ

FAQ

  • 01

    同じシードを使用した場合、画像が変わることはありますか?

    いいえ。同じシード文字列を使用すれば、エージェントは常に全く同じ画像を呼び出します。

  • 02

    AIはこれらの画像をローカルドライブにアップロードできますか?

    いいえ。AIができるのは、画像のURLとメタデータを提供することのみです。

  • 03

    これを使ってカスタムAIアートを生成できますか?

    いいえ。このツールは、Lorem Picsumライブラリから特定のシードに基づいたプレースホルダー画像を取得するためのものです。

  • 04

    AIが画像サイズを自動で決めてくれますか?

    AIに特定のサイズを要求することは可能ですが、プロンプト内で必要な寸法を明示的に伝える必要があります。

  • 05

    AIはプロバイダーから画像を削除できますか?

    いいえ。AIには画像の情報を読み取り、URLを取得する権限しかありません。

  • Lorem Picsumについて他に質問がありますか? Lorem Picsum Connectorの全機能を見る

『Lorem Picsum』を Claude、Cursor、ChatGPT などに接続