design-inspiration

Dribbble, Behance, Awwwards, Mobbin, Pinterest에서 UI 디자인 영감을 검색하는 MCP 서버입니다. Claude Code용으로 제작되었지만 모든 MCP 클라이언트에서 작동합니다.

Serper API(Google 검색)를 site: 필터와 함께 사용하여 결과를 디자인 플랫폼으로만 한정합니다. 또한 헤드리스 브라우저를 통해 모든 라이브 웹사이트에서 실제 디자인 토큰(색상, 폰트, 간격)을 추출할 수 있습니다.

영감을 찾은 다음, 마음에 드는 사이트에서 정확한 토큰을 추출하세요.

왜 만들었나

UI를 만들면서 Claude가 디자인 참고 자료를 가져올 수 있게 하고 싶었습니다. 실제 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는 --json-only 플래그와 함께 dembrandt를(child_process.execFile을 통해) 셸로 호출하고, JSON 출력을 파싱한 다음 마크다운 + 구조화된 데이터로 형식화합니다. 60초 타임아웃. 추가 npm 의존성 없음 — dembrandt는 전역 CLI로 실행되며 child_process는 내장되어 있습니다.

결과는 표시용 마크다운과 프로그래매틱 사용용 구조화된 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로 라우팅해야 합니다. 이는 이 서버가 수행하는 호출이 아니라 호스트 수준의 라우팅입니다. 에셋 ID와 승인 요구 사항을 Blender 작업에 보존하세요.

핸드오프 형태로 examples/blender-asset-task.json을 사용하세요. 주제, 시각적 의도, 카메라, 구도, 재질, 조명, 애니메이션, 웹용 출력 형식, 성능 제한, 승인 기대치를 포함하세요. 웹 출력에는 일반적으로 압축된 .glb 또는 .gltf와 .png 또는 .webp 폴백이 포함됩니다. 승인은 클린 뷰어 로딩, 프레이밍, 재질, 애니메이션, 성능 예산을 검증합니다.

예상 핸드오프: design_prepare_references -> assetPlan.route = "blender" -> 호스트 애플리케이션 -> Blender MCP -> 네이티브 사이트 구현 및 브라우저 QA.

사용자 승인 없이 선언된 3D 요구 사항을 CSS나 플레이스홀더로 대체하지 마세요. Blender를 사용할 수 없는 경우 차단된 에셋 작업을 보고하고 선언적 핸드오프를 유지하세요.