MCP Prototype

🚀 MCP-Prototype

このMCPツールは、AIにHTMLを基に直接プロトタイプを設計させることができます。figmaやaxureがなくても、迅速にソフトウェアのプロトタイプを構築することが可能です。

✨ 主な機能

• ナビゲーションバーを提供します。
• マーカーとプロトタイプを分離します。
• ページ追加説明をサポートします。

📦 インストール

AI MCPの設定

AI MCPの設定に以下の内容を追加します。

{
  "mcpServers": {
    "mcp-prototype": {
      "command": "npx",
      "args": [
        "-y",
        "@llxxbb/mcp-prototype"
      ]
    }
  }
}

ローカルデバッグ

    "mcp-prototype": {
      "command": "npm",
      "args": [
        "--prefix",
        "path/to/mcp-prototype",
        "start:mcp"
      ]
    }

💻 使用例

基本的な使用法

AI提示語の提案

プロトタイプ設計前には、以下のように要求を提示します。

要求：

• プロトタイプツールの規範に従ってプロトタイプを設計してください。

• 要件：abcd...

使用中にプロトタイプを表示したい場合は、直接以下を入力します。

展示原型

プロトタイプの表示はバックグラウンドで起動するため、複数回コマンドを入力する必要はありません。そうしないと、複数のインスタンスが起動します。

閉じる場合は、以下を入力します。

停止展示

または

关闭原型

高度な使用法

使用規範

• ナビゲーションバー
  • 階層定義：プロトタイプが存在するファイルシステムのディレクトリ構造と1対1で対応しています。
  • プロトタイプ名：プロトタイプページのタグの data-nav-name データ属性値から取得されます。省略した場合は、ファイル名が使用されます。
• 機能注入：MCP-Prototypeは各HTMLページに以下を注入します。
  • <base href="/html/"> タグ。「参照」パスの正しさに注意してください。
  • mcp-prototype-inject.js ファイル。マーカーを表示するために使用されます。
• マーカー：UI要素の data-marker データ属性を設定することで、ユーザーがUI要素を理解しやすくなります。これはオプションです。関連するUI要素の意味が非常に明確な場合は、設定をお勧めしません。
• ページの追加説明：プロトタイプページで表現できない内容（設計理念、要素のドラッグ、注意事項など）を表現するために使用されます。markdown形式で、ファイル名の形式は [プロトタイプページのファイル名].annotation.md です。

具体的な参照は、src\mcp\tool\getSpec.ts ファイルをご覧ください。

🔧 技術詳細

• 技術スタック：nodejs, SvelteKit, Vite, ts