MCP Prototype
什麼是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?
如何為頁面元素添加說明標記?
原型展示服務啟動後如何訪問?
支持哪些瀏覽器?
相關資源
官方文檔
詳細的安裝、配置和使用指南
示例項目
包含各種使用場景的示例原型
技術規範參考
詳細的規範定義和實現參考

Baidu Map
已認證
百度地圖MCP Server是國內首個兼容MCP協議的地圖服務,提供地理編碼、路線規劃等10個標準化API接口,支持Python和Typescript快速接入,賦能智能體實現地圖相關功能。
Python
26.2K
4.5分

Markdownify MCP
Markdownify是一個多功能文件轉換服務,支持將PDF、圖片、音頻等多種格式及網頁內容轉換為Markdown格式。
TypeScript
19.5K
5分

Firecrawl MCP Server
Firecrawl MCP Server是一個集成Firecrawl網頁抓取能力的模型上下文協議服務器,提供豐富的網頁抓取、搜索和內容提取功能。
TypeScript
64.8K
5分

Sequential Thinking MCP Server
一個基於MCP協議的結構化思維服務器,通過定義思考階段幫助分解複雜問題並生成總結
Python
21.8K
4.5分

Magic MCP
Magic Component Platform (MCP) 是一個AI驅動的UI組件生成工具,通過自然語言描述幫助開發者快速創建現代化UI組件,支持多種IDE集成。
JavaScript
16.5K
5分

Notion Api MCP
已認證
一個基於Python的MCP服務器,通過Notion API提供高級待辦事項管理和內容組織功能,實現AI模型與Notion的無縫集成。
Python
13.4K
4.5分

Context7
Context7 MCP是一個為AI編程助手提供即時、版本特定文檔和代碼示例的服務,通過Model Context Protocol直接集成到提示中,解決LLM使用過時信息的問題。
TypeScript
45.0K
4.7分

Edgeone Pages MCP Server
EdgeOne Pages MCP是一個通過MCP協議快速部署HTML內容到EdgeOne Pages並獲取公開URL的服務
TypeScript
16.4K
4.8分