collectui-mcp

Zeig deinem Coding-Agenten ein Design, keinen Screenshot.

Du findest eine schöne UI-Animation auf CollectUI. Du willst, dass Claude Code (oder Codex, oder Cursor) etwas Ähnliches baut. Also machst du einen Screenshot, fügst ihn ein und bekommst einen eingefrorenen Frame. Der Agent hat keine Ahnung, dass sich das Dropdown über 240ms mit einem Überschwingen von 7% öffnet und dann zur Ruhe kommt. Er rät. Du bekommst generischen ease-in-out-Einheitsbrei.

Dieser MCP-Server behebt das. Füge einen CollectUI-Link ein und dein Agent bekommt die echten Zahlen.

Was dein Agent tatsächlich bekommt

Echte Ausgabe, von einem echten Beitrag:

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:
  |    ░▓▓░|
  |   ░░██░|
  |       ░|
  |       ▒|
  |     ▒▓ |

Das letzte Stück ist eine Heatmap des Frames. Dein Agent kann sehen, dass die Bewegung oben rechts stattfindet – nicht nur, dass „sich etwas bewegt hat“.

Das Briefing enthält außerdem die Farbpalette (mit Kontrastverhältnissen), die Layoutstruktur, ob die Animation nahtlos loopt und am Ende direkt kopierbares CSS und framer-motion als Ausgangspunkt.

All das sind rund 2.500 Tokens. Dafür wird keiner Bilder benötigt.

Warum nicht einfach Frames schicken?

Ein 5-Sekunden-GIF hat ~150 Frames. Selbst einen Bruchteil davon zu schicken kostet zig Tausende Tokens und es kann deinem Agenten immer noch nicht mitteilen, dass ein Übergang 231ms dauert – weil man Zeit nicht aus Prozess von Standbildern ablesen kann.

Also misst hier die Software das Video direkt und gehört eine Bewegungsanalyse? Das ist viel präziser und gleichermaßen nützlicher.

Es werden starke opt-in not Requisiten? Nein, es ist eine absolut opt-in: Bilder werden nur dann geliefert, wenn du willst – und die.

it es genau zu den spannenden Zeitpunkten, dem EngineMount und dem Beruhigungszustand aussucht – und nicht einfach blind von oben nach unten sowieso.

Nein: Die Frames sind noch verfügbar, wenn du sie brauchst, aber nur wenn du sie anforderst, und du bekommst sie zu wichtigen Zeitpunkten (Beginn eines Übergangs, sein Höhepunkt, wo Schwellenwert) die nicht blind abtastend.

Setup

1. Voraussetzungen

Du brauchst Node 18+ und ffmpeg.

brew install ffmpeg

(Unter Linux: sudo apt install ffmpeg. Unter Windows: von ffmpeg.org holen und darauf achten, dass es in deinem PATH liegt.)

2. Code holen

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

Dann installieren und bauen:

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

3. Mit dem Agenten verbinden

Nimm, das du verwendest. Ersetze in jedem Fall /path/to/collectui-mcp durch das Verzeichnis, in dem du es geklont hast – einen absoluten Pfad, keinen relativen.

Ein Befehl:

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

--scope user macht es in allen Projekten verfügbar. Verwende --scope project, wenn du es nur im aktuellen Repo willst.

Prüfen, ob die Verbindung steht:

claude mcp list

Das hier zu ~/.codex/config.toml hinzufügen:

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

Füge das zu ~/.cursor/mcp.json (oder .cursor/mcp.json innerhalb eines Projekts) hinzu:

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

Gleiche wie bei Cursor – es ist ganz normaler Standard-Stdio-MCP-Server:

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

Pfad mit Leerzeichen? In Shell-Befehlen in Anführungszeichen setzen ("node "/Users/me/folder mit/collectui-mcp/dist/index.js"). In JSON ist nur die normals Codierung erforderlich.

4. Verwenden

Starte deinen Agenten neu und sprich einfach ganz normal mit ihm:

Schau dir https://collectui.com/designs/we-are-on-the-beach/ui and make me the second one

Analisière das hier und stimme das Timing exakt ab: <beliebiger CollectUI-Link>

Find some dropdown animation on ".

Zeig mir some "dropdown"-BeispieleTambém quickly

"Your agent calls the tools on its own. You don't need to name them."

Dein Agent ruft die Tools von sich aus auf. Du brauchst sie nicht zu benennen.

Was es akzeptiert

Gib ihm eines davon:

• Eine CollectUI-Kategorieseite – https://collectui.com/designs/ui-interaction-ui-design-inspiration

• Eine Designerseite – https://collectui.com/designers/someone

• Die Trending-Seite oder die Startseite

• Eine CollectUI-Beitrag-ID – ce63a499-08b0-4782-866c-f99d0b7adc5b

• Die Original-URL des X/Twitter-Beitrags

• Jede direkte Bild-, GIF- oder Video-Schleife – dieser Teil funktioniert ganz ohne CollectUI

Verweist du auf eine Listung, bekommst du einen Index zur Auswahl. Verweist du auf ein einzelnes Design, bekommst du die detaillierte Analyse.

Das Werkzeuge

get_design_context** nutzt eine Einstellung detail`, die die Kosten steuert:

brief ist tatsächlich meistens genug – die Timeline darlegt das **Agent bereits die Dauern, die Easing- und die Richtungen.

So funktioniert es

1. Findet das design. Der Katalog von CollectUI liegt hinter einem öffentlichen, Lesen-but-Endpunkt – dem, den der JS der Website selbst auch anruft. Dazu siehe die Notiz zur Datenquelle

2. **WeCare - Bildaten.

3. Schneidet die Präsentation aus. Designer setzen ihre Arbeit auf einen großen, flachen Hintergrund. Diese Fläche wird erkannt und zuerst entfernt. Das ist wichtig mehr als man meint. Bei einem Test-Post wurde ohne diesen Schritt die Palette zu 94% beige und beschrieb den Spot statt zur Benutzeroberfläche.

4. Dekodiert einmal. Die Frames werden von ffmpeg als reine Pixeldaten mit 64 px Breite geliefert. Allseits vf, Control demselben Durchgang. Keine Bildbibliotheken, keine Temp-Dateien, kein zweite Dekodierung.

5. Misst die Bewegung. Die Frame-zu-Frame-Differenz teilt die Timeline in Holds und Transition Mail.

   • ein 8×5-Raster, das zeigt, wo sich die Änderung konzentriert

   • Block-Matching, um festzustellen, welchen Bewegung irgendetwas gemacht hat und wie weit

   • Überschwingerkennung – das unterscheidet ein Sprung von einem Ease

   • Die progressive Kurve wird gegen 14 gebräuchliche Easing-Kurven gepasst und mit R² bewertet

6. Wählt Frame, die gesehen werden wollen. An Einzelgrenzen, bei Bewegungspeaks und in Zellhältnissen – nie eine universelle Stichprobe.

Gemessen vs. geschlossen

Es lohnt sich, denn dein Agent darauf aufbauen wird.

Gemessen aus der Datei – Timings, Dimensionen, Ebenen, Kontrastverhältnisse, Rechteck, Auslenkung, Loop-Erkennung. Direkt von den Pixeln gelesen.

Erschlossen Easing -Namen, Federkonstanten und Elementrollen. Die kommen aus Kurven-Fit und Heuristiken. Gute Startpunkte, aber nicht die Wahrheit.

Eine konkrete Einschränkung: Der Versatz nutzt ganzflächiges Block-Matching, wodurch nur die dominante Bewegung gemeldet wird. Wenn drei Elemente simultaneously in unterschiedliche Richtungen laufen, mitteln sie sich zu einer. Jedes Briefing erwähnt das, damit der Agent es nickt überbewertet.

Ein Hinweis zur Datenquelle

CollectUI hat keinen öffentlichen API. Sein Frontend liest von einem Supabase-Endpunkt mit einem Read-only-Key, den es S diesen Endpunkt jedem Browser mitschickt, wenn er die Seite besucht. This project uses the same public endpoint – but deliberately doesn't contain a copy of this key. It reads it per load-lived zeitpunkt from the live page bundle, just like a browser does, and caches it locally. That way, this repo does not republish a third-party credential and nothing breaks plasticity if it is rotated.

Es werden auch heruntergeladen zwischengespeicher, so dass d тренионuntersuchen eines Designs nichts neu laden.

Sollte CollectUI jemals eine echte API veröffentlichen, ist nur src/api.ts – die Analyse Pipeline kümmer Git nicht, welche Quelle die Medien laden.

Bitte geh verhältnismäßig damit um. Es ist fremde eigentum Website.

Entwicklung

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

Zwei Skripte für Diskussionen direkt:

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

Ordneraufbau:

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

Beitragen

Issues und PRs sind willkommen. Insbesondere wichtig:

• Besserer Easing-Fit (die Schätzung von Feder-Parametern ist noch recht grob)

• Bewegungsverfolgung pro Region, damit sich gleichzeitige Element-Bewegungen nicht herausmitteln

• Text-Erkennung, damit die Muskeln in der analysis erwähnt, was die UI tatsächlich sagt

Lizenz

MIT – siehe LICENSE.