设计灵感
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次无信用卡搜索。
- 注册地址： 瑟珀·德夫
- 复制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然后让克劳德阅读图像文件——它可以看到并描述设计。
许可证
麻省理工学院