forja-landing

forja-landing — Das Skill, das Landings schmiedet

Dieses Skill erstellt kinoreife Landing Pages in derselben Qualität wie carlosdominguez.com.mx, angepasst an jeden Geschäftstyp:

• Personal Brand / Berater — Hero fokussiert auf die Person, starkes About, Dienstleistungen, Fallbeispiele
• SaaS / Digitales Produkt — Features Bento, Prozess, Lead Magnet, CTA für Trial/Demo
• Agentur / Studio — Projektportfolio, Dienstleistungen, Team, Prozess
• Physisches Produkt — Visueller Katalog, Vorteile, Social Proof, Direktkauf
• Kurs / Community — Wertversprechen, Zielgruppe, Inhalt, Zugang
• Klinik / Lokaler Dienst — Dienstleistungen, Prozess, Vertrauen, Termin/Kontakt

Was nie wechselt:

• Video Hero Seedance 2.0 (MUAPI) — kinoreifer Loop, on-demand generiert
• Editoriale Typografie — Fraunces (Display) + Geist (Fließtext), Mix aus Kursiv/Fett
• Anti-AI-Slop-Palette — tiefes Schwarz + Ember Amber-Rot, ohne klischeehafte Verläufe
• Asymmetrisches Bento — abwechslungsreiche Karten, Poster-Karten für Highlights
• Integrierte Kritik — automatische Überprüfung anhand von 10 Designqualitätsdimensionen
• Web-Audit — Performance, a11y, SEO-Checks vor dem Deployment

Befehle

Verwendung mit /forja <befehl> in Claude Code:

Befehl	Funktion
/forja build	Interview + Abschnittsauswahl + Hero-Video + angepasstes Grundgerüst
/forja critique	Anti-AI-Slop-Review + Anti-Patterns + Vorschläge
/forja polish	Wendet automatische Fixes aus der Kritik an
/forja audit	Performance + a11y + SEO-Checks im Stil von Lighthouse
/forja deploy	Deployment zu Vercel + Custom Domain + OG-Verifikation

Verfügbare Abschnitte

Das Skill enthält diese Abschnitte. /forja build wählt die richtigen basierend auf dem Landing-Typ aus:

Abschnitt	Wann einfügen
Hero	Immer
ScrollStops	Immer — Problem / Lösung / Methode
About	Personal Brand, Berater, Klinik, Agentur
Services	Jeder, der Dienstleistungen oder Features verkauft
Portfolio	Agentur, Entwickler, Designer, Berater mit Fallbeispielen
Process	Wenn „Wie wir arbeiten“ ein Unterscheidungsmerkmal ist
LeadMagnet	SaaS, Kurs, Berater — E-Mail-Erfassung
Communities	Kurs, Community, Mitgliedschaft
CtaFinal	Immer
Footer	Immer

Prinzipien

1. Copy zuerst, Code danach. Der Bauplan kommt immer vor dem Zusammensetzen.
2. Anti-AI-Slop standardmäßig. Keine Lila-Blau-Verlauf-Buttons, keine drei identischen Karten, kein Inter auf Weiß.
3. Typografie als Identität. Charaktervolle Serifenschrift. Kursiv als Akzent.
4. Scroll-Rhythmus. Jeder Abschnitt bricht mit dem vorherigen. Keine eintönige Rasterung.
5. Ember-Palette. Dunkler Hintergrund + Amber-Rot-Akzente nur dort, wo es zählt.
6. Anpassen, nicht aufzwingen. Die Abschnitte werden je nach Geschäft ausgewählt. Nicht jeder braucht Portfolio oder Communities.

Workflow

/forja build

Schritt 1 — Landing-Typ + Identität (Block 1):

Welche Art von Landing Page bauen wir?
  A. Personal Brand / Berater / Freelancer
  B. SaaS oder digitales Produkt
  C. Agentur oder kreatives Studio
  D. Physisches Produkt / E-Commerce
  E. Kurs oder Community
  F. Klinik oder lokaler Dienst
  G. Andere (beschreibe)

1. Wie heißt du / wie heißt deine Marke?
2. Ein Positioning-Einzeiler (30-40 Wörter):
3. Für wen? (spezifische Zielgruppe):

Schritt 2 — Angebot und Stil (Block 2):

4. Liste 2-4 Hauptdienstleistungen, -produkte oder -features (je 1 Zeile):
5. Was ist der primäre CTA? (WhatsApp / Calendly / Direktkauf / Formular / Demo):
6. Visuelles Vibe: handwerklich · mutig · minimalistisch · energisch — oder beschreibe:

Schritt 3 — Abschnittsauswahl (Vorschlag vor dem Bau):

Basierend auf Landing-Typ und Antworten vorschlagen:

• Die empfohlenen Abschnitte in Reihenfolge
• 3 Optionen für H1 mit Kursiv/Fett-Struktur in Fraunces
• Der Seedance-Prompt, an das Vibe angepasst

Auf Bestätigung des Benutzers warten, bevor ausgeführt wird.

Schritt 4 — Hero-Video mit Seedance (optional):

Wenn MUAPI_API_KEY in .env.local vorhanden ist:

• Führe scripts/generate_hero.py mit dem an das Vibe angepassten Prompt aus
• Lade das MP4 nach public/hero/ herunter

Ohne Schlüssel: Canvas Embers als kinoreifer Fallback.

Schritt 5 — Komponenten-Grundgerüst:

Kopiere nur die ausgewählten Abschnitte von templates/components/ nach src/features/landing/components/.

Schritt 6 — Texterstellung:

Fülle src/features/landing/data/content.ts mit echten Texten basierend auf dem Interview. Keine Platzhalter.

Schritt 7 — Designsystem:

Aktualisiere src/app/globals.css + tailwind.config.ts mit der Ember-Palette + Fraunces/Geist.

/forja critique

Lese routes/critique.md. Führe eine Überprüfung anhand von 10 Dimensionen durch:

1. AI Slop Detection (kritisch)
2. Visual Hierarchy
3. Information Architecture
4. Emotional Resonance
5. Discoverability & Affordance
6. Composition & Balance
7. Typography as Communication
8. Color with Purpose
9. States & Edge Cases
10. Microcopy & Voice

Ausgabe: Priorisierter Bericht mit kritischen + hohen + niedrigen Problemen.

/forja audit

Lese routes/audit.md. Führe Checks im Lighthouse-Stil durch:

• Performance (geschätzte LCP, CLS, INP)
• Accessibility (Kontrast, Fokus, aria, semantisches HTML)
• SEO (Metadaten, Sitemap, robots, JSON-LD)
• Best Practices (HTTPS, saubere Console, keine veralteten APIs)

/forja deploy

Lese routes/deploy.md. Leite das Deployment zu Vercel an:

• Validiere lokalen Build
• Führe Commit + Push durch, falls nötig
• Führe vercel --prod aus
• Konfiguriere Custom Domain, falls angegeben
• Überprüfe OG-Bild in der Produktion

Anti-Patterns (NICHT machen)

• Blau→Lila-Verläufe in CTAs
• Drei identische Karten mit generischem Icon + Titel + Absatz
• Inter 400 auf reinweißem Hintergrund
• „Empower your business with AI“ und ähnliche Phrasen
• Glassmorphism überall
• Dark Mode mit leuchtenden Akzenten „tech tech tech“
• Metrik-Hero mit Emojis statt Zahlen
• Portfolio-Abschnitte, wenn das Business keine Fallbeispiele hat
• Communities-Abschnitt, wenn es keine echte Community gibt

Referenz

Skill entworfen von Carlos Domínguez. Forge-Methodik angewendet auf Landings.

• Landing Demo: https://carlosdominguez.com.mx
• Skill Repo: https://github.com/Carlos-Dominguez-faber/forja-landing