Sitepeel

Claude Code と Codex 向け Sitepeel

コーディングエージェントに、あらゆる Web サイトの DESIGN.md、クローン用プロンプト、AI 生成コンテンツの粗雑さチェック、ファイル、フォント、色、技術スタックを提供します。

sitepeel.dev · MCP サーバー · DESIGN.md ライブラリ · Chrome 拡張機能

これは、Claude Code と OpenAI Codex 向けの Sitepeel プラグインです。Sitepeel の MCP サーバーにエージェントを接続すると、実際のブラウザーで公開 Web ページを開いて測定できます。エージェントは、サイトの DESIGN.md をプロジェクトに保存したり、ページのレイアウトを再構築したり、ランディングページにAI生成コンテンツの粗雑さがないか確認したり、ロゴやアイコンセットを取得したり、サイトで使われているフォント、色、フレームワークを調べたりできます。このプラグインには、よくある作業向けの短いコマンドも5つ追加されます。

Claude Code にインストールする

Claude Code のセッションで、このリポジトリをマーケットプレイスとして追加し、プラグインをインストールします。

/plugin marketplace add Josephbadigar/sitepeel
/plugin install sitepeel@sitepeel

Claude Code 2.1.275 以降では、次の1行で両方を実行できます。

/plugin install sitepeel --marketplace Josephbadigar/sitepeel

ターミナルから実行する場合：

claude plugin marketplace add Josephbadigar/sitepeel
claude plugin install sitepeel@sitepeel

インストール後、新しいセッションを開始します。/mcp を実行すると、Sitepeel サーバーとそのツールを確認できます。

Codex にインストールする

このリポジトリをプラグインマーケットプレイスとして追加し、プラグインをインストールします。

codex plugin marketplace add Josephbadigar/sitepeel
codex plugin add sitepeel@sitepeel

Codex 内で /plugins を開き、Sitepeel タブを選んでインストールすることもできます。その後、新しいセッションを開始すると、Codex がスキルとツールを読み込みます。

サインインする

エージェントが初めて Sitepeel を使うとき、ブラウザーが開き、Sitepeel にサインインできます（無料）。その後は接続されたままになります。コピーする API キーはありません。

コマンド

Claude Code では、インストール後に次のコマンドを入力します。Codex では、同じスキルが $sitepeel:design-md、$sitepeel:clone などの名前で使えます。または、普通の言葉で依頼することもできます。

コマンド	機能
/sitepeel:design-md stripe.com	サイトの DESIGN.md をプロジェクトのルートに保存します。これにより、新しい UI でサイトの色、フォント、間隔が反映されます
/sitepeel:clone linear.app/pricing	サイト独自のテキストと画像のプレースホルダーを使って、ページの見た目とレイアウトをプロジェクト内に再構築します
/sitepeel:slop example.com	ページがどの程度 AI 生成に見えるかを（0〜100で）採点し、そう見える要素とその修正方法を一覧表示します
/sitepeel:assets vercel.com svg	ページの画像、SVG、アイコン、動画などのファイルを一覧表示し、選択したものをダウンロードします
/sitepeel:inspect notion.com	ページのフォント、カラーパレット、技術スタックを調べます

コマンドを使う必要はありません。プラグインをインストールしたら、「linear.app の DESIGN.md を取得して、自分の設定ページのスタイルをそれに合わせて変更して」のように依頼するだけで使えます。

ツール

このプラグインは、https://sitepeel.dev/mcp のリモート MCP サーバーを1つ追加し、次のツールを提供します。

ツール	返される内容
get_design_md	Google Stitch 形式のサイトの DESIGN.md：色、書体、余白、角丸、コンポーネント
search_design_library	名前、フォント、色、スタイル、カテゴリに一致する、DESIGN.md ライブラリ内のブランド
clone_prompt	ページの見た目とレイアウトを再現するためのプロンプト
check_ai_slop	0〜100のスコア、判定、見つかった特徴とそれぞれの修正方法、および修正用プロンプト
extract_assets	画像、SVG、アイコン、動画、音声、フォント、Lottie、3D ファイルとダウンロードリンク
find_fonts	フォントファミリー、それぞれの使用箇所、ウェイト、サイズ、書体スケール
get_color_palette	役割、16進数の値、CSS 変数を含むカラーパレット
detect_tech_stack	フレームワーク、CMS、ホスティング、ライブラリ、分析ツールと検出された根拠

ページ全体のスクリーンショットやレスポンシブ対応の確認など、今後さらにツールが追加される予定です。サーバーで利用可能になると、更新しなくてもプラグインに自動で表示されます。

各結果には、sitepeel.dev の該当ページへのリンクが含まれています。利用する際は「Sitepeel (sitepeel.dev)」をクレジットとして記載してください。

その他のアプリ

リモート MCP サーバーに対応しているアプリであれば、このプラグインがなくても Sitepeel を利用できます。https://sitepeel.dev/mcp を Streamable HTTP サーバーとして追加してください。例：

claude mcp add --transport http sitepeel https://sitepeel.dev/mcp
codex mcp add sitepeel --url https://sitepeel.dev/mcp

Cursor、VS Code、Windsurf、Gemini CLI、Zed、Claude Desktop、claude.ai のセットアップ方法は sitepeel.dev/mcp をご覧ください。

このプラグインがマシン上で行うこと

このプラグインには独自のコードはありません。含まれているのは次のものです。

• エージェントの接続先として https://sitepeel.dev/mcp を指定する .mcp.json
• skills/ 内の5つのスキル。エージェントに呼び出す Sitepeel ツールを指示するプレーンテキストの指示です
• Claude Code 用 (.claude-plugin/) と Codex 用 (.codex-plugin/、.agents/plugins/) のマニフェスト

エージェントがツールを呼び出すと、指定したページのアドレスが sitepeel.dev に送信され、公開ページが開かれて結果が返されます。プロジェクトのファイルは送信されません。たとえば DESIGN.md の保存やファイルのダウンロードを依頼した場合に限り、スキルがプロジェクトに書き込みます。プライバシーポリシー と利用規約をご覧ください。

知っておくとよいこと

• 公開ページのみ利用できます。ログインが必要なページには、ブラウザーで開いているページを読み取る Sitepeel Chrome 拡張機能 をご利用ください。
• 新しいページの測定には約15〜40秒かかります。ツールが「pending」と返した場合は、エージェントが再度呼び出します。
• 結果は公開ページを独自に測定したものであり、サイト所有者の公式なデザインシステムではありません。サイトのテキスト、画像、ロゴの権利はサイト所有者に帰属します。
• 160を超えるブランドの、すぐに使える DESIGN.md ファイルが DESIGN.md ライブラリ にあります。スタイルガイドは sitepeel.dev/design-md/examples でご覧いただけます。

サポート

ご質問や問題がある場合は、[email protected] または sitepeel.dev/contact までお問い合わせください。

ライセンス

このリポジトリ内のプラグインファイルには MIT License が適用されます。sitepeel.dev の Sitepeel サービスには、別途利用規約が適用されます。