mcpField
可
可以让 AI 基于HTML直接进行原型设计的 MCP 工具，即使没有 figma、axure也可以快速构建软件原型。

可以让 AI 基于HTML直接进行原型设计的 MCP 工具，即使没有 figma、axure也可以快速构建软件原型。

ローカル
github.com/llxxbbメディア・デザイン459 週間前に更新
リポジトリ

可以让 AI 基于HTML直接进行原型设计的 MCP 工具，即使没有 figma、axure也可以快速构建软件原型。 について

MCP-Prototypeは、FigmaやAxureを使わずにAIでHTMLからソフトウェアのプロトタイプを作成するMCPツールです。ナビゲーション、任意のUIマーカー、Markdown形式のページ注釈を追加します。

主な機能

  1. 01HTMLベースのプロトタイプ作成
  2. 02ディレクトリ構造に基づくナビゲーション
  3. 03任意のUI要素マーカー
  4. 04Markdown形式のページ注釈
  5. 05プロトタイプの表示・終了コマンド

活用シーン

  1. 01HTMLページからソフトウェアプロトタイプを作成
  2. 02マーカーによるUI要素の説明
  3. 03プロトタイプ外での設計意図の記録

MCP 対応

AIによるHTMLプロトタイプ作成用のMCPツールを提供し、ナビゲーション、マーカー表示、ページ注釈に対応します。

#html#prototype#navigation#mark#annotation#explanation

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "prototype": {
      "command": "npx",
      "args": [
        "-y",
        "@llxxbb/mcp-prototype"
      ]
    }
  }
}
起動コマンドnpx -y @llxxbb/mcp-prototype

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@llxxbb/mcp-prototype

ツール

5

掲載時のツール一覧 · 3 週間前に更新

パラメーター型必須説明
namestringはい挨拶する相手の名前
agenumberいいえこの人の年齢
locationstringいいえこの人の所在地
interestsarrayいいえ興味のリスト
isVerifiedbooleanいいえ検証状態

詳細

プロジェクトの README より

MCP-Prototype

可以让 AI 基于HTML直接进行原型设计的 MCP 工具，即使没有 figma、axure也可以快速构建软件原型。

工具能力：

  • 提供导航栏。

  • 将标记与原型解耦。

  • 支持页面附加说明。

配置方法

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...

使用过程中，如想展示原型，直接输入：

展示原型

原型展示会启动一个后台，所以不需要多次输入指令，否则会启动多个实例。

如想关闭，可输入：

停止展示

或

关闭原型

使用规范

  • 导航栏：

    • 层级定义：与原型所在文件系统的目录结构一一对应。

    • 原型名称：来源于原型页面标签的 data-nav-name 数据属性值，如省略则使用文件名。

  • 功能注入，MCP-Prototype 会为每个 HTML 页面注入：

    • 标签，注意"引用"路径的正确性。
    • mcp-prototype-inject.js 文件，用于展示标记。

  • 标记：通过设置 UI 元素的 data-marker 数据属性来增强使用者对UI元素的理解，可选。如相关界面元素的意义已经非常明显，则不建议配置。

                         

  • 页面的附加说明，用于表达原型页面无法表达的内容，如设计理念，元素拖拽，注意事项等。markdown 格式，文件名格式为[原型页面文件名].annotation.md

具体参考：src\mcp\tool\getSpec.ts 文件

技术栈

  • nodejs, SvelteKit, Vite，ts

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。