AI导哈

UI/UX灵感引擎

一个帮助AI代理查找、索引和分析最佳UI/UX视觉灵感的模型上下文协议（MCP）服务器。

  • by Ash-Blanc
  • Python
  • 混合部署
  • 3 星标
  • 更新于
在 GitHub 查看 Ash-Blanc/dia-mcp

使用说明

UI/UX Inspo引擎🎨

一个模型上下文协议（MCP）服务器，使AI代理能够从网络上找到、索引和分析最佳的UI/UX视觉灵感，如图像。

概述

UX Inspo引擎旨在帮助您快速搜索UI/UX灵感并构建本地模式索引。它不是让你复制代码，而是提供视觉灵感和设计推理（为什么它有效，使用什么模式，演示什么原理）。

建于 FastMCP, dia-mcp 将LLM代理直接与以下工具连接 火爬 和 TinyFish 搜索、截图和分析实际发货的产品和设计平台。

能力

服务器提供了AI代理可以使用的几个工具：

  • find_inspo: 🎨 为任何设计需求找到最佳的UI/UX灵感图像。
  • screenshot_live_app: 📸 捕获任何实时应用程序的高质量屏幕截图。
  • dig_platform: 🕵️ 使用人工智能代理深入研究Mobbin、Refero或Godly等设计平台。
  • compare_uis: ⚖️ 截图并并排比较多个实时产品。
  • extract_design_dna: 🧬 从任何网站提取设计符号、调色板和排版。
  • walk_flow: 🚶 浏览一个真正的多步骤UI流程，并记录每一步。
  • site_pattern_hunt: 🏹 聪明地在整个网站上寻找UI/UX模式。
  • index_pattern: 💾 将UI/UX模式保存到持久研究索引中。
  • index_flow: 🔬 浏览并索引整个多页流程。
  • search_index: 🔎 搜索您累积的UI/UX研究索引。

它还包括如下提示 inspo_hunt 启动视觉研究会议。

设置和安装

该项目依赖于 uv 用于依赖性管理。需要Python 3.13以上。

  1. 克隆存储库：

    git clone <repository_url>
cd dia-mcp

  2. 安装依赖项：

    uv sync

  3. 配置环境变量： 复制示例环境文件：

    cp .env.example .env

    将API密钥添加到 .env 文件：

    • FIRECRAWL_API_KEY：从以下位置获取钥匙 火爬。用于网页抓取和截图。
    • TINYFISH_API_KEY：从以下位置获取钥匙 TinyFish。用于门控平台上的浏览器代理。
    • MOBBIN_EMAIL / MOBBIN_PASSWORD：TinyFish自动登录的Mobbin登录凭据。
    • UX_INSPO_INDEX_DIR：（可选）本地模式索引的路径（默认为 ./uxindex).

运行服务器

服务器支持两种传输模式：

地方发展（stdio）

对于本地开发和测试，请在stdio模式下运行：

uv run dia-mcp

远程部署（渲染/云）

该项目包括 render.yaml 只需一键部署，即可将渲染为集中式SaaS web服务。

当远程托管时， 服务器使用在服务器环境中配置的API密钥。连接到此服务器的用户不需要提供自己的密钥！

  1. 部署以渲染： 通过蓝图将GitHub连接到渲染和部署。
  2. 添加环境变量： 在渲染仪表板中，配置 FIRECRAWL_API_KEY, TINYFISH_API_KEY, MOBBIN_EMAIL，以及 MOBBIN_PASSWORD.

要在本地测试SSE模式：

uv run fastmcp run src/dia/server.py -t sse --host 0.0.0.0 --port 8000

您还可以使用环境变量：

  • MCP_HOST --默认值： 0.0.0.0
  • MCP_PORT --默认值： 8000

客户端设置

本地客户端（使用您自己的本地存储密钥）

如果在本地运行Python包而不是云部署，请添加您的 .env 变量直接进入客户端配置：

光标/克劳德桌面

{
  "mcpServers": {
    "dia-mcp": {
      "command": "uv",
      "args": [
        "--directory",
        "/absolute/path/to/dia-mcp",
        "run",
        "dia-mcp"
      ],
      "env": {
        "FIRECRAWL_API_KEY": "fc-...",
        "TINYFISH_API_KEY": "tf-...",
        "MOBBIN_EMAIL": "...",
        "MOBBIN_PASSWORD": "..."
      }
    }
  }
}

远程客户端（连接到云部署）

连接到部署的Render应用程序（集中式SaaS模式）的客户端（如Cursor）只需要一个 SSE连接:

  1. 转到MCP客户端设置
  2. 添加新服务器（类型： 上海证券交易所)
  3. 设置URL： https://your-render-app.onrender.com/sse

无需本地密钥或CLI配置！

远程运行

如果在远程（SSE）模式下运行，客户端将通过HTTP连接：

{
  "mcpServers": {
    "dia-mcp": {
      "url": "http://localhost:8000/mcp"
    }
  }
}

开发命令

# Run type checking (pyright)
uv run pyright src/

# Run the linter (ruff)
uv run ruff check src/

# Run the formatter (ruff)
uv run ruff format src/

# Run tests
uv run pytest

相关 MCP