Miseru Pro 機能

比べて、
崩れを見つける

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

並置 3 面表示(ベースライン / 新規 / 差分ハイライト) 自然言語での差分サマリ(AI 生成) 承認でベースライン自動更新
仕組み

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

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

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

既存の npx miseru push でアップロードした画像がそのまま Kurabe の比較対象になる。

ベースラインと自動比較

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

ダッシュボードで承認/却下

app.miseru.dev の Kurabe ビューで差分を確認し、問題なければ承認してベースラインを更新する。

できること

崩れを、見た目のまま捉える。

現在は Miseru ダッシュボード(app.miseru.dev)内の Pro 機能として提供中。

並置3面表示

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

自然言語差分サマリ

「ボタンの色が変わった」「見出しの行間が広がった」など、差分を LLM が自然言語で要約する。

承認フロー

レビュアーがダッシュボードで承認/却下。承認すればそのままベースラインが更新される。

はじめる

比べる。
それだけで、崩れに気づける。

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