design-inspiration

一个搜索 Dribbble、Behance、Awwwards、Mobbin 和 Pinterest 以获取 UI 设计灵感的 MCP 服务器。专为 Claude Code 构建，但可与任何 MCP 客户端配合使用。

使用 Serper API（Google 搜索）并附加 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 密钥。免费层提供 2,500 次搜索，无需信用卡。

1. 在 serper.dev 注册

2. 复制你的 API 密钥

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

npm install -g dembrandt

Claude Code

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 通过 child_process.execFile 调用 dembrandt（使用 --json-only），解析 JSON 输出，并将其格式化为 markdown 和结构化数据。60 秒超时。无额外 npm 依赖——dembrandt 作为全局 CLI 运行，child_process 是内置的。

结果同时以 markdown（用于显示）和结构化 JSON（用于程序化使用）返回。响应在 25,000 个字符处截断，以避免淹没上下文窗口。

使用技巧

搜索具体的 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

然后让 Claude 读取图片文件——它可以看到并描述设计。

许可证

MIT

声明式 3D 资产工作流

引用可以声明某个网站概念需要 3D 资产。design_prepare_references 验证该需求并返回 assetPlan；它不会创建文件、调用 Blender 或调用其他 MCP。

当资产计划包含 route: "blender" 时，宿主应用程序或代理必须将该任务路由到可用的 Blender MCP。这是宿主级别的路由，不是本服务器执行的调用。在 Blender 任务中保留资产 ID 和验收要求。

使用 examples/blender-asset-task.json 作为交接格式。包括主题、视觉意图、相机、构图、材质、光照、动画、面向 Web 的输出格式、性能限制和验收预期。Web 输出通常包括压缩的 .glb 或 .gltf 以及 .png 或 .webp 回退。验收验证干净的查看器加载、构图、材质、动画和性能预算。

预期交接：design_prepare_references -> assetPlan.route = "blender" -> 宿主应用 -> Blender MCP -> 原生站点实现和浏览器 QA。

未经用户批准，不得用 CSS 或占位符替换声明的 3D 需求。如果 Blender 不可用，请报告受阻的资产任务并保留声明式交接。