# Refero MCP: 135.000+ echte Produkt-Screens als Design-Referenz im Agenten

> Refero MCP gibt KI-Agenten Zugriff auf kuratierte Design-Systeme, über 135.000 echte Produkt-Screens und 10.000+ User-Flows — Research vor dem ersten Prompt.

- URL: https://thevibe-coding.de/mcp/refero-mcp
- Typ: mcp | Veroeffentlicht: 2026-07-18 | Aktualisiert: 2026-07-18
- Autor: Vita Legne | Site: VIBE CODING — thevibe-coding.de

---

**Refero MCP** ist ein Remote-[MCP](/glossar/mcp)-Server, der KI-Agenten mit der Referenz-Bibliothek von Refero verbindet: über 135.000 Screens echter Produkte, 10.000+ User-Flows und kuratierte Design-Styles. Der Agent recherchiert erst, wie erfolgreiche Apps ein Problem lösen — und baut dann. Voraussetzung ist ein Refero-Pro-Abo mit 8.000 Tool-Calls pro Monat.

## Drei Research-Ebenen: Styles, Screens, Flows

Refero strukturiert die Bibliothek in drei Schichten, die der Agent gezielt abfragt:

| Ebene | Inhalt | Typische Anfrage |
|-------|--------|------------------|
| Styles | Typografie, Farben, Spacing, Do/Don't-Regeln | "Developer-Tool-Websites mit Produkt-Screenshots" |
| Screens | 135.000+ Web- und iOS-Screens mit UX-Metadaten | "Pricing-Page mit Monats/Jahres-Toggle" |
| Flows | 10.000+ Journeys, Schritt für Schritt | "Kündigungs-Flow mit Retention-Angebot" |

Jeder Screen kommt mit strukturierten Metadaten — Beschreibung, UX-Patterns, Layout — sodass der Agent den Blueprint liest, bevor er das Bild ansieht. Unter styles.refero.design liegen zudem tausende Design-Systeme echter Produkte (Apple, Notion, Anthropic) als fertige DESIGN.md-Briefs — unser Guide [AI-Design ohne Slop](/guides/ai-design-ohne-slop-tools-stacks-2026) nennt das den „Brief vor dem Code".

## Installation in Claude Code

Refero MCP läuft komplett remote — keine npm-Pakete, keine lokale Installation:

```bash
claude mcp add --transport http refero https://api.refero.design/mcp --header "Authorization: Bearer <token>"
```

Nutzt dein Setup OAuth statt Token, lässt du den `--header`-Teil weg und folgst dem Sign-in-Flow im Browser. Ergänzend installiert der Refero Skill (`npx skills add https://github.com/referodesign/refero_skill`) eine Research-first-Methodik in den Agenten: erst Referenzen, dann Patterns, dann Code.

## Für wen sich Refero MCP lohnt

Refero MCP adressiert das Kernproblem generierter UIs: Modelle kennen Code, aber keine gelebte Produkt-Gestaltung — deshalb sehen AI-Seiten austauschbar aus. Wer regelmäßig Interfaces baut, bekommt hier in Sekunden mehr Referenzen, als ein Mensch an einem Tag sichten könnte. Unnötig ist der Server für reine Backend-Arbeit oder wenn ein striktes Corporate-Design ohnehin jede Gestaltungsfrage beantwortet. Und wer Komponenten statt Referenzen will, greift zu [Magic MCP von 21st.dev](/mcp/magic-mcp-21st) — beide ergänzen sich: Refero fürs Studieren, Magic fürs Bauen.

## FAQ

### Was kostet Refero MCP?

Der MCP-Zugriff ist Teil von Refero Pro und enthält 8.000 Tool-Calls pro Monat — genug für regelmäßige Design-Recherche. Höhere Limits und Custom-Integrationen gibt es über Refero for Business. Ohne aktives Pro-Abo funktioniert der Server nicht.

### Welche Daten liefert Refero MCP an den Agenten?

Drei Research-Ebenen: Styles (Typografie, Farben, Spacing, Do/Don't- Regeln als fertige Design-Briefs), Screens (über 135.000 echte Produkt-Screens mit strukturierten Metadaten zu Layout und UX-Patterns) und Flows (10.000+ User-Journeys von Onboarding bis Kündigung, Schritt für Schritt).

### Ist Refero MCP ein lokaler Server oder ein Remote-Dienst?

Ein Remote-Server: Der Agent spricht per HTTP mit https://api.refero.design/mcp, authentifiziert über OAuth oder Bearer-Token. Die Bibliothek bleibt serverseitig — nur die angefragten Ergebnisse kommen in den Agenten-Kontext, eine lokale Installation entfällt.

## Quellen

- [Refero MCP — Getting Started](https://doc.refero.design/mcp/getting-started) — Refero
- [Refero MCP for AI agents](https://refero.design/mcp) — Refero