design-inspiration

Servidor MCP que busca inspiración de diseño de UI en Dribbble, Behance, Awwwards, Mobbin y Pinterest. Pensado para Claude Code, pero funciona con cualquier cliente MCP.

Utiliza la Serper API (búsqueda de Google) con filtros site: para limitar los resultados a plataformas de diseño. También puede extraer tokens de diseño reales (colores, fuentes, espaciado) de cualquier sitio web en vivo mediante un navegador headless.

Encuentra inspiración y luego extrae los tokens exactos de los sitios que te gusten.

Por qué

Quería que Claude tomara referencias de diseño mientras construía la interfaz — ver capturas reales de Dribbble, encontrar paletas de colores, revisar patrones de diseño — sin salir del terminal. Las alternativas existentes o exigían Playwright (muy pesado) o no devolvían URLs de imagen que de verdad pudiera descargar y ver.

El lado de la búsqueda envuelve los endpoints de búsqueda de imágenes y de web de Serper con filtros de sitio preconfigurados. Simple.

El lado de la extracción de tokens vino de otra necesidad: encontraba un sitio que me gustaba en Dribbble, lo abría y luego tenía que extraer los colores con el cuentagotas e inspeccionar las tipografías manualmente. Ahora solo tengo que apuntar design_extract_tokens a la URL y obtener los valores exactos.

Herramientas

design_search_images — Búsqueda de imágenes en plataformas de diseño. Devuelve URLs de imagen, dimensiones y enlaces de origen. Ideal para encontrar referencias visuales de un patrón de UI concreto.

design_search_references — Búsqueda web limitada a sitios de diseño. Devuelve títulos de artículos, fragmentos y enlaces. Mejor para encontrar casos de estudio, documentación de sistemas de diseño o explicaciones de patrones.

design_search_styles — Busca una dirección estética concreta (paleta de colores, tipografía, maquetación, animación). Ejecuta la búsqueda de imágenes y la búsqueda web en paralelo y devuelve los resultados combinados.

design_extract_tokens — Extrae tokens de diseño de un sitio web en vivo. Apunta a cualquier URL y obtén colores, tipografía, espaciado, radios de borde y sombras. Admite los flags dark_mode y mobile. Requiere dembrandt instalado globalmente (npm install -g dembrandt).

Las tres herramientas de búsqueda aceptan un parámetro sites para filtrar por plataformas concretas y un parámetro num para controlar el número de resultados.

Configuración

Necesitas una clave de API de Serper para las herramientas de búsqueda. El plan gratuito incluye 2.500 búsquedas y no requiere tarjeta de crédito.

1. Regístrate en serper.dev

2. Copia tu clave de API

Para la extracción de tokens, instala dembrandt globalmente:

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

Cualquier cliente 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"
    }
  }
}

Compilar desde el código fuente

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

Cómo funciona realmente

Cada herramienta crea una consulta de búsqueda añadiendo site:dribbble.com OR site:behance.net OR ... a lo que hayas buscado. Después llama al endpoint /images o /search de Serper y formatea la respuesta.

La herramienta design_search_styles ejecuta ambos endpoints en paralelo (Promise.all) para obtener imágenes y artículos de la misma consulta.

design_extract_tokens hace una llamada externa a dembrandt (mediante child_process.execFile) con --json-only, analiza la salida JSON y la transforma en markdown + datos estructurados. Timeout de 60 segundos. Sin dependencias npm adicionales: dembrandt se ejecuta como CLI global y child_process es parte del propio Node.

Los resultados se devuelven tanto en markdown (para mostrar por pantalla) como en JSON estructurado (para uso programático). Las respuestas se truncan a 25.000 caracteres para no saturar la ventana de contexto.

Consejos de uso

Busca patrones de UI concretos, no términos genéricos:

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

# too vague
"nice website"
"good design"

Puedes descargar las URLs de imagen devueltas y hacer que Claude las vea directamente:

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

Luego pide a Claude que lea el archivo de imagen: puede ver y describir el diseño.

Licencia

MIT

Flujo de trabajo declarativo para activos 3D

Las referencias pueden declarar que un concepto de sitio necesita activos 3D. design_prepare_references valida el requisito y devuelve un assetPlan; no crea archivos, no llama a Blender ni invoca a otro MCP.

Cuando un plan de activos contiene route: "blender" (la ruta en el código), la aplicación host o el agente debe encaminar esa tarea al MCP de Blender disponible. Esto es un enrutado a nivel de host, no una invocación realizada por este servidor. Conserva el ID del activo y los requisitos de aceptación en la tarea de Blender.

Usa examples/blender-asset-task.json como plantilla de entrega. Incluye el objeto, la intención visual, la cámara, la composición, los materiales, la iluminación, la animación, los formatos de salida listos para web EE, límites de rendimiento y expectativas de aceptación. Las salidas web suelen incluir un .glb o .gltf comprimido, además de una alternativa en .png o .webp. La aceptación comprueba la carga limpia en el visor, el encuadre, los materiales, las animaciones y los presupuestos de rendimiento.

Entrega esperada: design_prepare_references -> assetPlan.route = "blender" -> host application -> Blender MCP -> native site implementation and browser QA.

No sustituyas un requisito 3D declarado por CSS o por un placeholder sin la aprobación del usuario. Si Blender no está disponible, notifica la tarea bloqueada y conserva la entrega declarativa.