5 aufeinander aufbauende Prompts — von der Struktur deines Portals über das Design bis zum fertigen Launch. Passe alle Platzhalter an dein eigenes Portal an und führe die Schritte der Reihe nach aus.
<aside>
So verwendest du diesen Masterprompt:
Kopiere jeden Schritt einzeln in Claude oder ChatGPT. Ersetze alle [PLATZHALTER IN ECKIGEN KLAMMERN] mit deinen eigenen Informationen.
Schritt 1 liefert die Grundlage für alle weiteren — nicht überspringen!
</aside>
Ich erstelle ein Mitglieder-Portal in Memberspot für [DEINE ZIELGRUPPE] (z.B. Coaches, die ihr Wissen digital verkaufen).
Das Portal soll alle wichtigen Inhalte auf einer zentralen Startseite bündeln — Kurse, Ressourcen, Ansprechpartner und regelmäßige Updates.
Erstelle mir eine vollständige Startseiten-Struktur mit folgenden Sektionen von oben nach unten:
1. Hero-Banner mit Portalname und Willkommens-Slogan
2. Persönliches Profil des eingeloggten Mitglieds + direkter Link zu den Kursen
3. Haupt-Ressource (z.B. Lead-Magnet, kostenloser Download oder Featured Content) + eingebettetes Video (z.B. YouTube iFrame)
4. Team-Vorstellung: Gründer/Experten [NAME 1] & [NAME 2] + zuständige Ansprechperson [NAME]
5. Nächstes Event (z.B. Webinar, Live-Call, Workshop) + Archiv vergangener Aufzeichnungen
6. Ressourcen-Reihe: 4 Kacheln mit Icons für wichtige Materialien (z.B. Guides, Templates, Checklisten, Replays)
7. Bibliothek / Tutorial-Bereich als verlinkter CTA-Block
Für jede Sektion: Zweck, empfohlener Inhalt, Hinweis zur Umsetzung in Memberspot.
Meine Angaben:
— Portalname: [NAME]
— Slogan: [SLOGAN] (z.B. "Hier lernst du, wächst du, vernetzt du dich.")
— Zielgruppe: [ZIELGRUPPE]
— Ton: [TON] (z.B. warm & persönlich, du-Ansprache, kein Corporate-Speak)
— Ansprechperson im Portal: [NAME & ROLLE]
Du erstellst ein pixel-genaues HTML-Mockup einer Memberspot-Portal-Startseite als Layout-Vorlage. Ziel: Jeder Block entspricht exakt einem real verfügbaren Memberspot-Widget — damit das Ergebnis 1:1 im Memberspot-Editor nachbaubar ist.
━━ NAVIGATION (Sticky) ━━━━━━━━━━━━━━━━━━
Hintergrund: rgba(255,255,255,0.92) + backdrop-filter blur(16px)
Border-bottom: 1px solid rgba(Primärfarbe, 0.1)
Inhalt: Logo links · Nav-Links Mitte (Home, Meine Kurse, Community) · Avatar-Kreis rechts
Aktiver Link in Primärfarbe, unterstrichen
1. Banner-Widget — Hero mit Portalname, Slogan und CTA
2. Profil-Widget — persönliche Begrüßung mit Vornamen-Platzhalter, Fortschrittsanzeige, direkter Link zu den Kursen
3. Video-Widget — Haupt-Ressource (Lead-Magnet / Featured Content) + eingebettetes Video (YouTube iFrame als Kommentar im Code)
4. Team-Widget — Gründer:in/Expert:in + zuständige Ansprechperson (jeweils Avatar, Name, Rolle, Bio; bei der Ansprechperson zusätzlich Kontakt-Link)
5. Termin-Widget — nächstes Live-Event prominent (mit pulsing Live-Badge) + Archiv vergangener Aufzeichnungen (3 Kacheln)
6. Kachel-Widget — 4 Ressourcen-Kacheln mit Icon, Titel und einem Satz Description
7. CTA-Banner-Widget — verlinkter CTA-Block zur Bibliothek / zum Tutorial-Bereich
Wichtig: Für jedes Widget direkt fertige Titel im vorgegebenen Ton einfügen — kein „Lorem Ipsum", keine Platzhalter. Titel sind so geschrieben, dass sie 1:1 übernommen werden können. Zusätzlich ein kleines Widget-Label pro Sektion (über einen Toggle ein-/ausblendbar) als Mapping-Hilfe für den Editor.
Technische Anforderungen:
— Reines HTML/CSS/JS, kein Framework, alles in einer Datei
— Sticky Navigation oben mit Logo + Links + Mobile-Burger
— Responsive (Mobile-First)
— Alle Kacheln mit einheitlicher Card-Struktur und Hover-Transform (translateY + Schatten)
— Seitenhintergrund = reines Weiß (#FFFFFF); nur einzelne Widgets/Banner tragen Farbe
— Border-radius 16–20px für Kacheln, etwas größer für große Banner; viel Weißraum
— Kacheln im 4er-Grid in den Varianten weiß / primär / akzent / hell
— Video-Slot als Platzhalter-Facade mit YouTube-iFrame-Snippet als HTML-Kommentar (youtube-nocookie für DSGVO)
Meine Angaben:
— Portalname: [Platzhalter]
— Slogan: [Platzhalter]
— Zielgruppe: [Platzhalter]
— Ton: [Platzhalter] warm & persönlich, du-Ansprache, motivierend
— Gründer:in / Expert:in: [Platzhalter NAME + Rolle]
— Ansprechperson im Portal: [Platzhalter NAME – Deine Ansprechperson]
— Haupt-Ressource (Widget 3): Video-Kurs „Erste Schritte"
— Nächstes Event (Widget 5): [Titel + Datum/Uhrzeit, z.B. „Frag-mich-alles Live · Mi 28.5. · 20 Uhr"]
— Beispielname Mitglied -> in memberspot wählbar
— 4 Ressourcen-Kacheln (Widget 6): [Titel 1, Titel 2, Titel 3, Titel 4 — z.B. Guides, Vorlagen, Checklisten, Replays]
— CI-Farben (auf weißem Hintergrund):
• Primär: [HEX, z.B. #7A00D1]
• Akzent: [HEX, z.B. #FF00D4]
• Dunkel: [HEX, z.B. #7D0B6A]
• optional: Hell-Variante: [HEX, z.B. #FFEDFE]
— Fonts: [Platzhalter] [Display-Font für Headlines + Body-Font — z.B. TT Firs + Inter; falls Display-Font nicht frei verfügbar, passenden Google-Fonts-Fallback laden]
— Stil: [Platzhalter] [z.B. modern, lebendig, freundlich]
━━ ANIMATIONEN (CSS @keyframes) ━━━━━━━━━
fadeUp: from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) }
float: 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) }
pulse: 0%,100% { opacity:1 } 50% { opacity:0.3 }
Alle Karten beim Laden: animation fadeUp 0.5s ease both, staggered via animation-delay
━━ TECHNISCHE ANFORDERUNGEN ━━━━━━━━━━━━━
— Reines HTML/CSS/JS, kein Framework
— max-width: 860px, margin: 0 auto, padding 1.5rem, body background #FFFFFF
— Zwischen Widgets: 12px gap
— Alle Kacheln innerhalb einer Reihe: gleiche min-height
— Keine externen Bilder — alle Elemente via CSS
— Responsive: unter 600px alle Spalten → 1 Spalte (außer 5er-Grid → 2+3 Zeilen)
— Transitions: 0.2s ease auf allen interaktiven Elementen
<aside> <img src="notion://custom_emoji/7660af0a-969c-813c-9823-000354ec818a/3250af0a-969c-80e9-8cb1-007aec3107ea" alt="notion://custom_emoji/7660af0a-969c-813c-9823-000354ec818a/3250af0a-969c-80e9-8cb1-007aec3107ea" width="40px" />
Füge die HTML Datei in Figma ein, um dort noch die letzten Anpassungen zu machen. Du kannst das Portal dann so nachbauen, wie du es in Figma erstellt hast. Dort kannst du die einzelnen Kacheln herunterladen und in deinem Portal einfügen. Nutze dazu das Plugin: html.to.design → damit sind 5 HTML Dateien pro Monat kostenlos. Das Plugin ist auch ohne Figma Abo nutzbar.
Du kannst die Datei auch direkt als HTML-Code in Memberspot einfügen. Nutze dazu die Custom Code Kachel. Dabei musst du beachten, dass alle Verlinkungen korrekt sind. Setze in Kachel xy den folgenden Link [Link] ein, sodass die richtigen Verlinkungen hinterlegt sind.
Beispiel: Lege hinter der Kachel “Zu meinen Kursen” den Link https://community.memberspot.de/library/1NixcmPT6TjSu2s82S2r.
</aside>
Erstelle mir für jede der folgenden Portal-Kacheln einen Bildgenerierungs-Prompt für [DEIN TOOL] (z.B. Midjourney, DALL-E, Adobe Firefly, Nanobanana)
Einheitlicher Stil-Anker (gilt für alle Bilder):
— Design-Stil: [STIL] (z.B. Glassmorphism / 3D-Illustration / Abstract Gradient / Flat Design)
— Primärfarbe: [HEX], Akzentfarbe: [HEX], Hintergrund: [HEX]
— Format: 16:9 Wide, kein Text, keine Logos, kein Gesicht
— Stimmung: [STIMMUNG] (z.B. modern & professionell / warm & einladend / energetisch & motivierend)
Meine Bereiche:
1. Hero-Banner — [THEMA] (z.B. Wissen, Wachstum, digitale Akademie)
2. [BEREICH 1] (z.B. Kurse — Lernen, Fortschritt)
3. [BEREICH 2] (z.B. Ressourcen — Bibliothek, Werkzeuge)
4. [BEREICH 3] (z.B. Events — Live, Kalender)
5. [BEREICH 4] (z.B. Community — Vernetzung, Austausch)
6. [BEREICH 5] (z.B. Updates — News, Innovation)
7. Team-Kachel — Personen, Vertrauen, Ansprechpartner
8. Tutorial Library — Wissen, geordnet, Zugang
Wichtig:
Generiere alle Bilder in einer Session hintereinander, damit das Modell den Stil im Gedächtnis behält. Falls ein Bild nicht passt: "Same visual style, lighting and mood as the previous image — new scene: [BESCHREIBUNG]"