design-inspiration
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만 지정하면 정확한 값을 돌려받습니다.
Related MCP server: DOM Inspector Plus MCP Server
도구
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회 검색을 제공합니다.
serper.dev에서 가입
API 키 복사
토큰 추출을 위해 dembrandt를 전역으로 설치하세요:
npm install -g dembrandtClaude 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를 사용할 수 없는 경우 차단된 에셋 작업을 보고하고 선언적 핸드오프를 유지하세요.
Available Tools
5 toolsdesign_extract_tokensExtract design tokens from websiteARead-onlyIdempotent
Extract actual design tokens (colors, typography, spacing, borders, shadows) from a live website using headless browser. Give it any URL and get back the exact values used. Pairs well with the search tools — find inspiration, then extract tokens from sites you like.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Website URL to extract design tokens from. Examples: "https://stripe.com", "https://linear.app" | |
| mobile | No | Extract from mobile viewport (375px) | |
| dark_mode | No | Extract colors from dark mode variant |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, openWorldHint, idempotentHint, and destructiveHint=false, so the description is relieved of safety disclosure. It adds valuable behavior: 'using headless browser' implies the tool fetches the live page and could be subject to site access or latency, and 'get back the exact values' hints at the output precision. This goes beyond the annotations without contradicting them.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is three sentences with zero fluff. It front-loads the primary purpose in the first sentence, then reinforces scope and integrates with siblings. Every sentence earns its place, making it concise and well-structured.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is simple (3 params, 1 required, booleans with defaults) and has no output schema, so the description need not detail return structure excessively. It covers the purpose, usage context, and practical behavior adequately. Minor gaps like error handling or return format are not critical given the simplicity and existing annotations.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, so all three parameters (url, mobile, dark_mode) are already fully documented. The description adds no additional meaning about parameter usage or semantics, so it sits at the baseline of 3 as per the rubric.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb 'Extract' and a clear resource 'design tokens', enumerating the token categories (colors, typography, spacing, borders, shadows) and specifying it works on a live website via headless browser. This clearly distinguishes it from sibling search tools, which are about finding references, while this actually extracts values.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides usage context by stating 'Give it any URL and get back the exact values used' and explicitly pairs it with search tools: 'find inspiration, then extract tokens from sites you like.' This implies a clear workflow, but it refers to 'search tools' generically without naming the specific sibling tools (e.g., design_search_styles), so it lacks the explicit alternative routing seen in the highest-scoring examples.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_prepare_referencesPrepare design referencesARead-onlyIdempotent
Validate and normalize selected references. Does not browse, capture, or invoke other MCPs.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare the tool read-only, idempotent, and non-destructive. The description adds useful behavioral context by explicitly ruling out browsing, capturing, and invoking other MCPs, which goes beyond the structured annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two short sentences deliver the core action and key exclusions with no wasted words. The most important operational information is front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter, annotation-covered tool, the description fully covers what the tool does and what it avoids. The phrase 'selected references' assumes prior context, but the lack of parameters and strong annotations make this sufficient.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, so there is no parameter semantics for the description to clarify. The baseline for zero-parameter tools is 4, and the description does not need to compensate for any schema gaps.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses specific verbs ('validate and normalize') and identifies the resource ('selected references'). It also explicitly distinguishes itself from sibling search tools by stating it does not browse, capture, or invoke other MCPs.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description clearly positions the tool as a preparation step for already-selected references and tells the agent what it will not do. It implies the right conditions for use, though it does not explicitly name sibling alternatives as replacements.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_search_imagesSearch design imagesARead-onlyIdempotent
Image search across Dribbble, Behance, Awwwards, Mobbin, and Pinterest. Returns image URLs, dimensions, and source links. Use specific UI terms ("fintech dashboard dark mode") over vague ones ("nice design").
| Name | Required | Description | Default |
|---|---|---|---|
| num | No | Number of image results to return (1-40, default: 10) | |
| query | Yes | UI design search query. Examples: "dashboard dark mode", "mobile onboarding flow", "saas pricing page" | |
| sites | No | Filter to specific design sites. Empty array searches all sites. Options: dribbble, behance, awwwards, mobbin, pinterest |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The annotations indicate readOnlyHint, openWorldHint, idempotentHint, and non-destructive, which already establish safety. The description adds that it performs image search across specific sites and returns certain metadata, but doesn't disclose behaviors like pagination, rate limits, or result ordering, which might be relevant for a search tool. It doesn't contradict annotations, but adds minimal new behavioral context beyond the search scope.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise, at two sentences, with the core function stated upfront and the searching tip as a secondary sentence. Every sentence adds value without redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is simple with three parameters, a clear output description in the description text, and extensive annotation coverage (read-only, idempotent). The description adequately covers: what it searches, what it returns, and query guidance. However, it lacks details on result pagination or how to interpret the returned metadata, but given the simplicity and annotations, it's sufficiently complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already provides descriptive parameter documentation, with near 100% coverage (the 'sites' parameter includes enum values and explanation). The description reinforces the need for specific query terms but doesn't add much beyond the schema. For 'num' and 'sites', the schema covers their usage, so the description adds limited value here.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool searches images across specified sites and returns URLs, dimensions, and source links. It uses a specific verb and resource, distinguishing it from sibling tools which focus on references or styles. However, it doesn't explicitly differentiate from design_search_styles, which might overlap, but the image-search focus is clear.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It provides explicit advice on query phrasing: use specific UI terms over vague ones, which guides when to use this tool effectively. However, it doesn't contrast against sibling tools like design_search_styles or design_search_references, leaving it to the agent to infer which search is appropriate based on context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_search_referencesSearch design referencesARead-onlyIdempotent
Web search scoped to design platforms. Returns article titles, snippets, and links. Better than image search when you want case studies, write-ups, or design system documentation.
| Name | Required | Description | Default |
|---|---|---|---|
| num | No | Number of results to return (1-20, default: 10) | |
| query | Yes | UI design search query. Examples: "best dashboard designs 2025", "mobile navigation patterns" | |
| sites | No | Filter to specific design sites. Empty array searches all sites. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description conveys that this is a read-only operation that is safe and idempotent. It adds the useful behavioral note that it searches the web, not a local database, and that it returns web results rather than being limited to visual output. It doesn't cover what happens with image search, but for a read query this is reasonable and exceeds the annotations alone.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is only two sentences, but those two sentences contain actionable guidance. The first sentence states what it does, and the second highlights when to use it over an alternative. This is efficient and well-structured.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a read-only search tool with no output schema, the description covers the return value types and the when-to-use scenario. It doesn't mention pagination or result limits, but those are available in the schema. The sibling tools are not referenced to direct the agent toward or away from them, which would be a minor improvement.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema covers 100% of parameter descriptions, including examples for query and valid sites. The description field in the schema provides good context, so the main description isn't burdened with parameter details. However, the description does reference the general purpose and output type, which gives the agent a high-level expectation of what the parameters accomplish. Given full schema coverage, this is a solid 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb ('web search scoped to design platforms') and the return types (article titles, snippets, links). It doesn't explicitly distinguish from the two sibling search tools, but the scoping gives useful context. The examples in the schema parameters provide additional clarity.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives a when-to-use comparison against image search, which is a clear alternative. It fails to mention when image search might be better, but it does name one specific use case where this tool excels (case studies, write-ups, documentation), giving the agent a practical rule.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_search_stylesSearch design stylesARead-onlyIdempotent
Search for a specific aesthetic direction — color palettes, typography, layouts, or animation references. Runs image and web search in parallel and returns combined results.
| Name | Required | Description | Default |
|---|---|---|---|
| num | No | Number of results (1-20, default: 10) | |
| type | No | Type of style inspiration to search for | general |
| style | Yes | Design style to search for. Examples: "minimalist dark theme", "brutalist web design", "glassmorphism" |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Beyond the annotations (read-only, idempotent, open-world), the description discloses that it runs image and web searches in parallel and merges results — genuinely useful operational knowledge an agent wouldn't get from the schema alone. This tells the agent to expect combined, multi-source output from a single call. The annotations already cover the safety profile, so the description earns credit for adding the execution model on top.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two tight sentences: the first front-loads the purpose with concrete examples, the second covers the single non-obvious behavioral trait (parallel execution). Not a single wasted word.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a read-only search tool with three well-documented parameters, the description covers purpose, scope, and combined-result behavior. The main gaps are an unspecified return format (no output schema exists) and no disambiguation from the similarly named sibling tools — minor for a low-risk, read-only operation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so all parameters (style, type, num) are already documented. The description's style examples map naturally onto the type enum values ('color-palette', 'typography', 'layout', 'animation'), which provides a slight bridge between intent and schema. But it adds no format, syntax, or behavior details that the schema doesn't already state, landing at a solid baseline.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: searching for a specific aesthetic direction with concrete examples like color palettes, typography, layouts, and animation references. The parallel image/web search detail adds specificity beyond a generic search. However, it doesn't explicitly distinguish itself from the closely related siblings design_search_images or design_search_references, which an agent would need to infer on its own.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The opening 'Search for a specific aesthetic direction' conveys when to use the tool, and the style examples give useful intent context. But there's no explicit when-not-to-use guidance or any mention of alternatives, which is a real gap given sibling tools like design_search_images and design_search_references are topically adjacent. Usage is implied rather than stated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
5 tool updates
v1.0.0- First observed
design_extract_tokens - First observed
design_prepare_references - First observed
design_search_images - First observed
design_search_references - First observed
design_search_styles
TDQS
Scored across 5 tools
The tools are largely distinct: search_images handles image lookup, search_references handles textual content, extract_tokens handles live site analysis, and prepare_references handles validation. However, design_search_styles blends image and web search for style-specific queries, which overlaps with the first two but is differentiated by its focus on aesthetic direction like color palettes and typography.
All tools follow a consistent design_<verb>_<noun> pattern with snake_case and clear verbs (search, extract, prepare). No variation in casing or verb style, making the naming predictable and easy to navigate.
With 5 tools, the server is well-scoped for a design inspiration use case. Each tool serves a distinct purpose—searching visuals, text, styles, extracting tokens, and preparing references—without unnecessary bloat or minimal coverage.
The surface covers the core workflow: search for inspiration (images, references, styles), extract tokens from a chosen site, and prepare references for use. Minor gaps exist, such as no explicit tool to fetch or save a specific reference beyond token extraction, but the primary use cases are well covered.
Related MCP Connectors
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Real HTML, styles, measurements and brand tokens from any live site, for coding agents.
See the rendered web: design tokens, fonts, animation timings, WebGL shaders and 3D from any URL.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceExtracts brand identity (colors, typography, spacing) from any website and generates HTML/CSS replicas or applies branding to templates.1MIT
- AlicenseNot gradedqualityDmaintenanceGives Claude the ability to inspect and extract UI components from any webpage through a Chrome extension, enabling element discovery, style extraction, and design token analysis.MIT
- AlicenseAqualityBmaintenanceAnalyzes and extracts design tokens, assets, and layout from live websites to enable AI clients to faithfully replicate them, with tools for screenshotting, component inspection, and pixel-diff verification.1429 npm4MIT
- AlicenseAqualityBmaintenanceEnables assistants to discover, search, and extract real design systems — palettes, type scales, spacing, surfaces, and do/don't guidance — from the public style pages of styles.refero.design. It reports index coverage with every search and renders matched styles as structured design.md sections or parsed JSON tokens.638 npm1MIT