AI导哈

设计灵感搜索工具

一个MCP服务器，用于搜索Dribbble、Behance、Awwwards、Mobbin和Pinterest等平台上的UI设计灵感，并可从实时网站提取设计标记（颜色、字体、间距等）。

  • by YonasValentin
  • JavaScript
  • 本地部署
  • 20 星标
  • 更新于
在 GitHub 查看 YonasValentin/design-inspiration-mcp-server

使用说明

设计灵感

MCP服务器，用于搜索Dribbble、Behance、Awwwards、Mobbin和Pinterest的UI设计灵感。为Claude Code构建，但适用于任何MCP客户端。

使用 Serper API公司 （谷歌搜索） site: 过滤器仅将结果范围限定在设计平台上。还可以通过无头浏览器从任何实时网站中提取实际的设计标记（颜色、字体、间距）。

找到灵感，然后从你喜欢的网站上提取确切的代币。

为什么

我希望Claude在构建UI时提取设计参考——查看真实的Dribbble镜头，找到调色板，浏览布局模式——而无需离开终端。现有的选项要么需要Playwright（重），要么没有返回我实际上可以下载和查看的图像URL。

搜索端使用预配置的站点过滤器包装Serper的图像和网络搜索端点。简单。

令牌提取方面来自另一个问题：我会在Dribbble上找到一个我喜欢的网站，打开它，然后手动滴眼液颜色并检查字体。现在我只是指出 design_extract_tokens 在URL处，并获取确切的值。

工具

design_search_images --跨设计平台的图像搜索。返回图像URL、维度、源链接。适合为特定的UI模式查找视觉参考。

design_search_references --网络搜索仅限于设计网站。返回文章标题、片段和链接。更适合查找案例研究、设计系统文档或模式解释。

design_search_styles --搜索特定的美学方向（调色板、排版、布局、动画）。并行运行图像和网络搜索，返回组合结果。

design_extract_tokens --从实时网站中提取设计令牌。将其指向任何URL，并返回颜色、排版、间距、边框半径和阴影。支持 dark_mode 和 mobile 旗帜。需要 dembrandt 全球安装(npm install -g dembrandt).

这三个搜索工具接受 sites 用于筛选特定平台的参数，以及 num 控制结果计数的参数。

设置

您需要搜索工具的Serper API密钥。免费等级为您提供2500次无信用卡搜索。

  1. 注册地址： 瑟珀·德夫
  2. 复制API密钥

要提取令牌，请全局安装dembrandt：

npm install -g dembrandt

克劳德代码

claude mcp add design-inspiration -e SERPER_API_KEY=your-key-here -- node /path/to/design-inspiration-mcp-server/dist/index.js

任何MCP客户端（stdio）

{
  "design-inspiration": {
    "type": "stdio",
    "command": "node",
    "args": ["/path/to/design-inspiration-mcp-server/dist/index.js"],
    "env": {
      "SERPER_API_KEY": "your-key-here"
    }
  }
}

从源代码构建

git clone https://github.com/YonasValentin/design-inspiration-mcp-server.git
cd design-inspiration-mcp-server
npm install
npm run build

它实际上是如何工作的

每个工具通过附加以下内容构建搜索查询 site:dribbble.com OR site:behance.net OR ... 无论你寻找什么。然后它击中了Serper的 /images 或 /search 端点并格式化响应。

这 design_search_styles 该工具并行运行两个端点(Promise.all)获取同一查询的图像和文章。

design_extract_tokens 贝壳出来 dembrandt （通过 child_process.execFile)与 --json-only，解析JSON输出，并将其格式化为markdown+结构化数据。60秒超时。无需额外依赖npm——dembrandt作为全局CLI运行 child_process 是内置的。

结果以markdown（用于显示）和结构化JSON（用于编程）的形式返回。响应被截断为25000个字符，以避免淹没上下文窗口。

使用技巧

搜索特定的UI模式，而不是通用术语：

# good
"fintech dashboard dark mode"
"mobile onboarding flow card swipe"
"saas pricing page comparison table"

# too vague
"nice website"
"good design"

您可以下载返回的图像URL，并让Claude直接查看它们：

curl -sL "https://cdn.dribbble.com/..." -o /tmp/reference.jpg

然后让克劳德阅读图像文件——它可以看到并描述设计。

许可证

麻省理工学院

相关 MCP