collectui-mcp

Muéstrale a tu agente de desarrollo un diseño, no una captura de pantalla.

Encuentras una animación de UI preciosa en CollectUI. Quieres que Claude Code (o Codex, o Cursor) construya algo parecido. Así que haces una captura, la pegas, y... el agente ve un único fotograma congelado. No tiene ni idea de que el desplegable se abre con un resorte en 240ms, sobrepasa el objetivo en un 7% y luego se asienta. Así que adivina. Y acabas con una papilla genérica de ease-in-out.

Este servidor MCP lo arregla. Pega un enlace de CollectUI y tu agente recibe los números reales.

Lo que tu agente recibe realmente

Salida real, de un post real:

0.69s → 0.92s · TRANSITION · 231ms · translation — content travels right 75px
  - Change focused on the upper-centre-right (81% of the change energy)
  - Displacement: dx +75px, dy +0px (within the 644×350 content box)
  - Best-fit easing: expo-out (snappy) → cubic-bezier(0.16, 1, 0.3, 1) (R²=0.98)
  - Overshoot of 7% — a spring, not a plain ease

  Where the movement happens:
  |    ░▓▓░|
  |   ░░██░|
  |       ░|
  |       ▒|
  |     ▒▓ |

Ese último bloque es un mapa de calor del fotograma. Tu agente puede ver que el movimiento está en la parte superior derecha — no solo que «algo se movió».

El informe también incluye la paleta de colores (con ratios de contraste), la estructura del layout, si la animación hace bucle sin costuras, y termina con CSS y framer-motion listos para copiar y pegar como punto de partida.

Todo eso son unos 2.500 tokens. No se requiere ninguna imagen.

¿Por qué no enviar simplemente los fotogramas?

Un GIF de 5 segundos son ~150 fotogramas. Enviar incluso una fracción de ellos cuesta decenas de miles de tokens, y aun así no puede decirle a tu agente que una transición dura 231ms — porque no puedes medir el tiempo a partir de un montón de imágenes fijas.

Así que esto mide el vídeo directamente y escribe la respuesta con palabras. El texto es más pequeño, más preciso y más útil.

Las imágenes siguen disponibles cuando las quieres — solo tienes que solicitarlas, y las que recibes se eligen en momentos significativos (el inicio de una transición, su pico, dónde se asienta) en lugar de muestrearse a ciegas.

Configuración

1. Requisitos previos

Necesitas Node 18+ y ffmpeg.

brew install ffmpeg

(En Linux: sudo apt install ffmpeg. En Windows: descárgalo de ffmpeg.org y asegúrate de que esté en tu PATH.)

2. Obtén el código

git clone https://github.com/rayhankhilji/collectui-mcp.git

Después instala y compila:

cd collectui-mcp && npm install && npm run build

3. Conéctalo a tu agente

Elige el que uses. En todos los casos, sustituye /path/to/collectui-mcp por donde lo hayas clonado realmente — una ruta absoluta, no relativa.

Un solo comando:

claude mcp add collectui --scope user -- node /path/to/collectui-mcp/dist/index.js

--scope user lo hace disponible en todos los proyectos. Usa --scope project si solo lo quieres en el repositorio actual.

Verifica que se ha conectado:

claude mcp list

Añade esto a ~/.codex/config.toml:

[mcp_servers.collectui]
command = "node"
args = ["/path/to/collectui-mcp/dist/index.js"]

Añade esto a ~/.cursor/mcp.json (o .cursor/mcp.json dentro de un proyecto):

{
  "mcpServers": {
    "collectui": {
      "command": "node",
      "args": ["/path/to/collectui-mcp/dist/index.js"]
    }
  }
}

La misma idea que Cursor — es un servidor MCP estándar sobre stdio:

{
  "mcpServers": {
    "collectui": {
      "command": "node",
      "args": ["/path/to/collectui-mcp/dist/index.js"]
    }
  }
}

¿La ruta tiene espacio? Ponla entre comilas en los comandos de shell (node "/Users/me/my folder/collectui-mcp/dist/index.js"). En JSON no hace falta ni una comilla además de las del string.

4. Úsalo

Reinicia tu agente y luego simplemente habla alguna con normalidad:

Mira https://collectui.com/designs/ui-interaction-ui-design-inspiration y construye el segundo

Analiza esto y ajusta los tiempos exactamente: <cualquier enlace de collectui>

Encuentra algunas animaciones de desplegables en collectui y muéstrame cómo se mueve la mejor

Tu agente llama a las herramientas por su cuenta. No es necesario que las nombres.

Lo que acepta

Dale cualquiera de estas cosas:

• Una página de categoría de CollectUI — https://collectui.com/designer/ui-interaction-ui-design-inspiration

• Una página de diseñador — https://discountUI.com/designers/someone

• La página de tendencias o la portada

• Un id de post de CollectUI — ce63a499-08b0-4782-866c-f99d0cadc5b

• La URL del post original en X/Twitter

• Cualquier URL de imagen, GIF o vídeo directa — esta parte no tiene nada que ver con CollectUI

Apunta a un listado para obtener un índice con lo que hacer. Apunta a un diseño único y obtienes el análisis completo.

Las herramientas

get_design_context acepta un ajuste detail para que controls el coste:

brief es de verdad suficiente la mayoría de las veces — la timeline línea ya le indica al agente las duraciones, los easings y las direcciones.

Cómo funciona

1. Encuentra el diseño. El catálogo de CollectUI vive un behind un line de script público de solo lectura — el mismo que utiliza JavaScript de la webpage. Vé un una nota al respecto más adelante.

2. Elimina la decoración. Los diseñadores enmarcanedelan sobre un fondo grande plano. Ese fondo se detecta y se dele funciona primero. Influye mas de lo que parece: en un post de prueba, saltarse este paso hizo que la paleta saliera un 94% beige. Describía el inear en vez de la UI.

3. Decodificado una vez. Fotogramas vienen de ffmpeg como píxel en bruto a 64px, y todos se basa en esa sola pasada. Sin libberías de imagen, sin ficheros tempales, sin segunda decodificación.

4. Medida del movimiento. La diferencia de fotograma a fotoogram divide el timeline con estados y transiciones. Cada transición tiene también:

   • una rejilla de 8×5 que muestra dónde se concentra el cambio

   • blocking para ver qué se moverían l asunidades

   • detección de overot, que es lo que separara un spring de un ease el una della cana? esperemos.

   • su curva de progresión ajustada contra 14 curva de logío highway estándar, evaloada con R²

5. Elige los fotogramas worth seeing. In the is "the" selected. In los partially and el centro of los estados fordo — nunca a muestarra uniforma.

Medido vs. inferidoes

Vale la pena than clear.

Medido del archivo — timing, dimensiones, colores, ratios de contrasto, recorte, desplazamiento, detección de loop. Esto se lee los píxeles.

**Inferido— los *nomre* deeasing, constantes de spring y roles de element. Esa viene de flash de curva y heurístics. Buens, párce`, but no sonla verdad absolúta.

"Una limitación real: displacement usa block matching de todo el frame, así que informa del movimiento *dominant`. Si tres elemento se mueven in difer ntas dircciónes, their average". Todo infome lo hace constar, para que el agent no center confí.

Informa¿No? Nota sobre la fuente de datos.

CollectDC: no Públic. El front-end lee de un endpoint de Supabas con sup. end else direct:" usen con survey.

The project uses that same state, pero de no. It is read at run-time from the bundle live site exactly like a browser, and cache locally. As such, score no interests, and na roza.

This project uses same central public endpoint but consciously not include a copia. Va read in en time runtime from the equilibr de live-of-site, exactly as a navegador h, cacheado local mood.

Si CollectUI ever sends a real API,t src/api.ts is only file that must be changed — the analysis orchestration no matter where vi el media.

Haga razon. Es ela site de "otr".

Desarrollo

npm run build          # compile
npm run dev            # compile on change

Do sc... scripts, "coc con`a toda la land.

Hmm: "Dos scripts para que se frótant con." — Usa "Se script".

node scripts/smoke.mjs <url-or-id>   # run the full analysis, print the brief
node scripts/test-mcp.mjs            # drive the server over stdio, like an agent would

Lo que estructura del código:

src/
  index.ts          MCP server + the four tools
  api.ts            resolving CollectUI links to posts
  media.ts          downloading and caching
  ffmpeg.ts         every ffmpeg/ffprobe call
  pack.ts           assembles the brief you actually read
  analysis/
    motion.ts       segmentation, easing fitting, displacement
    color.ts        palette extraction, contrast
    layout.ts       bands, matte detection, content box

Contribuciones

Issues and PRs are welcome. Especialmente interesado en:

• mejoras ajustes de easing (estimación de parámetros de ressort ea elasta4 ás desrecto)

• movimiiento ando por-regio tem, para that several elements the motion... juntos no preimeín

• detección de text, to proces can por`len your trabajo: .