Communitygithub.com

Workspace Landing Page Editor

Verwendung beim Bearbeiten, Aktualisieren oder Iterieren des HTML-Codes der Landingpage eines Workspace (der Magazinstil-Seite /w/:slug). Unterstützt inkrementelle Änderungen – aktuelles HTML abrufen, gezielte Änderungen vornehmen und zurückschreiben. NICHT für die Erstgenerierung – diese erfolgt über das `brief`-Feld, das den serverseitigen LANDING_PAGE_PROMPT gegen Gemini ausführt.

Was ist Workspace Landing Page Editor?

Dieses Skill ermöglicht es KI-Agenten, den HTML-Code der Landingpage eines Workspace inkrementell zu bearbeiten, ohne eine vollständige Neugenerierung auszulösen. Die Landingpage (`/w/:slug`) wird als einzelner HTML-Block auf `workspace.landing_page_html` gespeichert und nur bei Übermittlung eines `brief`-Feldes durch Gemini vollständig neu generiert. Das Skill ist für gezielte Änderungen wie Typografieanpassungen, Layout-Änderungen, Hinzufügen von Abschnitten oder Austausch von Bildern konzipiert. Es verwendet die `astria` CLI und bewahrt wichtige serverseitige Platzhalter wie `__TUNES_JSON_PAYLOAD__`, die von Tailwind-Klassen, Container- und Bildspezifikationen. Der Workflow umfasst das Abrufen des aktuellen HTML, das Bearbeiten mit lokalen Werkzeugen und das Zurückschreiben über `astria landing set`. Nützlich für Entwickler, die feingranulare Updates an Workspace-Seiten vornehmen möchten, ohne die gesamte Seite neu generieren zu lassen.

Funktioniert mit~Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/astriaai/skills/tree/HEAD/landing-page-editor

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Vorschau

Aus dem Skill-README

Dokumentation

Was macht Workspace Landing Page Editor?

Die Landingpage eines Workspace (gerendert unter /w/:slug) ist ein einzelner, in sich geschlossener HTML-Block, der auf workspace.landing_page_html gespeichert ist. Sie wird vom serverseitigen LANDING_PAGE_PROMPT von Grund auf neu generiert, sobald ein brief übermittelt wird – dieser Pfad überschreibt das HTML vollständig.

Für JEDE Änderung, die nicht die gesamte Seite neu generieren soll (Typografie-Tweaks, Layout-Anpassungen, Hinzufügen eines Abschnitts, Ändern von Texten, Austauschen eines Bildes, Korrigieren eines Slogans), bearbeiten Sie das HTML direkt und schreiben Sie es zurück. Senden Sie KEIN brief, es sei denn, der Benutzer wünscht eine vollständige Neugenerierung.

Alle Befehle verwenden die astria CLI (siehe Skill astria-api). Übergeben Sie -w <workspace_id>, um den Workspace anzusprechen.

Aus dem LANDING_PAGE_PROMPT übernommene Einschränkungen

Beim Bearbeiten müssen diese Invarianten eingehalten werden (die Live-Seite /w/:slug hängt davon ab):

  • Die Ausgabe ist innerer Body-HTML – keine <html>, <head>, <body> oder <!DOCTYPE>-Tags
  • Das Styling verwendet Tailwind Utility-Klassen (bereits auf der Seite geladen). Verwenden Sie <style> nur für Hover-/Animationseffekte, die Tailwind nicht ausdrücken kann
  • Pack-Links sind exakt /p/{slug}; Modell-/Referenzlinks verwenden das link-Feld aus dem tunes-JSON unverändert (kodieren Sie %5B/%5D NICHT neu)
  • Jedes Bild / Video ist in ein <a>-Tag eingewickelt
  • Bild- und Video-URLs müssen bereits existierende URLs sein – erfinden Sie keine URLs
  • Videos verwenden <video autoplay muted loop playsinline poster="POSTER_URL"><source src="VIDEO_URL" type="video/mp4"></video>
  • Der String __TUNES_JSON_PAYLOAD__ innerhalb von <script type="application/json" id="tunes-data">…</script> ist ein serverseitiger Platzhalter. Der Server ersetzt ihn zur Renderzeit mit dem aktuellen tunes-JSON. Ersetzen Sie ihn niemals mit buchstäblichem JSON – das friert die Besetzung ein und neu hinzugefügte Tunes werden nicht angezeigt
  • Redaktionelles Styling: Serifen-Überschriften, großzügiger Weißraum, feine Linien, object-cover object-[center_top] bei Porträtbildern, max-h-[70vh] bei Hero-Spreads, aspect-[4/5] oder aspect-[3/4] bei Porträt-Containern

Arbeitsablauf

1. Aktuelles HTML der Landingpage abrufen

astria landing get -w <workspace_id> --html > /tmp/landing_page.html

astria landing get -w <workspace_id> (ohne --html) gibt das vollständige Workspace-JSON zurück – title, slug, brief, url, public_at, unlisted_at – wenn Sie diese benötigen. Zeigen Sie eine Vorschau der gerenderten Seite unter /w/{slug} an.

2. Workspace-Daten abrufen (wenn eine Bearbeitung auf reale Packs / Prompts / Tunes verweisen muss)

astria packs list -w <workspace_id> --limit 100
astria tunes list -w <workspace_id> --limit 200            # die auf der Seite gerenderte "Besetzung"
astria prompts list -w <workspace_id> --limit 100 --offset 0   # Seite mit --offset, bis sie leer ist
astria prompts list -w <workspace_id> --pack-id <pack_id>      # günstiger, ein Abschnitt nach dem anderen

List-Endpunkte paginieren über --limit/--offset (Standardsortierung id absteigend). Wiederholen Sie mit --offset, bis eine Seite leer zurückkommt.

3. Die inkrementelle Bearbeitung durchführen

Bearbeiten Sie /tmp/landing_page.html lokal. Halten Sie Änderungen chirurgisch – der Generator hat Tausende von Bytes Layout produziert, und der Großteil sollte wörtlich erhalten bleiben. Lesen Sie vor dem Speichern erneut den Abschnitt mit den Einschränkungen oben.

4. Die Seite zurückschreiben

astria landing set -w <workspace_id> --html-file /tmp/landing_page.html

Übergeben Sie hier KEIN --brief – das verwirft Ihre Bearbeitungen und generiert über Gemini von Grund auf neu.

5. Überprüfen

Öffnen Sie /w/{slug} und überprüfen Sie die Änderung visuell. Der Platzhalter __TUNES_JSON_PAYLOAD__ wird serverseitig zur Renderzeit ersetzt – wenn auf der gerenderten Seite noch ein JSON-förmiger String angezeigt wird, wurde der Platzhalter versehentlich gelöscht oder umbenannt.

Von Grund auf neu generieren

Nur wenn der Benutzer explizit um ein vollständiges Redesign bittet – senden Sie ein brief und der Server führt den LANDING_PAGE_PROMPT gegen Gemini aus, wobei das HTML überschrieben wird:

astria landing set -w <workspace_id> \
  --brief "Editorial Fashion Lookbook, AW26, dunkle stimmungsvolle Palette, betone die Womenswear-Packs"

Verwandte Skills