Bio-Link-Deployer
Erstelle eine zentrale Linktree-ähnliche Hub-Seite, die all deine Affiliate-Inhalte verlinkt – Blogbeiträge, Landing Pages, Social-Profile und Produktlinks – an einem Ort. Die Ausgabe ist eine einzelne, eigenständige HTML-Datei mit 3 Designoptionen, mobil optimiert (über 90 % des Bio-Link-Traffics ist mobil) und überall bereitstellbar.
Phase
S5: Distribution – Der zentrale Hub, der deinen gesamten Affiliate-Trichter zusammenhält. Setze diesen Link in deine Social-Media-Bios, E-Mail-Signaturen und überall dort, wo du einen Link brauchst, der alle anderen regiert. Im Gegensatz zu Linktree besitzt du die Seite und zahlst nichts.
Wann verwenden
- Benutzer möchte eine Link-in-Bio-Seite für Social-Media-Profile
- Benutzer möchte eine einzelne Seite mit all seinen Affiliate-Inhalten
- Benutzer sagt etwas wie „Linktree“, „Bio-Link“, „Link-Seite“, „Link in Bio“, „alle meine Links“
- Benutzer hat mehrere Affiliate-Produkte/Blogbeiträge/Landing Pages und braucht einen Hub
- Benutzer möchte eine kostenlose Alternative zu Linktree/Beacons/Stan Store
Eingabeschema
user_name: string # ERFORDERLICH – Anzeigename oder Handle (z. B. „@alexcreator“)
tagline: string # OPTIONAL – Kurzbio unter dem Namen
# Standard: automatisch aus Linkkategorien generiert
avatar_url: string # OPTIONAL – URL zum Profilbild
# Standard: Emoji-Platzhalter basierend auf Nische
links: # ERFORDERLICH – mindestens 3 Links
- label: string # Anzeigetext (z. B. „HeyGen – KI-Video-Ersteller“)
url: string # Ziel-URL
category: string # Gruppenbezeichnung (z. B. „Tools“, „Meine Inhalte“, „Verbinden“)
icon: string # OPTIONAL – Emoji zur Visualisierung (z. B. „🎬“)
theme: string # OPTIONAL – „minimal“ | „dark“ | „gradient“
# Standard: „minimal“
Verkettungskontext: Wenn zuvor Fähigkeiten (S1–S4) im Gespräch ausgeführt wurden, verwende diese Ausgabeschemafelder:
- S1
recommended_program.url+.name→ als „Vorgestellte Tools“-Links hinzufügen - S2
posts[].platform→ zu den Social-Media-Profilen des Benutzers verlinken - S3
products_featured[].url+.name→ als „Meine Inhalte“-Links (Blogbeiträge) hinzufügen - S4
landing_page.filenameoder bereitgestellte URL → als „Landing Pages“-Links hinzufügen - S4
products_featured[].url+.name→ als Produktlinks hinzufügen, falls nicht bereits enthalten
Falls der Benutzer sagt „Erstelle mir einen Bio-Link mit allem, was wir gemacht haben“ – sammle alle Produkte, Blogbeiträge und Landing Pages aus dem Gespräch und ordne sie in Kategorien.
Workflow
Schritt 1: Links sammeln
Sammle Links aus einer dieser Quellen:
Option A – Benutzer liefert Links direkt:
Verwende das links-Array wie angegeben. Stelle sicher, dass jeder Link eine Bezeichnung, URL und Kategorie hat.
Option B – Aus Gesprächskontext sammeln: Wenn zuvor Fähigkeiten (S1–S4) ausgeführt wurden, sammle:
- Produkt-Affiliate-URLs → Kategorie: „Vorgestellte Tools“
- Blogbeitrags-URLs → Kategorie: „Meine Inhalte“
- Landing-Page-URLs → Kategorie: „Landing Pages“
- Social-Media-Profile (falls erwähnt) → Kategorie: „Verbinden“
Option C – Benutzer liefert Teilinformationen: Frage nach fehlenden Pflichtfeldern. Minimum: user_name + 3 Links.
Ordne Links nach Kategorien. Empfohlene Kategorienreihenfolge:
- „Vorgestellte Tools“ (Affiliate-Produktlinks – Geldlinks zuerst)
- „Meine Inhalte“ (Blogbeiträge, Landing Pages, Videos)
- „Verbinden“ (Social Media, E-Mail, Website)
Schritt 2: Seite erstellen
Lies templates/bio-link.html für die Seitenstruktur und alle drei Designvarianten.
Wende das gewählte theme an:
Minimal (Standard):
- Sauberer weißer Hintergrund, dezenten Rahmen
- Dunkler Text, helle graue Akzente
- Abgerundete Ecken (12px)
- Am besten geeignet für: professionellen, sauberen Look
Dark:
- Dunkelblauer Hintergrund (#0f172a)
- Helle Schrift, blaue Akzente
- Dezente Kartenrahmen
- Am besten geeignet für: Technik, Gaming, moderne Marken
Gradient:
- Lila-blauer Farbverlaufshintergrund
- Weiße Schrift, Glas-Effekt-Link-Karten
- Große abgerundete Ecken (24px)
- Am besten geeignet für: kreative, Lifestyle, mutige Marken
Setze CSS-Variablen in :root basierend auf dem gewählten Design. Entferne die anderen Designblöcke aus der Vorlage.
Falls avatar_url angegeben ist, verwende ein <img>-Tag. Andernfalls verwende das Emoji-Platzhalter-Div mit einem Emoji, das zur Nische des Benutzers passt (Standard: 🚀).
Schritt 3: Ausgabe
Präsentiere die endgültige Ausgabe in dieser Struktur:
Teil 1: Seitenzusammenfassung
---
BIO-LINK-SEITE
---
Name: [user_name]
Design: [minimal/dark/gradient]
Links: [Anzahl]
Kategorien: [Liste]
---
Teil 2: Vollständiges HTML
Die vollständige HTML-Datei in einem Codeblock (```html). Speichere als index.html (oder links.html) und öffne sie in einem beliebigen Browser.
Teil 3: Bereitstellungsanleitung
Lies references/domain-setup.md und gib die Bereitstellungsoptionen an:
---
BEREITSTELLEN
---
1. Speichere als `index.html`
2. Vorschau: öffne die Datei in deinem Browser
3. Bereitstellen (wähle eine):
- Netlify Drop: ziehe die Datei auf https://app.netlify.com/drop (30 Sekunden)
- Vercel: `npx vercel deploy --prod` (benötigt Node.js)
- GitHub Pages: pushe in ein Repository → Einstellungen → Pages → Main-Branch
4. Füge sie in deine Social-Media-Bios ein: füge die URL in dein Instagram-, X-, TikTok-, LinkedIn-Bio ein
5. Benutzerdefinierte Domain: siehe references/domain-setup.md für DNS-Einrichtungsanleitung
---
Schritt 4: Selbstvalidierung
Überprüfe vor der Ausgabe:
- Alle Links sind funktionsfähige URLs (keine Platzhalter)
- Mobile-First-Layout wird korrekt bei 375px Breite dargestellt
- Design-CSS-Custom-Properties werden konsistent angewendet
- FTC-Disclosure vorhanden, falls Affiliate-Links enthalten sind
- „Erstellt mit Affiliate Skills von Affitor“-Footer vorhanden
- Geldlinks (Affiliate) vor Social-/Inhaltslinks angeordnet
Wenn eine Prüfung fehlschlägt, korrigiere die Ausgabe vor der Lieferung. Zeige die Checkliste dem Benutzer nicht an – stelle nur sicher, dass die Ausgabe die Prüfung besteht.
Ausgabeschema
output_schema_version: "1.0.0" # Semver – erhöhe Major bei Breaking Changes
bio_link:
user_name: string # Anzeigename
theme: string # Angewandtes Design
html: string # Vollständige, eigenständige HTML-Datei
filename: string # Vorgeschlagener Dateiname (z. B. „index.html“)
link_count: number # Gesamtanzahl der Links auf der Seite
categories: string[] # Verwendete Kategorien
deploy:
local: string # „Öffne index.html im Browser“
netlify: string # Netlify-Drop-Anleitung
vercel: string # Vercel-Bereitstellungsbefehl
github_pages: string # GitHub-Pages-Anleitung
Ausgabeformat
Präsentiere die Ausgabe in drei klar getrennten Abschnitten:
- Seitenzusammenfassung – Name, Design, Linkanzahl, Kategorien
- HTML – die vollständige Datei in einem Codeblock, bereit zum Speichern
- Bereitstellungsanleitung – wie die Seite live geschaltet und in Social-Media-Bios eingefügt wird
Das HTML sollte sofort nutzbar sein – speichere es als .html, öffne es im Browser, und es funktioniert. Kein Build-Schritt, keine Abhängigkeiten, mobil optimiert.
Fehlerbehandlung
- Keine Links bereitgestellt: „Ich brauche mindestens 3 Links, um deine Bio-Seite zu erstellen. Nenne mir deine Affiliate-Produkt-URLs, Blogbeiträge, Social-Profile oder Landing Pages.“
- Kein user_name: „Welchen Namen oder Handle soll ich anzeigen? (z. B. @deinnutzername)"
- Ungültige avatar_url: Verwende stattdessen Emoji-Platzhalter. Hinweis: „Ich konnte das Avatarbild nicht laden, daher habe ich einen Emoji-Platzhalter verwendet. Du kannst es später ersetzen, indem du das HTML bearbeitest.“
- Unbekanntes Design: Standardmäßig auf minimal setzen. Informiere: „Ich habe das Design „minimal“ verwendet. Verfügbare Designs: minimal, dark, gradient.“
- Zu viele Links (20+): Alle einschließen, aber vorschlagen: „Das sind viele Links – ziehe in Betracht, die wichtigsten 10–15 hervorzuheben und für den Rest auf eine vollständige Verzeichnisseite zu verlinken.“
- Keine Kategorien angegeben: Automatisch basierend auf URL-Mustern kategorisieren (Social-Domains → „Verbinden“, Blog-URLs → „Meine Inhalte“, Produkt-URLs → „Tools“).
Beispiele
Beispiel 1: Vollständige Eingabe
Benutzer: „Erstelle eine dunkle Bio-Link-Seite für @sarahcontent mit diesen Links: HeyGen (heygen.com/ref), Semrush (semrush.com/ref), Mein HeyGen-Review (blog.com/heygen), Folge mir auf X (x.com/sarah)“ Aktion: theme=dark, in 3 Kategorien organisieren (Tools, Inhalte, Verbinden), HTML generieren.
Beispiel 2: Aus Gesprächskontext
Benutzer: „Erstelle mir eine Bio-Link-Seite mit allem, was wir heute gemacht haben“ Kontext: S1 hat HeyGen gefunden, S3 hat einen Blogbeitrag geschrieben, S4 hat eine Landing Page erstellt Aktion: Alle URLs aus dem Gespräch sammeln, automatisch kategorisieren, Standard-Design=minimal, HTML generieren.
Beispiel 3: Minimale Eingabe
Benutzer: „Ich brauche eine Link-in-Bio-Seite“ Aktion: Nach user_name und Links fragen. Beispiel geben: „Wie ist dein Anzeigename und welche Links möchtest du? Zum Beispiel: Produkt-URLs, Blogbeiträge, Social-Profile.“
Referenzen
templates/bio-link.html– Bio-Link-Seitenvorlage mit 3 Designvarianten (minimal, dark, gradient). In Schritt 2 lesen.references/domain-setup.md– Hosting- und Domain-Einrichtungsanleitung für Netlify Drop, Vercel, GitHub Pages. In Schritt 3 lesen.shared/references/ftc-compliance.md– FTC-Disclosure für Bio-Link-Seiten (Footer-Text). In Schritt 2 referenzieren.shared/references/affitor-branding.md– Affitor-Footer-HTML. In Schritt 2 referenzieren.shared/references/flywheel-connections.md– Master-Flywheel-Verbindungskarte
Umsatz & Aktionsplan
Erwartete Ergebnisse
- Umsatzpotenzial: Dein Bio-Link ist der Trichtereingang für den GESAMTEN Social-Media-Traffic. Die durchschnittliche Bio-Link-Klickrate (CTR) liegt bei 1–3 % der Profilbesucher. Bei 5.000 monatlichen Profilaufrufen → 50–150 Klicks → bei 3 % Affiliate-Conversion und 50 € Provision = 75–225 €/Monat. Top-Ersteller mit optimierten Bio-Links berichten von 500–2.000 €/Monat
- Benchmark: Geldlinks (Affiliate-Produkte) an Position 1–2 erhalten 60 % aller Bio-Link-Klicks. Die Position ist wichtiger als das Design
- Wichtige Kennzahl: Klickrate pro Link – welche Links werden am häufigsten geklickt? Wöchentlich neu anordnen, um den leistungsstärksten Link ganz oben zu halten
Erledige das jetzt (15 Min.)
- Seite bereitstellen – Netlify Drop verwenden (ziehen und ablegen, 30 Sekunden)
- ALLE deine Social-Media-Bios aktualisieren – Instagram, TikTok, X, LinkedIn, YouTube – mit der neuen Bio-Link-URL
- Auf Mobilgeräten überprüfen – Über 90 % des Bio-Link-Traffics ist mobil. Öffne den Link jetzt auf deinem Telefon
- Analytik speichern – Wenn du Netlify verwendest, überprüfe Netlify Analytics oder füge ein kostenloses Analytik-Snippet hinzu
Verfolge deine Ergebnisse
Nach 7 Tagen: Welcher Link erhält die meisten Klicks? Ist es dein wichtigstes Affiliate-Produkt? Wenn nicht, ordne die Links neu – setze den Geldlink auf Position #1. Überprüfe wöchentlich und rotiere basierend auf der Leistung.
Nächster Schritt – kopiere diesen Prompt: „Stelle meine Bio-Link-Seite auf GitHub Pages mit einer benutzerdefinierten Domain bereit“ → führt
github-pages-deployeraus
Flywheel-Verbindungen
Speist ein in
conversion-tracker(S6) – bereitgestellte Link-Hub-URLs zum Verfolgen von Klicksgithub-pages-deployer(S5) – Bio-Link-HTML zur Bereitstellung
Wird gespeist von
landing-page-creator(S4) – Landing-Page-URLs zum Hinzufügen zum Link-Hubsqueeze-page-builder(S4) – Squeeze-Page-URLs für den Link-Hubwebinar-registration-page(S4) – Registrierungsseiten-URLs für den Link-Hub
Feedback-Schleife
conversion-tracker(S6) zeigt, welche Bio-Links die meisten Klicks erhalten → Links neu anordnen, um die mit der höchsten Konversion nach oben zu setzen
Qualitätssicherung
Überprüfe vor der Ausgabe:
- Würde ich das auf MEINEN persönlichen Social-Media-Kanälen teilen?
- Enthält es spezifische, überraschende Details? (nicht allgemein)
- Respektiert es die Intelligenz des Lesers?
- Ist es bemerkenswert genug zum Teilen? (Purple-Cow-Test)
- Unwiderstehliche Angebotsgestaltung? (falls S4-Angebotsfähigkeiten ausgeführt wurden)
Jedes NEIN → vor der Ausgabe umschreiben.
chain_metadata:
skill_slug: "bio-link-deployer"
stage: "distribution"
timestamp: string
suggested_next:
- "github-pages-deployer"
- "conversion-tracker"