Communitygithub.com

web2clip

Verwenden Sie diesen Skill, wenn ein Benutzer ein Video / einen Clip (Einführung, Anleitung, Erklärvideo, Walkthrough) erstellen möchte, der auf einer Website oder interaktiven Webseite basiert, mit einer KI-Sprecherstimme und bildschirmsynchronen Effekten — z. B. „Systemvorstellung als Clip“, „Video aus einer Webseite erstellen“, „Clip mit KI-Stimme“, „/web2clip“. Auch geeignet, um eine beliebige Phase fortzusetzen: Setup, Drehbuch, Sprachausgabe, Aufnahme, Zusammenführung.

Was ist web2clip?

web2clip verwandelt eine Website (idealerweise eine interaktive Seite) in eine Serie kurzer, chapterweiser Clips plus einen Zusammenfassungsclip, formatiert im 9:16- oder 16:9-Seitenverhältnis. Der Skill erzeugt einen KI-Sprecher (über ElevenLabs-Stimmen) und synchronisiert Web-Effekte wie Hervorhebungen, Mausklicks, Slider-Bewegungen und Untertitel exakt mit der Tonspur – alles basierend auf echten Bildschirmaufnahmen der Seite, sodass 100% korrekte Daten dargestellt werden. Unterstützte Plattformen: Claude Code (über Unterbefehle wie `/web2clip-setup`, `/web2clip-plan`, `/web2clip-voice`, `/web2clip-record`, `/web2clip-merge`). Der Arbeitsablauf umfasst sieben Phasen: Verbindungsprüfung, MCP/API-Berechtigungen, Ideenfindung und Dashboard-Erstellung, Drehbuch- und Sprachausgabe, Aufnahme synchrongesteuert mittels Markierungen (`scripts/w2c/record.py`), Zusammenführung aller Clips sowie finale Abnahme und Auslieferung. Goldene Regeln: Drehbuch vor der kostenintensiven Spracherzeugung genehmigen lassen, zuerst einen Pilotclip erstellen, die Stimme als Erzähler mit eigener Rolle einsetzen, kurze Clips von 1–2 Minuten produzieren und Effekte exakt an die gesprochenen Worte anpassen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tmarkTai/web2clip/tree/HEAD/skills/web2clip

In Ihrer bevorzugten KI fragen

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

Dokumentation

web2clip · Von der Webseite zur Videoreihe mit Sprecherstimme

Verwandelt eine Webseite (idealerweise eine interaktive) in eine Serie kurzer, chapterweiser Clips + einen Zusammenfassungsclip, im Hochformat 9:16 oder Querformat 16:9, mit KI-Sprecher (ElevenLabs-Stimme), web-synchronen Effekten (Lichtkanten, Mausklicks, Schieberegler, Untertitel), und 100% korrekten Daten, da die Aufnahme von der echten Seite erfolgt.

Unterbefehle (einzeln verwendbar, wenn nur eine Phase benötigt wird)

BefehlPhase
/web2clip-setup1–2 · Verbindung, Tools, Netzwerkberechtigungen, Konten prüfen
/web2clip-plan3 · Webseite lesen, Ideen vorschlagen, Drehbuch + Dashboard erstellen
/web2clip-voice4–5 · Stimme vorschlagen, für jeden Clip erzeugen, Dateien abrufen
/web2clip-record4 · Bildschirmaufnahme synchron zur Stimme, Clips exportieren
/web2clip-merge6 · Zusammenfassungsclip erstellen, benennen, Dateien übergeben, archivieren

/web2clip ausführen = alle 7 Phasen in der Reihenfolge durchlaufen. Keinen Schritt ohne Freigabe überspringen.

Goldene Regeln (aus realen Projekten abgeleitet)

  1. Text zuerst freigeben, dann Geld ausgeben: Das Drehbuch muss vor der Spracherzeugung genehmigt werden (Sprache kostet Credits).
  2. Zuerst einen Pilotclip erstellen, damit der Benutzer Stimme und Effektstil prüfen kann, dann erst in Serie gehen.
  3. Die Stimme ist der Erzähler, sie liest nicht den Text auf der Webseite vor. Sie hat einen Rollennamen (z. B. „Chip, Assistent von Herr X“), spricht freundlich, beginnt mit einer Frage/Situation und endet mit einem Überleitungssatz zum nächsten Teil.
  4. Aufteilung in kurze, chapterweise Clips (1–2 Minuten) und erst dann Zusammenfassungsclip. Keine langen Einzelclips von Anfang an.
  5. Bild muss dem Text folgen: Der Satz, der einen Bereich erwähnt, muss diesen genau in dem Moment hervorheben. Verwenden Sie das synchrone Aufnahmesystem mit versteckten Markierungen (scripts/w2c/record.py), nicht manuell schätzen.
  6. Maximal 1–3 Fragen pro Schritt, mit vorgegebenen Auswahlmöglichkeiten. Grenzen ehrlich mitteilen.

Ablauf in 7 Phasen

1. Verbindung prüfen → siehe /web2clip-setup

python -m w2c.check_env (im Verzeichnis scripts/) ausführen. Tabelle melden: welche Tools vorhanden, welche Verbindungen bestehen (ElevenLabs, Drive, Canva, Browser). Fehlendes vorschlagen + Anleitung zur Kontoerstellung geben.

2. MCP- / API- / Berechtigungen bereitstellen

Fehlende Netzwerkberechtigungen → Benutzer anleiten, die richtigen Domains freizuschalten (Liste im Setup). Fehlende ElevenLabs-Verbindung → Verbindung anbieten. Erinnern, bei Berechtigungsdialog „Immer erlauben“ zu wählen.

3. Ideen entwickeln → siehe /web2clip-plan

Webseite lesen, Kapitel/Abschnitte auflisten, Vorschläge machen: Bildausschnitt, Länge, Stimme, Sprecherrolle, Anzahl Clips. Zweispaltiges Drehbuch erstellen (Sprechtext · Effekte). Dashboard (w2c.dashboard) aufbauen und Link senden, damit der Benutzer Überblick erhält und jeden Clip freigeben kann.

4. Drehbuch → Stimme → Aufnahme → Zusammenführung jedes Clips

Stimme: /web2clip-voice. Aufnahme: /web2clip-record. Dashboard nach jedem Clip aktualisieren.

5. Stimme vorschlagen

Stimmen filtern nach Sprache, Geschlecht, Alter, Region; 2–3 Optionen mit Begründung nennen; Standardmäßig natürliche, erzählende Stimme wählen.

6. Zusammenfassungsclip → siehe /web2clip-merge

In Reihenfolge zusammensetzen, Dateiname <Projekt>_Clip<N>_<Abschnittsname>.mp4, Zusammenfassungsclip 0. ..._ZUSAMMENFASSUNG (damit er in der Ordnerliste immer oben steht).

7. Ausliefern bis 100% Zufriedenheit

Dateien senden + Dashboard aktualisieren, vor dem Senden selbstständig Bildausschnitte prüfen (4–6 Frames/Clip extrahieren), automatisch erkannte Fehler auflisten, nachbessern bis zur Freigabe. Drehbuch, Stimme und Spezifikationen speichern, um schnelle Korrekturen zu ermöglichen.

Referenzdokumente

  • references/loi-thuong-gap.md — häufige Fehler und Vermeidungsstrategien (MUSS vor der Aufnahme gelesen werden).
  • references/viet-kich-ban.md — Anleitung für fesselnde Sprechtexte + Drehbuchvorlage.
  • references/chon-giong.md — Stimmenauswahl, Credit-Schätzung, ElevenLabs-Pakete.
  • examples/spec_example.json (im Stammverzeichnis des Repos) — Muster-Drehbuchdatei.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Verwandte Skills