MCP Prototype
M

MCP Prototype

基於HTML的AI原型設計工具,無需Figma/Axure即可快速構建軟件原型,支持導航欄、標記解耦和頁面說明功能
2分
5.1K

什麼是MCP-Prototype?

MCP-Prototype是一個創新的AI輔助原型設計工具,它允許用戶通過簡單的HTML標記快速創建軟件原型界面。該工具特別適合需要快速迭代和展示設計想法的場景,無需依賴複雜的設計軟件。

如何使用MCP-Prototype?

通過配置MCP服務器並輸入設計需求,AI將生成對應的HTML原型。用戶可以通過簡單的命令如'展示原型'來查看設計結果,'停止展示'來關閉預覽。

適用場景

適用於產品經理、設計師和開發者在需求討論、設計評審和快速原型驗證階段使用,特別適合敏捷開發環境和快速迭代項目。

主要功能

智能導航欄
自動根據文件系統目錄結構生成層級導航,支持自定義頁面名稱通過data-nav-name屬性。
標記解耦系統
通過data-marker屬性為UI元素添加說明標記,增強對設計元素的理解,保持標記與原型分離。
頁面附加說明
支持為每個原型頁面添加Markdown格式的詳細說明,用於表達設計理念和特殊交互說明。
自動功能注入
自動為每個HTML頁面注入基礎路徑和JavaScript文件,確保原型展示的完整性和功能性。
優勢
無需安裝複雜設計軟件,基於HTML快速上手
AI智能生成,大幅提升原型設計效率
標記與原型分離,保持代碼整潔
支持詳細的頁面說明,完善設計文檔
侷限性
需要基本的HTML知識才能充分發揮功能
目前主要支持Web應用原型設計
高級交互原型可能需要額外開發

如何使用

環境配置
在AI MCP配置中添加mcp-prototype服務器配置
本地調試配置
如需本地調試,使用以下配置方式
開始設計
向AI提供設計需求,按照規範要求進行原型設計
查看原型
輸入展示命令查看生成的原型

使用案例

用戶登錄界面設計
快速創建一個包含用戶名、密碼輸入框和登錄按鈕的用戶登錄界面
電商商品列表頁
創建商品列表頁面,支持篩選、排序和分頁功能說明

常見問題

是否需要安裝Figma或Axure來使用MCP-Prototype?
如何為頁面元素添加說明標記?
原型展示服務啟動後如何訪問?
支持哪些瀏覽器?

相關資源

官方文檔
詳細的安裝、配置和使用指南
示例項目
包含各種使用場景的示例原型
技術規範參考
詳細的規範定義和實現參考

安裝

複製以下命令到你的Client進行配置
{
  "mcpServers": {
    "mcp-prototype": {
      "command": "npx",
      "args": [
        "-y",
        "@llxxbb/mcp-prototype"
      ]
    }
  }
}
注意:您的密鑰屬於敏感信息,請勿與任何人分享。

替代品

K
Klavis
Klavis AI是一個開源項目,提供在Slack、Discord和Web平臺上簡單易用的MCP(模型上下文協議)服務,包括報告生成、YouTube工具、文檔轉換等多種功能,支持非技術用戶和開發者使用AI工作流。
TypeScript
7.6K
5分
M
MCP
微軟官方MCP服務器,為AI助手提供最新微軟技術文檔的搜索和獲取功能
8.7K
5分
A
Aderyn
Aderyn是一個開源的Solidity智能合約靜態分析工具,由Rust編寫,幫助開發者和安全研究人員發現Solidity代碼中的漏洞。它支持Foundry和Hardhat項目,可生成多種格式報告,並提供VSCode擴展。
Rust
5.9K
5分
D
Devtools Debugger MCP
Node.js調試器MCP服務器,提供基於Chrome DevTools協議的完整調試功能,包括斷點設置、單步執行、變量檢查和表達式評估等
TypeScript
5.4K
4分
S
Scrapling
Scrapling是一個自適應網頁抓取庫,能自動學習網站變化並重新定位元素,支持多種抓取方式和AI集成,提供高性能解析和開發者友好體驗。
Python
7.8K
5分
M
Mcpjungle
MCPJungle是一個自託管的MCP網關,用於集中管理和代理多個MCP服務器,為AI代理提供統一的工具訪問接口。
Go
0
4.5分
C
Cipher
Cipher是一個專為編程AI代理設計的開源記憶層框架,通過MCP協議與各種IDE和AI編碼助手集成,提供自動記憶生成、團隊記憶共享和雙系統記憶管理等核心功能。
TypeScript
0
5分
N
Nexus
Nexus是一個AI工具聚合網關,支持連接多個MCP服務器和LLM提供商,通過統一端點提供工具搜索、執行和模型路由功能,支持安全認證和速率限制。
Rust
0
4分
B
Baidu Map
已認證
百度地圖MCP Server是國內首個兼容MCP協議的地圖服務,提供地理編碼、路線規劃等10個標準化API接口,支持Python和Typescript快速接入,賦能智能體實現地圖相關功能。
Python
26.2K
4.5分
M
Markdownify MCP
Markdownify是一個多功能文件轉換服務,支持將PDF、圖片、音頻等多種格式及網頁內容轉換為Markdown格式。
TypeScript
19.5K
5分
F
Firecrawl MCP Server
Firecrawl MCP Server是一個集成Firecrawl網頁抓取能力的模型上下文協議服務器,提供豐富的網頁抓取、搜索和內容提取功能。
TypeScript
64.8K
5分
S
Sequential Thinking MCP Server
一個基於MCP協議的結構化思維服務器,通過定義思考階段幫助分解複雜問題並生成總結
Python
21.8K
4.5分
M
Magic MCP
Magic Component Platform (MCP) 是一個AI驅動的UI組件生成工具,通過自然語言描述幫助開發者快速創建現代化UI組件,支持多種IDE集成。
JavaScript
16.5K
5分
N
Notion Api MCP
已認證
一個基於Python的MCP服務器,通過Notion API提供高級待辦事項管理和內容組織功能,實現AI模型與Notion的無縫集成。
Python
13.4K
4.5分
C
Context7
Context7 MCP是一個為AI編程助手提供即時、版本特定文檔和代碼示例的服務,通過Model Context Protocol直接集成到提示中,解決LLM使用過時信息的問題。
TypeScript
45.0K
4.7分
E
Edgeone Pages MCP Server
EdgeOne Pages MCP是一個通過MCP協議快速部署HTML內容到EdgeOne Pages並獲取公開URL的服務
TypeScript
16.4K
4.8分
AIBase
智啟未來,您的人工智慧解決方案智庫
© 2025AIBase