AIでサイト構造を診断する方法：Plasmic MCPコネクターを活用

はい。AIがPlasmic MCPを使用してページモデルとHTMLレンダリングを取得します。取得した要素ツリーと設計上の意図やルーティングロジックを照合することで、構造の不一致やリンク切れを検出します。検出された問題は、明確なリストとして提示されます。

1. 01

   プロジェクトデータの取得

   Plasmicプロジェクトから、コンポーネントの階層構造とページリストをすべて取得します。

   get_model
2. 02

   ビューのレンダリング

   特定のページのHTMLを生成し、DOM内での要素の実際の配置を確認します。

   render_html
3. 03

   構造の照合

   モデルデータとレンダリング結果を比較し、不一致がないかを確認します。

   get_modelrender_html
4. 04

   エラーのレポート

   ルートの不備やレイアウトの問題を、分かりやすいリストにまとめて報告します。

   render_html

Plasmic Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_3sKdf5JGlcT8ZlPYWT5zfXjfJKOMYRYhuIjG3Rng/mcpコピー

Claude Desktop

以下の手順で数秒で接続できます。

1. 1In Claude Desktop, open Settings → Connectors.
2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3. 3Click Add and start a new chat — Plasmic capabilities are ready to use.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "plasmic-visual-headless-page-builder-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_3sKdf5JGlcT8ZlPYWT5zfXjfJKOMYRYhuIjG3Rng/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

Plasmicアカウントを連携するだけです。認証情報は暗号化されて保持されるため、すぐにAIへサイト構造に関する質問ができるようになります。

• 01

  AIはPlasmicのデザインを変更できますか？

  いいえ。AIができるのはモデルとHTMLの読み取りのみです。デザインの変更は、すべてPlasmic上でご自身で行う必要があります。

• 02

  AIはプライベートなプロジェクトデータにアクセスしますか？

  AIは、ユーザーの質問に答えるためにツールを通じて明示的に要求したデータのみにアクセスします。

• 03

  壊れたCSSを修正できますか？

  いいえ。HTMLとモデルを比較してレイアウトの異常を特定することはできますが、AIがCSSを書き換えたり、変更を反映させたりすることはできません。

• 04

  ルートが壊れていることをAIはどうやって判断しますか？

  モデル内のページリストと、実際に利用可能なHTMLレンダリング結果を照合することで、欠落している箇所を見つけ出します。

• 05

  AIがページを削除することはできますか？

  いいえ。Plasmicプロジェクトを削除したり変更したりするためのツールは提供されていません。

• Plasmicに関するその他の質問 Plasmicコネクターの全機能を見る