Dieser Artikel zeigt, wie du Claude über das Model Context Protocol (MCP) mit Onepage verbindest.
MCP ist die Schnittstelle zwischen Onepage und externen KI-Assistenten und ermöglicht es, Seiten, Inhalte und Website-Strukturen direkt über diese Tools zu verwalten. Die detaillierte Erklärung zu MCP findest du in diesem Artikel.
📌 Hinweis: Bei der Erstellung einer Onepage-Website über MCP werden keine Onepage-KI-Credits verbraucht. Stattdessen nutzt du die Tokens des jeweiligen KI-Tools (z. B. ChatGPT, Claude oder Cursor), das mit Onepage verbunden ist.
Onepage mit Claude verbinden (Schritt-für-Schritt-Anleitung)
📌 Hinweis: Die folgenden Schritte und Screenshots basieren auf dem Stand zum Zeitpunkt der Erstellung dieses Artikels. Die Benutzeroberfläche oder Bezeichnungen des Tools können sich inzwischen geändert haben. Sollten dir Abweichungen auffallen, empfehlen wir, die aktuellen Anleitungen im Tool zu prüfen, im Hilfe-Center des Anbieters nachzuschauen oder den Support des Anbieters zu kontaktieren.
Schritt 1
Öffne Claude.
Schritt 2
Klicke unten links auf dein Profil und gehe zu „Einstellungen“ → „Konnektoren“.
Klicke anschließend auf „Anpassen“.
Schritt 3
Klicke auf das Plus-Symbol und wähle „Benutzerdefinierten Connector hinzufügen“ aus.
Trage anschließend folgende Daten ein:
Name: Onepage
Remote MCP Server URL: https://mcp.onepage.io/
Erweiterte Einstellungen: Nichts eingeben, bitte leer lassen
Schritt 4
Nun erscheint Onepage in deiner Konnektoren-Liste.
Klicke auf „Verbinden“ und melde dich mit deinem Onepage-Account an.
Danach wirst du automatisch zu Claude weitergeleitet, wo folgende Nachricht erscheint: „Claude möchte auf Ihr Konto zugreifen.“
Klicke nun auf „Zulassen“.
Schritt 5
Klicke auf „Immer erlauben“ und erteile die Berechtigung für alle Optionen.
Dadurch kann Claude mit Onepage arbeiten und eigenständig Websites erstellen, bearbeiten und verwalten.
Video-Tutorial: Onepage MCP in Claude verbinden
Bitte sieh dir das folgende Video mit dem gesamten Ablauf an. Du kannst auf das Vollbild-Symbol (die 4 Pfeile unten rechts) oder direkt auf den Titel des Videos klicken, damit sich das Video im Vollbildmodus öffnet.
🎉 Jetzt ist alles eingerichtet!🎉
Du kannst nun einen Chat in Claude starten und einen Prompt eingeben, um mit dem Erstellen zu beginnen.
💡 Tipp für perfekte Ergebnisse: Wie du deine Befehle noch präziser formulierst, um das Maximum aus der KI herauszuholen, erfährst du in unserem Guide Vibe-Coding: So schreibst du effektive Prompts für bessere Ergebnisse.
Praxisbeispiele & Prompts
Schau dir die folgenden Beispiele an, um ein besseres Gefühl dafür zu bekommen, was du alles bauen kannst und wie du deine Anweisungen für Claude am besten strukturierst. Nutze sie gerne als Inspiration oder kopiere sie direkt, um das Ganze einfach mal zu testen!
Prompt-Beispiel 1: Premium-Marketing-Agentur
„Erstelle ein neues Projekt in Onepage und designe eine Dark-Mode-Homepage mit 8 Bereichen für eine Premium-Growth-Marketing-Agentur, die Kurse anbietet. Der Stil soll ultramodern mit elektrisch-blauen Akzenten sein, inklusive interaktiven Hover-Animationen und weichen Scroll-Fade-ins. Erforderlich sind eine Hero-Section mit fetter Headline und zwei CTAs, eine vertrauenswürdige Logo-Leiste, ein 3-spaltiges Pain-Point-Layout und ein großes, auffälliges Statistik-Raster. Lass darauf dynamische Kursplan-Karten, eine Zielgruppen-Übersicht, ein Testimonial-Masonry-Grid und ganz unten ein kontrastreiches CTA-Anmeldeformular folgen.“
Seite erstellt mit dem oben genannten Prompt:
Prompt-Beispiel 2: Luxus-Immobilienagentur
"Erstelle ein neues Onepage-Projekt für eine futuristische Luxus-Immobilienagentur namens „Nova Living“.
Erstelle eine moderne Premium-Landingpage mit 10–11 Bereichen, darunter Hero-Sektion, Immobilien, Vorteile, Über uns, Testimonials, Team, Statistiken, Prozess, FAQ, Kontaktformular und Footer.
Verwende moderne Layouts, flüssige Animationen, Glassmorphism-Elemente, Farbverläufe, Hover-Effekte und responsives Design. Der Stil soll elegant, futuristisch und conversion-optimiert wirken.
Füge bei Bedarf Platzhaltertexte und Bilder hinzu und gestalte die Website visuell beeindruckend und hochprofessionell."
Seite erstellt mit dem oben genannten Prompt:
Prompt-Beispiel 3: Modernes SaaS-Unternehmen
„Erstelle ein neues Onepage-Projekt für eine SaaS-App namens ‚TaskFlow‘. Designe eine moderne, conversion-orientierte Landingpage mit 8–9 Bereichen: eine klare Hero-Section mit zwei CTAs, eine Partner-Logo-Leiste, ein übersichtliches Feature-Grid, Platzhalter für Produkt-Screenshots, App-Integrationen, eine Preistabelle mit drei Tarifen, echte Kunden-Testimonials, ein FAQ-Bereich und ein finaler Abschluss-CTA. Verwende ein cleanes Layout mit Indigo-Akzenten, weiche Scroll-Animationen und sorge für ein vollkommen responsives Design.“
Seite erstellt mit dem oben genannten Prompt:
Hinweis zum Datenschutz
Mit der Verknüpfung von Claude und Onepage über MCP werden Daten gemäß unseren Datenschutzrichtlinien verarbeitet. Die vollständigen Details findest du in unserer Datenschutzerklärung.
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂