Eine Website ohne Vorlage mit Claude Code und Refero DESIGN.md

Praktische Materialien zur Arbeit mit Projekten und Modellen: Ailoot-Dokumentation.

Warum sehen Websites aus Claude Code wie Tailwind-Vorlagen aus?#

Im beschriebenen Januar-Beispiel wurde ein kleines Nebenprojekt entwickelt: ein Dialer für Kaltakquise. In einem leeren Repository wurde Claude Code gebeten, die Startseite zu erstellen. Das Ergebnis war generisch: ein dunkler Hintergrund in slate-950, ein Akzent in purple-500, eine fette serifenlose Überschrift und darunter drei Karten mit identischen Schatten. Dasselbe Layout wie bei der ersten Version von ChatGPT, der ersten Version von Lovable und der ersten Version von v0. Nach fünf Prompt-Änderungen mit den Ergänzungen „modern“, „premium“ und „nicht wie alle anderen“ änderte sich nichts. Die Seite sah weiterhin aus, als käme sie aus einer Sammlung von Tailwind UI Templates.

Das heißt: Claude „weiß“ nicht etwa nicht, wie man etwas Schönes gestaltet. Es weiß, was die meisten tun, und reproduziert diese Mehrheit. Für ein Ergebnis ohne Durchschnitt braucht der Agent konkrete Vorgaben: welche Farben, Schriften und Abstände verwendet werden sollen und welche Komponenten als maßgeblich gelten.

Hier kommt ein Designsystem als Kontext ins Spiel. Nicht „mach es schön“, sondern „gestalte es in genau diesem Stil; hier sind die Parameter“.

Refero Styles überbrückt diese Kluft mit einem fertigen Artefakt: einer Datei DESIGN.md mit Parametern aus echten Produkten.

Was ist Refero Styles?#

Die Startseite von styles.refero.design sagt es schlicht: „Entdecke mehr als 2.000 für KI-Agenten lesbare Designsysteme führender Produkt-Websites.“ Im Katalog finden sich Marken, die den visuellen Standard setzen: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Sie werden nicht manuell extrahiert: Das Refero-Team führt ein Skript aus, das das tatsächliche CSS und Markup einer Website analysiert und das Ergebnis als strukturiertes Markdown verpackt. Die Bibliothek auf styles.refero.design ist kostenlos.

Das Schlüsselwort lautet „strukturiert“. Die Datei enthält keine Screenshots und keine Beschreibung wie „in minimalistischem Stil“. Sie besteht aus Markdown mit konkreten Hex-Farben, exakten Schriftgrößen in pt, Abstandseinheiten und Regeln für Komponenten. Der KI-Agent liest diese Datei und arbeitet mit konkreten Angaben, statt zu versuchen, Geschmack in Worte zu fassen.

Das Refero-Team nennt auf seiner ai-agents-Seite „Cursor, Claude Code, Codex, v0 und Lovable“ als unterstützte Tools. DESIGN.md funktioniert also als universelles Artefakt – eine Datei, die für alle wichtigen KI-Entwicklungsagenten geeignet ist.

Was steht in einer DESIGN.md?#

Das Refero-Team beschreibt die Dateistruktur auf seiner Seite design-md-template so:

Die Dateistruktur sieht also meist so aus:

Die Ersteller betonen außerdem ein Prinzip, das 80 % der KI-Designprobleme löst:

Der Hex-Code #5E6AD2 ist also aussagekräftiger als „wie Linear“. Der genaue Wert font-size: 13px / line-height: 18px ist aussagekräftiger als „kompakter Text“. Konkrete Angaben schlagen Interpretation.

DESIGN.md im Repository ist kein Bild für das Team. Sie ist ein Baustein des dauerhaften Kontexts deines Projekts: strukturiertes Wissen, das die KI bei jeder Anfrage liest.

So erstellst du in 4 Schritten eine Website im Stil von Linear#

Diese vier Schritte bilden die beschriebene Abfolge für den Start einer neuen Website. Nicht „vier allgemeine Schritte“, sondern eine konkrete Abfolge mit einer Aktion pro Schritt.

1. Claude Code installieren

   Nativer Ein-Befehl-Installer: curl -fsSL https://claude.ai/install.sh | bash (die empfohlene Methode in der offiziellen Dokumentation). Auf macOS funktioniert brew install --cask claude-code; unter Windows winget install Anthropic.ClaudeCode. Falls es bereits installiert ist, überprüfe die Version: claude --version (erforderlich ist 2.1.178+ – mit dieser Version wurden Tool(param:value)-Berechtigungen und die Blockierung gefährlicher Git-Befehle im Automatikmodus eingeführt). Melde dich bei deinem Konto an: claude startet den Assistenten. Claude Code ist in einem Pro-Abonnement enthalten ($17/Monat bei jährlicher Abrechnung oder $20/Monat bei monatlicher Abrechnung).

2. Refero Styles öffnen und eine Marke wählen

   Gehe zu https://styles.refero.design und öffne den Katalog. Das wichtigste Auswahlkriterium ist, wie gut der Stil zu deinem Produkt passt, nicht ob er dir „gefällt“. Du entwickelst ein SaaS-Dashboard? Sieh dir Linear, Vercel und Notion an. Du entwickelst ein Fintech-Produkt? Sieh dir Stripe, Mercury und Column an. Du entwickelst ein Produkt für Mitglieder? Sieh dir Duolingo an. Öffne eine Markenkarte und klicke auf „Copy DESIGN.md“.

3. DESIGN.md als Kontext ins Projekt legen

   Erstelle im Projektstamm eine Datei docs/DESIGN.md und füge den kopierten Inhalt ein. Öffne dann CLAUDE.md und ergänze eine Zeile: @docs/DESIGN.md. Das ist eine Importanweisung – Claude Code lädt den Inhalt beim Start einer Sitzung in den Kontext. Mehr über Importe in CLAUDE.md erfährst du im Leitfaden zu einer Anweisungsdatei für Claude Code, Codex und Cursor.

4. Einen konkreten Seiten-Prompt formulieren

   Nicht „mach es schön“. Formuliere es konkret: „Erstelle mit der DESIGN.md im Kontext eine Startseite für ein SaaS-Produkt zur Aufgabenverwaltung. Aufbau: Hero-Bereich mit Überschrift und Unterüberschrift, zwei CTA-Buttons (primär und sekundär), darunter ein Block mit 3 Funktionen und Symbolen, danach ein Testimonial-Block. Verwende exakt die Farben und Typografie aus DESIGN.md; erfinde keine eigenen.“

Nach dem vierten Schritt erstellt Claude die Seite. In der beschriebenen Erfahrung dauert eine Startseite durchschnittlich 8–12 Minuten – und sie sieht tatsächlich dem gewählten Markenstil ähnlich. Keine pixelgenaue Kopie, aber eine erkennbare Ästhetik: dieselben Schriften, dieselbe Palette, derselbe Abstandsrythmus und dieselben kleinen Designentscheidungen bei den Buttons.

Die Ersteller von Refero beschreiben dasselbe Drei-Schritte-Prinzip auf ihrer Seite ai-agents/design-resources etwas knapper:

Diese Abfolge aus vier Schritten folgt derselben Logik, ergänzt um die expliziten Schritte, Claude Code zu installieren und die Datei in CLAUDE.md zu importieren.

Welchen Stil solltest du für dein Produkt wählen?#

Die Ersteller von Refero geben diesen Rat gleich im ersten Schritt ihres Leitfadens: Wähle eine Referenz nicht nur nach dem Markennamen, sondern auch nach Dichte, Ton und Zielgruppe.

Was bedeutet das praktisch? Von Apple abgeleitete Farben, Typografie, Hierarchie und zurückhaltende Bewegung können zu einem SaaS-Dashboard passen. Großzügige Abstände einer bestimmten Produktmarketingseite müssen dagegen nicht passen. Prüfe die konkrete Referenz statt nur ihren Markennamen. Lege für ein Buchhaltungs-Dashboard kompakte Zeilenhöhen, Abstände und Informationsdichte ausdrücklich fest und erhalte lesbare Zahlen und Bedienelemente. Kopiere kein luftiges Präsentationslayout unverändert.

Eine einfache Auswahlhilfe nach Produkttyp:

Wenn du noch unsicher bist, wähle Linear. Es bietet die vielseitigste Grundlage: eine neutrale Palette, gut lesbare Typografie (Inter / Söhne) und zurückhaltende Abstände. Eine auf Linear basierende Website wirkt bei 9 von 10 Produkttypen professionell.

Warum DESIGN.md in den dauerhaften Kontext deines Projekts gehört#

In der beschriebenen Praxis wird DESIGN.md in jedem mit KI-Agenten verwalteten Projekt neben CLAUDE.md gespeichert. Die Datei gilt nicht als „vorübergehend für eine Aufgabe“. Sie ist ein dauerhafter Kanon, auf den sich alle zukünftigen Sitzungen stützen. In einem Monat kannst du Claude bitten, dem Projekt eine neue Seite hinzuzufügen – Claude öffnet dieselbe DESIGN.md und gestaltet sie im selben Stil. In sechs Monaten kannst du das Projekt einem anderen Teammitglied übergeben – auch diese Person kann Claude ausführen und ein einheitliches Ergebnis erhalten, weil DESIGN.md im Repository liegt.

Im Design funktioniert das Prinzip so: Eine Entscheidung wird einmal getroffen – Palette, Typografie und Abstandsrythmus. Danach übernimmt jeder KI-Agent sie als gegeben.

Das heißt: Design lebt als Code (Markdown ist Code), nicht als Figma-Datei, die KI nicht lesen kann. Liegt das Design als Datei im Repository, kann Claude Code sie lesen, Codex kann sie lesen und jedes künftige Tool kann sie lesen. Liegt das Design in Figma, befindet es sich auf einer separaten Ebene und muss für jede Sitzung manuell übertragen werden.

In den beschriebenen Nebenprojekten wurde folgende Struktur verwendet:

project/
├── CLAUDE.md            (imports @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (visueller Kanon, von Refero kopiert)
│   ├── ARCHITECTURE.md  (Projektstruktur)
│   └── BRAND.md         (Markenstimme, Wortschatz)
└── ...

Diese drei Dateien sind eine Möglichkeit, den dauerhaften Kontext des Projekts zu organisieren. DESIGN.md kümmert sich um das Visuelle, ARCHITECTURE.md um die Struktur und BRAND.md um die Stimme. Jeder KI-Agent mit Zugriff auf das Repository erhält alle drei als Kontext.

Claude Code MCP einrichten: Refero MCP und refero_skill#

Refero Styles ist die Basisschicht (DESIGN.md als Datei). Die nächste Welle besteht aus Integrationen, die den Zugriff auf die Bibliothek für KI-Agenten „nativ“ machen.

Refero MCP (offiziell). Das ist eine Server-API unter https://api.refero.design/mcp, mit der sich Claude Code über ein Bearer-Token verbindet. Der Agent erhält dadurch Zugriff auf mehr als 150.000 Bildschirme und mehr als 6.000 Nutzerabläufe aus echten Produkten. Du kannst es mit einem Skill installieren:

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

Nach der Installation startet Claude zu Beginn jeder Sitzung „Design Research“ als verpflichtenden ersten Schritt: Der Agent prüft, welche visuellen Entscheidungen zur Aufgabe passen, und schlägt bei Bedarf drei Richtungen vor, die an die gewählte Referenz gebunden sind. Am 23. Juni 2026 hat das Repository refero_skill 67 Commits und 135 Sterne. Ein neues Produkt, das aktiv weiterentwickelt wird.

Die beschriebene Praxis setzt auf einen einfachen Ansatz: Website manuell öffnen, DESIGN.md kopieren und in eine Datei einfügen. MCP ist nützlich, wenn die Arbeit mit Designsystemen zur Routine wird – zum Beispiel, wenn du mehrere Kundenprojekte verwaltest und täglich zwischen visuellen Kanons wechselst. Mehr zum Verbinden von MCP-Servern mit Claude Code findest du im Leitfaden zu NotebookLM und MCP.

Welche 4 Fehler bringen den Ablauf durcheinander?#

Diese vier Fehler treten bei der beschriebenen Arbeit mit Designkontext immer wieder auf. Jeder wirkt harmlos, führt das Ergebnis aber zurück zur Standard-Tailwind-Vorlage.

Fehler 1. Der Prompt „mach es modern“. Das ist das häufigste Fehlermuster. Man öffnet Claude Code und schreibt: „Erstelle mir eine SaaS-Website, moderner Stil, hochwertiger Look.“ Man erhält einen dunklen Hintergrund mit violettem Akzent. In den Trainingsdaten korreliert das Wort „modern“ mit allen Landingpages von 2022–2024, die auf derselben Vorlage beruhen. Ohne die exakten Parameter aus DESIGN.md bedeutet „modern“: „durchschnittlich“.

Fehler 2. DESIGN.md als Nachricht in den Chat kopieren. Manchmal kopieren Nutzer DESIGN.md in das Claude-Code-Chatfenster und sagen: „Hier ist der Stil, verwende ihn.“ Das funktioniert genau einmal – bis zum Ende der Sitzung. Öffne eine neue Sitzung (oder wechsle zu einer anderen Aufgabe, /clear), und der Kontext ist verloren. Wenn der Stil erhalten bleiben soll, muss die Datei im Repository liegen und in CLAUDE.md importiert werden. Warum CLAUDE.md der Ort für dauerhaften Kontext ist, erfährst du im Leitfaden zum Claude-Gedächtnis.

Fehler 3. Einen Stil wählen, weil er dir „gefällt“. Eine luftige Apple-Marketingreferenz kann als unveränderte Vorlage für ein Immobilien-Dashboard mit 30 sichtbaren Angeboten ungeeignet sein. Das schließt von Apple abgeleitete Typografie, Palette oder Hierarchie nicht aus. Passe Abstände und Zeilendichte an die Aufgabe an und prüfe die tatsächlich sichtbaren Informationen in der Zielbildschirmgröße. Wähle die konkrete Referenz nach Dichte, Ton und Zielgruppe statt allein nach Marke.

Fehler 4. DESIGN.md im Prompt selbst nicht erwähnen. DESIGN.md kann im Repository liegen, über CLAUDE.md importiert und für den Agenten sichtbar sein. Doch wenn im Prompt nur „Erstelle eine Website“ steht, schlägt Claude möglicherweise den Standardweg ein, ohne ausdrücklich auf die Datei Bezug zu nehmen. Für jeden Design-Prompt eignet sich diese Zeile: „Verwende exakt die Farben, Schriften und Abstände aus docs/DESIGN.md. Erfinde keine eigenen Werte – nimm sie aus der Datei.“ So wird sichergestellt, dass der Agent DESIGN.md verwendet, statt sie zu umgehen.

Exakte Tokens sind Hex-Codes, Schriftgrößen in pt und Abstandseinheiten in DESIGN.md. Natürliche Sprache bedeutet „modern“, „premium“, „klar“ oder „wie Apple“. Exakte Tokens funktionieren; freie Formulierungen nicht.

Was solltest du als Nächstes tun?#

Du kennst jetzt den grundlegenden Ablauf: Claude Code + DESIGN.md von Refero + 4 Schritte = eine Website ohne Vorlage. Damit deckst du 70 % der Anforderungen ab. Die übrigen 30 % sind Fälle, in denen du mehr Präzision, höhere Geschwindigkeit oder eine Überprüfung brauchst.

Drei Wege, die du nach den Grundlagen weiterverfolgen kannst:

1. Frontend Design Skill. Das ist ein offizieller Skill für Claude Code, der visuelles Feedback ergänzt. Der Agent erstellt mit Puppeteer einen Screenshot der aufgebauten Seite, betrachtet ihn mit seinen „Augen“ (einem Vision-Modell), vergleicht ihn mit DESIGN.md und schlägt selbst Korrekturen vor. Das ist eine automatisierte Schleife: „Prompt → Code → Screenshot → Kritik → Prompt“. Nützlich bei komplexen Seiten, die sich nicht in einem Durchgang richtig hinbekommen lassen.

2. Refero MCP im Produktionsmodus. Wenn du 3–5 Projekte parallel verwaltest, wird es mühsam, DESIGN.md für jedes manuell hinzuzufügen. Refero MCP kann anhand einer Projektbeschreibung 3 passende Stile finden und zur Auswahl anbieten. Dadurch verkürzt sich der Start eines neuen Projekts von 30 Minuten auf 3.

3. Kombination mit Context Engineering. DESIGN.md ist eines der Kontextartefakte. Daneben findest du üblicherweise ARCHITECTURE.md (Projektstruktur), BRAND.md (Markenstimme) und business/audience.md (Zielgruppe). Sie alle werden in CLAUDE.md importiert. Wenn Claude eine Seite erstellt, berücksichtigt es visuelle Vorgaben, Zielgruppe und Produktstruktur. Im Grunde ist das Context Engineering – die systematische Arbeit daran, was du dem Agenten vor einer Anfrage mitgibst.

Praktische Materialien: Ailoot-Dokumentation.

Praktische Materialien: Ailoot-Dokumentation.

Weitere Materialien und Tools: Ailoot.