vlmkit: フロントの見た目の崩れを決定的に検出して、エージェントに直させる
npx vlmkit check integrity <URL> で3つの画面幅を一度に検査し、はみ出し・文字の重なりなどを機械が読める修正リストで返す。エージェントは「CLEAN」になるまで直して再実行する。
スクショを見せて「崩れてない？」と聞くより、何がどこで壊れたかを要素とピクセル位置つきで返すほうが、モデルの性能に関係なく直しやすい（作者 @mizchi は「視覚情報を圧縮・整形して、どう壊れたかを LLM に伝えるもの」と説明）。Tailwind から CSS への置き換えとその確認の手順も入っている。
手順
bash
npm install -D @mizchi/vlmkit # Node 24 以上
npx playwright install chromium # 初回のみ
# 1. 参照画像も設定も API キーもなしで、3つの画面幅を検査
npx vlmkit check integrity http://localhost:3000/
# -> verdict: DEFECTS [page-overflow-x] @768: main > p (right edge 924px) など
# 直して再実行し、verdict: CLEAN になれば完了
# 2. 編集で見た目がどう変わったかを追う（初回がベースライン）
npx vlmkit snapshot http://localhost:3000/ --output .vlmkit/snapshots
npx vlmkit snapshot approve --output .vlmkit/snapshots # 意図した変更なら承認エージェントへの組み込み:
- MCP:
.mcp.jsonに{"mcpServers":{"vlmkit":{"command":"npx","args":["-y","@mizchi/vlmkit","mcp"]}}} - スキル:
npx skills add mizchi/vlmkit、Claude Code なら/plugin marketplace add mizchi/vlmkit→/plugin install vlmkit@vlmkit。入れた後は「このモックを実装して」「レスポンシブとキーボード操作を確認して」と普通に頼めば、中の13種類の手順から合うものが選ばれる
ほかの検査: check copy --manifest（文言が仕様どおりか）、check breakpoints --sweep、check interactions（Enter で動かないボタンなど）、check a11y contrast、verify markup --target design.png（デザイン画像との一致）。
注意点
heal markupなど[key]印の機能だけ OpenRouter／Gemini／Anthropic の API キーが要る- 見た目の確認はスクショ比較とレビューだけで足りる、という声もある（@voluntas）。崩れ方を言葉にしにくい UI や、弱いモデルに直させるときに効く