Feishu Portfolio Launch

Was diese Skill macht

Kurz gesagt: Gib mir einen Feishu-Bitable-Link, ich baue ein Portfolio-Website und kümmere mich automatisch darum, dass temporäre Feishu-Links nicht ablaufen.

Standard-Lieferumfang:

index.html oder eine statische Frontend-Seite
api/videos.json
api/covers.json
api/portfolio.json
refresh.py
.github/workflows/refresh.yml
Interaktive Frontend-Schicht mit Animationen (CSS / JS / Canvas / Three.js)

Integrierte Vorlagen:

Zielergebnis:

Die Website wird auf GitHub Pages bereitgestellt
Feishu-Medienlinks werden alle 12 Stunden automatisch über GitHub Actions aktualisiert
Der Benutzer muss seinen Computer nicht eingeschaltet lassen
Die Seite ist nicht rein statisch, sondern hat mindestens einen vollständigen Satz an Ein-/Scroll-/Hover-/Seitenübergangseffekten

Anwendungsfälle

✅ Geeignet für:

KI-Video-/Bild-Portfolios
Fotografie-, Design- und kreative Musterbibliotheken
Kundenfallstudien-Seiten
Jedes Szenario, in dem „Inhalte in Feishu-Anhängen sind und das Frontend nur anzeigt“

❌ Nicht geeignet für:

Text- und Bildblogs
E-Commerce, Zahlungen, Anmeldesysteme
Websites, die Datenbank-Schreibvorgänge und Backend-Logik erfordern

Kernprinzipien

Behandle temporäre Feishu-URLs nicht als dauerhafte Ressourcen.

Die Abspiel-/Download-URLs von Feishu-Anhängen laufen ab. Der richtige Weg ist nicht, dass der Benutzer regelmäßig ein Skript auf seinem lokalen Computer ausführt, sondern:

Lies die neuesten Datensätze aus der Feishu-Bitabelle
Rufe die Feishu-API auf, um den file_token des Anhangs in eine temporäre URL aufzulösen
Generiere api/*.json
Committe zurück ins GitHub-Repository
Lasse GitHub Pages automatisch neu bereitstellen

Also:

Feishu Bitable -> refresh.py -> api/*.json -> GitHub Pages

Ausführungsablauf

Schritt 0: Umgebungsprüfung

Zuerst prüfen, ob die erforderlichen Tools für die Initialisierung lokal vorhanden sind:

for cmd in node python3 gh git; do
  which "$cmd" >/dev/null 2>&1 && echo "OK  $cmd" || echo "MISS $cmd"
done
lark-cli --version >/dev/null 2>&1 && echo "OK  lark-cli" || echo "MISS lark-cli"
gh auth status >/dev/null 2>&1 && echo "OK  GitHub auth" || echo "MISS GitHub auth"

Wenn ein Tool fehlt, lasse den Benutzer es installieren. Wenn gh nicht angemeldet ist, führe zuerst die GitHub-Anmeldung durch.

Schritt 1: Feishu Base und die richtige Tabelle finden

Bitte den Benutzer um den Feishu-Bitable-Link, z.B.:

https://my.feishu.cn/base/AbCdEfGhIjk

Extrahiere den app_token aus der URL.

Dann liste alle Tabellen auf:

lark-cli api GET "/open-apis/bitable/v1/apps/${APP_TOKEN}/tables"

Wähle nicht automatisch die erste Tabelle aus. Viele Bases enthalten gleichzeitig eine „leere Vorlagentabelle“ und eine „Materialtabelle mit echten Werken“. Fahre fort, Datensätze zu lesen und zu überprüfen:

Welche Tabelle hat echte Anhangsfelder?
Welche Tabelle hat die richtige Anzahl an Datensätzen?
Welche Tabelle enthält Feldnamen, die der Benutzer anzeigen möchte?

Priorität bei der Suche nach diesen Feldern:

Videofeld: 样片 / 视频 / 附件 (Muster / Video / Anhang)
Coverfeld: 封面 / 封面图 / 海报 / 图片 (Cover / Coverbild / Plakat / Bild)
Titelfeld: 内容 / 标题 / 作品名称 (Inhalt / Titel / Werkname)
Kategoriefeld: 类型 / 分类 (Typ / Kategorie)
Dauerfeld: 时长 (Dauer)
Tool-Feld: AI工具 / 工具 (KI-Tool / Tool)
Sortierfeld: 序号 (Reihenfolge)

Wenn eine Tabelle nur leere Vorlagenfelder wie Text / Einfachauswahl / Datum / Anhang hat, wechsle die Tabelle und generiere keine Website.

Schritt 2: Feishu-Berechtigungen überprüfen

Damit GitHub Actions automatisch aktualisieren kann, muss die Feishu-App mindestens Folgendes können:

Datensätze aus der Bitable lesen
Medienlinks von Anhängen lesen

Der Ausführungsplan muss explizit von diesen 4 Secrets abhängen:

LARK_APP_ID
LARK_APP_SECRET
LARK_BASE_TOKEN
LARK_TABLE_ID

Wenn der Benutzer bereits eine funktionierende Feishu-App-Konfiguration auf seinem Computer hat, kann diese wiederverwendet werden. Andernfalls muss der Benutzer klar aufgefordert werden, auf der Feishu Open Platform die Berechtigungen und Schlüssel zu ergänzen.

Schritt 3: Strukturierte Werkdaten exportieren

Extrahiere nicht nur die Liste der file_tokens. Erstelle stattdessen strukturierte Daten, die das Frontend direkt konsumieren kann, mindestens:

title
categories
duration
tools
order
video_token
cover_token

Empfohlene Ausgabe:

api/portfolio.json: Vollständiges Array der Werke
api/videos.json: video_token -> tmp_download_url
api/covers.json: cover_token -> tmp_download_url

Ein Beispiel für die Struktur findest du direkt im Repository unter assets/portfolio.sample.json.

Das Frontend kann weiterhin statisches HTML + JS verwenden oder vollständig von portfolio.json gerendert werden.

Schritt 4: Frontend-Seite generieren

Standardmäßig eine statische Seite generieren, mit folgenden Anforderungen:

Responsives Werke-Raster
Kategorie-Filter
Beim Klick auf eine Karte abspielen
Vollbild-Vergrößerung zum Abspielen
Es darf immer nur ein Video gleichzeitig abgespielt werden
Cover bevorzugt das Feishu-Coverfeld; wenn kein Cover vorhanden ist, kann auf kein Poster zurückgegriffen werden

Animationen müssen standardmäßig mitgeliefert werden, nicht nur eine „funktionierende“ statische Seite:

Der erste Bildschirm muss mindestens eine Eintrittsanimation haben, z. B. Titel, Beschreibung, Statistiken, die nacheinander per fade-up erscheinen
Die Navigation sollte nach dem Scrollen eine Änderung von Blur / Background / Border zulassen
Karten-Hover muss mindestens eine leichte Rückmeldung haben, z. B. Aufschweben, Vergrößern, Overlay, Farbwechsel des Titels
Seitenwechsel oder Abschnittswechsel sollten einen Übergang haben, kein abruptes Flackern
Für Informationsbereiche wie Über uns / Kontakt / Fähigkeiten bevorzugt Scroll-Reveal
Wenn der Benutzer eine stärkere visuelle Darstellung wünscht, können Canvas- oder Three.js-Hintergrundanimationen hinzugefügt werden

Implementierungsgrenzen:

Bevorzugt native CSS-Transitionen / Keyframes / IntersectionObserver
Verwende requestAnimationFrame nur für kontinuierlich bewegte Hintergründe
Wenn Three.js verwendet wird, muss sichergestellt sein, dass es auf mobilen Geräten nicht zu leeren Bereichen, Abstürzen oder Blockierungen des Hauptinhalts kommt
Animationen dürfen das Abspielen von Videos, Filter, Pop-ups, mobiles Scrollen und die Lesbarkeit des ersten Bildschirms nicht beeinträchtigen
Standardmäßig einen Degradationspfad bereitstellen: Text und Inhalt müssen auch bei Skriptfehlern sichtbar bleiben

Prinzip der Datenbindung:

HTML darf keine ablaufenden URLs hartcodieren
Die Seite lädt zur Laufzeit /api/videos.json und /api/covers.json
Oder lade direkt /api/portfolio.json zum Rendern der Karten

Wenn der Benutzer bereits eine Website hat, behalte bevorzugt das bestehende visuelle Erscheinungsbild bei und ersetze nur die Datenquelle und den Aktualisierungsmechanismus.

Wenn der Benutzer explizit auf einen bestehenden Website-Stil verweist, bevorzuge die Wiederverwendung dieser Animationstypen:

Hero-Text-Eintrittsanimation
Scroll-Zustandsübergang für sticky Filter / Navigation
Masonry-Karten-Hover-Effekt
Seitenüberblendung beim Wechseln
Stagger-Reveal auf der Über-uns-Seite
Optionales Three.js / Canvas-Hintergrund-Bewegung

Schritt 5: Repository erstellen und GitHub Pages bereitstellen

Standardablauf:

gh repo create <repo-name> --public --source=. --remote=origin --push

Dann die Pages-Quelle bestätigen:

branch: main
path: /

Überprüfen:

gh api repos/<owner>/<repo>/pages

Es muss bestätigt werden:

Pages ist aktiviert
cname funktioniert (falls eine benutzerdefinierte Domain vorhanden ist)
source zeigt auf main und das Stammverzeichnis

Schritt 6: Automatisches Aktualisierungsskript generieren

Das Aktualisierungsskript sollte diesen Weg gehen:

app_id + app_secret gegen tenant_access_token eintauschen
Bitable-Datensätze lesen
Aus den Datensätzen die Tokens für Video- und Cover-Anhänge extrahieren
batch_get_tmp_download_url in Batches aufrufen
api/videos.json, api/covers.json, api/portfolio.json schreiben

Wichtige Anforderungen:

Unterstützung für paginiertes Lesen von Datensätzen
Batch-Anfragen in Gruppen von 5 Tokens
Token-Liste nicht fest im Skript codieren
Dynamisch aus den tatsächlichen Tabellendatensätzen generieren
Mehrere Feldnamen-Kandidaten zulassen

Empfohlener Dateiname:

refresh.py

Bevorzugt die mitgelieferte Vorlage direkt kopieren:

cp ~/.claude/skills/feishu-portfolio-launch/assets/refresh.py ./refresh.py

Dann nur das Array der Feldkandidaten ändern, keine konkreten Tokens oder URLs fest codieren.

Schritt 7: GitHub Actions Workflow generieren

Verwende nicht mehr launchd als Standardlösung. Die Standardlösung muss GitHub Actions sein.

Workflow-Anforderungen:

Unterstützung für workflow_dispatch
Unterstützung für schedule, standardmäßig alle 12 Stunden ausführen
Führe python refresh.py aus
Committe automatisch api/videos.json, api/covers.json, api/portfolio.json

Standard-Secrets:

LARK_APP_ID
LARK_APP_SECRET
LARK_BASE_TOKEN
LARK_TABLE_ID

Standard-Datei:

.github/workflows/refresh.yml

Bevorzugt die mitgelieferte Vorlage direkt kopieren:

mkdir -p .github/workflows
cp ~/.claude/skills/feishu-portfolio-launch/assets/refresh.yml .github/workflows/refresh.yml

Schritt 8: Secrets ins Repository einfügen

Wenn diese Werte bereits in der aktuellen Umgebung vorhanden sind und der Benutzer ausdrücklich die Umsetzung wünscht, konfiguriere sie direkt:

gh secret set LARK_APP_ID -R <owner>/<repo>
gh secret set LARK_APP_SECRET -R <owner>/<repo>
gh secret set LARK_BASE_TOKEN -R <owner>/<repo>
gh secret set LARK_TABLE_ID -R <owner>/<repo>

Dann überprüfen:

gh secret list -R <owner>/<repo>

Wenn Werte fehlen, stoppe hier und teile dem Benutzer klar mit, welches fehlt. Fälsche nichts.

Schritt 9: Manuell auslösen und die gesamte Kette überprüfen

Nach Abschluss der Konfiguration sofort einmal manuell den Workflow ausführen:

gh workflow run refresh.yml -R <owner>/<repo>
gh run list -R <owner>/<repo> --limit 3
gh run watch <run-id> -R <owner>/<repo> --exit-status

Dann das Online-Ergebnis überprüfen:

python3 - <<'PY'
import json, urllib.request, time
url = f'https://<domain-or-pages-url>/api/videos.json?t={int(time.time())}'
with urllib.request.urlopen(url, timeout=20) as r:
    data = json.load(r)
print(data.get('_refreshed_at'))
print(data.get('_count'))
PY

Dann stichprobenartig ein Video testen:

Statuscode sollte 206 oder 200 sein
content-type sollte video/mp4 oder ein abspielbarer Medientyp sein

Wenn das Online-api/videos.json noch die alte Zeit hat:

Prüfe zuerst, ob die Pages-Bereitstellung abgeschlossen ist
Prüfe dann, ob der Workflow wirklich das neue JSON committed hat
Bestätige dann, ob die Pages-Quelle auf den richtigen Branch und das richtige Verzeichnis zeigt

Schritt 10: Domain-Bindung

Wenn der Benutzer eine benutzerdefinierte Domain möchte, dann:

CNAME-Datei
GitHub Pages custom domain Einstellung
DNS-Konfigurationsanleitung

Dieser Teil folgt dem Standardablauf von GitHub Pages und muss nicht mit der Feishu-Logik gekoppelt werden.

Standarderklärung für den Benutzer

Bei „Website ist erreichbar, aber Videos werden nicht abgespielt“ priorisieren:

Ist api/videos.json noch alt?
Sind die darin enthaltenen Feishu-URLs abgelaufen?
Ist der automatische Aktualisierungs-Workflow fehlgeschlagen?
Wurden Pages noch nicht neu bereitgestellt?

Standardmäßig nicht zuerst den Player oder das Frontend-Styling verdächtigen.

Wenn der Benutzer sagt „die Seite ist zu tot“ oder „ich möchte mehr Lebendigkeit wie in einem Portfolio“, füge standardmäßig eine Animationsebene hinzu, anstatt nur Farben und Layout zu ändern.

Erfolgskriterien

Nach Abschluss dieser Skill müssen mindestens folgende Bedingungen erfüllt sein:

Die Website ist online
GitHub Pages ist erreichbar
Videos sind abspielbar
Das Repository enthält einen automatischen Aktualisierungs-Workflow
Das Repository enthält bereits 4 LARK_* Secrets
Manuelles Auslösen des Workflows war erfolgreich
Das _refreshed_at in api/videos.json ist die aktuelle Zeit online

Was nicht mehr standardmäßig getan werden soll

Standardmäßig kein lokales launchd generieren
Standardmäßig nicht darauf angewiesen sein, dass der Benutzer seinen Mac ständig eingeschaltet lässt
Keine file_tokens fest codieren
Nicht nur aufgrund der ersten Tabelle fortfahren
Nicht nur videos.json generieren, dabei Cover und strukturierte Datensätze ignorieren

Referenzimplementierung

Wenn eine bereits getestete Vorgehensweise benötigt wird, verwende zuerst direkt die mitgelieferten Vorlagen aus dem Skill-Repository:

assets/refresh.py
assets/refresh.yml
assets/portfolio.sample.json

Im tatsächlichen Projekt werden letztendlich diese Dateien erstellt:

refresh.py
.github/workflows/refresh.yml
api/videos.json
api/covers.json
api/portfolio.json

Bevorzugt das vorhandene Repository-Muster wiederverwenden und dann an das Erscheinungsbild der Website des Benutzers anpassen.

Portfolio-Ship — Feishu-Base → GitHub Pages + Actions

Was ist Portfolio-Ship — Feishu-Base → GitHub Pages + Actions?

In Ihrer bevorzugten KI fragen

Dokumentation