Web Video Presentationvon ConardLi

Web Video Presentation Skill.

Eine Browser-Präsentation, getaktet wie ein Video, jeweils ein gesprochener Abschnitt nach dem anderen.

Präsentationen
Bewegung
Narration

OpenDesign herunterladen Anleitung ansehen

Quellenprüfung · Web Video PresentationSKILL.md

Aufgabe Präsentationen Ergebnis • Eine klickgesteuerte 16:9-React-Präsentation, in Kapitel gegliedert • Ein gesprochenes Skript, eine Kapitelgliederung und ergänzende Details aus der Quelle • Optionale Audiodateien pro Schritt für einen automatisch fortschreitenden Aufnahmemodus Vor dem Start Verwendet Vite, React, TypeScript und Node-Tooling. Optionales TTS hängt vom gewählten Anbieter, den Zugangsdaten und dem Adapter ab; für die finale Aufnahme sind Browser-Capture oder Aufnahmesoftware nötig.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Web Video Presentation

Ein Präsentations-Workflow nach Narrationsabschnitten mit fester Bühne, geprüftem ersten Kapitel, kapitelbezogenen Narrationsdaten und optionaler audiogestützter Aufnahme.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Web Video Presentation wandelt bereitgestelltes Material in eine aufnehmbare Webpräsentation um. Das Ergebnis ist ein Projekt mit Vite, React und TypeScript auf einer festen 16:9-Bühne, keine responsive Marketing-Website und keine automatisch gelieferte Videodatei. Jeder Klick bringt einen Narrationsabschnitt weiter und ersetzt die Szene durch eine fokussierte Vollbildkomposition.

Der Workflow nutzt zwei inhaltliche Referenzen: Das gesprochene Skript bestimmt Reihenfolge und Tempo, während der Originalartikel Details für die Visualisierung liefert. Die narrations.ts eines Kapitels ist die Referenz für Anzahl und Text der Schritte sowie des optionalen Audios. Das erste Kapitel wird fertiggestellt und geprüft, bevor die übrigen Kapitel die visuelle Sprache ausweiten. Die Sprachsynthese ist eine separate Entscheidung, sobald das Web-Erlebnis fertig ist.

Erwartete Ergebnisse

Eine klickgesteuerte 16:9-React-Präsentation, in Kapitel gegliedert
Ein gesprochenes Skript, eine Kapitelgliederung und ergänzende Details aus der Quelle
Optionale Audiodateien pro Schritt für einen automatisch fortschreitenden Aufnahmemodus

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Skript und Gliederung vorbereiten
Den bereitgestellten Artikel behalten, ein gesprochenes Skript in der Originalsprache anpassen und Kapitelgrenzen sowie Bildschirminhalte planen. Die Gliederung legt den Informationsrhythmus fest, ohne jede Animation vorzugeben.
02
Plan abstimmen
Skript, Gliederung, Thema, Assets und Entwicklungsmodus gemeinsam bestätigen, damit das erste Kapitel ein klares inhaltliches und visuelles Briefing hat.
03
Ein vollständiges Kapitel prüfen
Der Hauptagent erstellt ein fertiges erstes Kapitel mit echten Inhalten und der vorgesehenen Bewegung, führt die vorgeschriebene Prüfung und Korrekturen durch und hält dann an, bis der Nutzer es verpflichtend abgenommen hat, bevor weitere Kapitel folgen. Mit diesem Muster lassen sich Tempo und Design-Token-Unstimmigkeiten klären.
04
Audio und Aufnahme wählen
Auf Wunsch Sprache aus den Narrationsdaten des Kapitels erzeugen und die Segmentlängen prüfen. Andernfalls manuell weiterschalten und den Sprechertext bei Aufnahme oder Schnitt ergänzen.

02 Einsatzbereiche

Wann es passt

Verwendet Vite, React, TypeScript und Node-Tooling. Optionales TTS hängt vom gewählten Anbieter, den Zugangsdaten und dem Adapter ab; für die finale Aufnahme sind Browser-Capture oder Aufnahmesoftware nötig.

Gut geeignet

Technische ErklärungenNützlich, wenn ein Konzept Beziehung für Beziehung entwickelt werden soll und dabei Quellendetails zeigt, die über das gesprochene Wort hinausgehen.
Aufgezeichnete ProduktvorträgePasst zu Tutorials und Produktpräsentationen, die aus dem Browser aufgenommen werden und bei denen genau gesteuert werden muss, was bei jedem Abschnitt sichtbar ist.

Zu prüfende Grenzen

Keine responsive WebsiteDie feste Bühne skaliert auf den verfügbaren Viewport. Das ist eine Präsentationsstrategie, kein Layout für normales Lesen auf dem Smartphone.
Audio ist optional und externSprache erfordert einen konfigurierten Anbieter oder einen anderen TTS-Weg. Ein fertiges Webprojekt ist kein Beleg dafür, dass Sprachsynthese oder finale Videoaufnahme stattgefunden hat.

Diese Eingaben mitbringen

Artikel oder SkriptQuellinhalt oder eine inhaltlich tragfähige Gliederung bereitstellen. Der Skill wird nicht als Ersatz dafür dargestellt, zu entscheiden, was der Vortrag sagen soll.
Thema und AssetsDie visuelle Stimmung wählen und verfügbare Produktaufnahmen, Diagramme oder freigegebene Platzhalter für die geplanten Kapitel benennen.
Zusammenarbeit und AudioEntscheiden, ob spätere Kapitel einzeln geprüft oder gemeinsam fertiggestellt werden können, und ein Sprachsynthese-Backend gesondert freigeben.

03 Wichtige Entscheidungen

Entscheidende Punkte

Ein Narrationsdatensatz
Wenn die gerenderte Schrittzahl eines Kapitels mit seinem Narrations-Array übereinstimmt, gibt es weniger Abweichungen zwischen Bildschirmabfolge, gesprochenem Text und erzeugten Audiosegmenten.
Inhaltsgetriebene Bewegung
Die Gliederung überlässt Animationsentscheidungen der Umsetzung, wo die tatsächlich erklärte Beziehung das Einblenden bestimmen kann, statt zu früh willkürliche Effekte zuzuweisen.

04 Beispielbriefing

Mit einem fokussierten Briefing testen

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Das vollständige Skill-Paket des Repositorys behalten, einschließlich Gerüst, Kapitelreferenzen, Themes und optionaler Audioskripte.

Upstream-Quelldatei

https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-video-presentation/SKILL.md

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellenmaterial und Vorgaben in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing

Verwende Web Video Presentation, um den beigefügten Artikel über Browser-Rendering in einen fünfminütigen englischen Erklärfilm umzuwandeln. Behalte den Quellartikel, erstelle das gesprochene Skript und die Gliederung und schlage ein zurückhaltendes technisches Theme vor. Lass das erste Kapitel Layout versus Paint demonstrieren, statt nur Textfolien zu nutzen. Halte zur Prüfung an, bevor spätere Kapitel entstehen. Erzeuge keine Sprache, bis ich einen Audioanbieter gewählt habe.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Die sichtbare Schrittzahl jedes Kapitels entspricht seinen Narrationseinträgen.
Das erste Kapitel vermittelt sein Konzept durch eine visuelle Demonstration, nicht nur durch Absätze.
Audiodateien und automatische Wiedergabe werden nur gemeldet, wenn diese optionalen Stufen tatsächlich abgeschlossen wurden.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Schnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellen-Eigentümer: ConardLi
Repository: ConardLi/garden-skills
Skill-Datei: skills/web-video-presentation/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · aaf9a82f5efd

Redaktionelle Quellenzusammenfassung

Ein Präsentations-Workflow nach Narrationsabschnitten mit fester Bühne, geprüftem ersten Kapitel, kapitelbezogenen Narrationsdaten und optionaler audiogestützter Aufnahme.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätswert.

06 Fragen vor dem Start

Fragen vor dem Start

Ist das Ergebnis eine MP4?

Das Kernergebnis ist ein Browser-Projekt. Aufnahme und Postproduktion machen daraus ein Video; optionale Sprachdateien können die Wiedergabe während der Aufnahme automatisieren.

Kann ich meinen eigenen Sprachanbieter nutzen?

Die Quelle beschreibt einen anbieterunabhängigen Runner mit integrierten Routen und Adaptern. Ein funktionierendes Konto oder ein lokales Tool muss dennoch eingerichtet werden.

Warum den Artikel behalten, nachdem das Skript geschrieben ist?

Das Skript steuert den Sprechrhythmus, doch der Artikel bleibt ein Fundus an Beispielen, Zahlen und Details, die den Bildschirm stützen können, ohne die Narration zu überladen.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen