Miseru Pro 機能

比べて、
崩れを見つける。

Miseru で配信したスクリーンショットのベースラインと新規版を比較し、ビジュアルリグレッション(意図しない見た目の崩れ)を PR の中で自動検出する。レビュアーが承認すれば、そのままベースラインを更新できる。

並置 3 面表示(ベースライン / 新規 / 差分ハイライト) CLI・MCP で比べて承認承認でベースライン自動更新

仕組み

Miseru の配信に、
そのまま乗る。

Kurabe は Miseru の配信インフラ(D1 / R2)を共有する。追加のセットアップは不要。

Miseru でスクリーンショットを配信

npx miseru push --compare でアップロードすると、その画像がベースラインと比べられる。初回はベースラインとして登録される。

ベースラインと自動比較

同一論理名(ページ名 + ビューポート)の画像同士を比較し、差分ピクセル率を算出。

差分を確かめて承認

miseru diff --out で差分画像を保存して確かめ、意図した変化なら miseru approve で承認してベースラインを更新する。意図しない崩れなら、コードを直して push し直す。

できること

現在は CLI(npx miseru)・MCP・HTTP API から使える。

ベースライン・新規・差分ハイライトを並べて表示。どこがどう変わったかが一目でわかる。

MCP の miseru_diff は差分画像を返す(頼めばベースラインと新規の画像も返す)。AI エージェントがそれを見て、意図した変化かどうかを判断できる。

意図した変化なら、CLI・MCP・HTTP API で承認する。承認すればそのままベースラインが更新される。AI エージェントに渡すトークンから承認の権限を外せば、人が承認するまでベースラインは変わらない。

はじめる

Kurabe は Miseru の Pro プランに含まれる。GitHub でサインインすればすぐに使える。