AIエージェントのUI品質を上げるLazyweb MCPの使い方

AIにUIを作らせると、どこかで見たようなデザインになる。それはAIが学習データの「平均値」からレイアウトを組み立てるためです。

この記事では、Claude CodeやCodexに2,570,000枚以上の実アプリ画面を参照させることができるMCPサーバー「Lazyweb」を紹介します。

この記事でわかること:

  • Lazyweb MCPが解決する課題
  • 6種類のデザインリサーチスキルの使い方
  • Claude Codeへのインストール手順
  • 料金と制限

AIのデザインがいつも平凡になる理由

Claude CodeやCodexは、コードを生成する速さは人間を大きく上回ります。ところが、UIの出来栄えは別の話です。フォントは無難で、レイアウトはどこかで見たパターンで、色使いも当たり障りがない。

理由は単純で、AIは「よく見るデザイン」を学習した結果として「よく見るデザイン」しか出力しません。Figmaの画面を直接読み込めるわけでも、Stripeや Notionがどんなオンボーディングフローを使っているかを把握しているわけでもないからです。

Lazyweb MCPはこの問題を、実際のアプリケーションのスクリーンショットデータベースをAIエージェントに接続することで解決します。

Lazyweb MCPとは

https://www.lazyweb.com/

Lazyweb MCPは、25,000社以上の企業のモバイルアプリおよびWebアプリのスクリーンショットを30万枚以上収録したデータベースへのアクセスをMCP経由で提供するツールです。Ali Abouelatta氏が個人で開発し、2026年3月に公開しました。

MCPサーバーを通じて、Claude CodeやCodex、Cursorなどのコーディングエージェントが直接このデータベースを検索できます。「pricing page」「onboarding flow」「dark mode dashboard」のように自然言語で検索すると、条件に合うスクリーンショットをローカルに取得してエージェントが参照できます。

6つのデザインスキル

Claude CodeプラグインとCodexプラグインの両方に対応しており、以下のスキルが含まれます。

/lazyweb-design-research — 指定したトピックについてLazywebとWebを横断的に検索し、競合分析・ベストプラクティス・アンチパターンをまとめたレポートを出力します。新しいUIを設計する前のリサーチに使います。

/lazyweb-quick-references — より軽量な参照取得スキルです。スクリーンショットをすばやく検索してパターン別にグループ化します。深い分析よりも「まず実例を見たい」という場面向けです。

/lazyweb-design-improve — 現在作成中のアプリのスクリーンショットを撮影し、類似する優れたアプリと比較します。具体的な参照画像と紐づいた改善案を最大5つ提案します。

/lazyweb-design-brainstorm — 自分のカテゴリとは意図的に「異なる」カテゴリを検索します。フィンテックアプリを作っているなら、ゲームやソーシャルアプリのパターンを探してきます。横断的なアイデア探索に有効です。

/lazyweb-add-inspo-source と /lazyweb-remove-inspo-source — 外部のインスピレーションライブラリをLazywebのリサーチに組み込んだり、外したりします。

これらのスキルが実行すると、.lazyweb/ ディレクトリにMarkdownレポートとスクリーンショット画像が保存されます。

Claude Codeへのインストール

https://github.com/aboul3ata/lazyweb-skill

Claude Codeはプラグインのマーケットプレイス追加とインストールの2ステップで完了します。

claude plugin marketplace add https://github.com/aboul3ata/lazyweb-skill
claude plugin install lazyweb@lazyweb

スキルは /lazyweb:lazyweb-quick-references のように名前空間付きで呼び出します。

Codexの場合はプラグインとして導入できます。MCPトークンは以下のコマンドで無料生成できます。

mkdir -p ~/.lazyweb
curl -sS -X POST https://www.lazyweb.com/api/mcp/install-token \
  -H "content-type: application/json" \
  -d '{}' | node -e "let s='';process.stdin.on('data',d=>s+=d);process.stdin.on('end',()=>require('fs').writeFileSync(process.env.HOME+'/.lazyweb/lazyweb_mcp_token', JSON.parse(s).token))"

生成したトークンはUIの参照ツールだけを有効化するものなので、課金や破壊的な操作には使えません。ただし公開リポジトリへのコミットは避けてください。

料金

Lazyweb MCPは人間にとっても、エージェントにとっても完全無料です。レート制限もサブスクリプションもありません。

公式サイトにも「Free for humans. Free for agents.」と明記されています。将来的な有料化の可能性はゼロではありませんが、現時点では課金のしくみ自体が存在しません。

既存のデザインリサーチとの違い

Mobbinのようなデザインリサーチツールはすでに存在します。Lazyweb MCPの差別化ポイントは、エージェントとの統合にあります。

従来のツールは人間がブラウザで検索して参照画像を手動でエージェントに渡す必要がありました。Lazyweb MCPはこのプロセスをエージェント自身が実行します。スキルを呼び出すだけで、検索・ダウンロード・レポート生成までが自動化されます。

Aliは公開にあたって「AIはコードを書くのは速いが、デザインの判断力がない。Lazywebはその判断力の部分を補う」と述べています（参考）。

まとめ

Lazyweb MCPはAIエージェントの弱点であるデザイン品質の問題を、実アプリの参照データで補完するアプローチです。Claude CodeやCodexを使ってUIを作る機会が多いなら、インストールしておく価値があります。完全無料で試せるため、導入コストも実質ゼロです。