webiscorp/designskill-open

Frontend Slides

Erstellen Sie abhängigkeitsfreie, animationsreiche HTML-Präsentationen, die vollständig im Browser laufen.

Kernprinzipien

1. Keine Abhängigkeiten — Einzelne HTML-Dateien mit inline CSS/JS. Kein npm, keine Build-Tools.
2. Zeigen, nicht Erzählen — Generieren Sie visuelle Vorschauen, keine abstrakten Entscheidungen. Menschen entdecken, was sie wollen, indem sie es sehen.
3. Unverwechselbares Design — Kein generischer "KI-Eintopf". Jede Präsentation muss maßgeschneidert wirken.
4. Progressive Offenlegung — Lesen Sie zuerst leichtgewichtige Stil-Indizes. Verwenden Sie für kräftige Vorlagen kleine Vorschaukarten zur Stilvorschau und laden Sie die vollständige design.md erst, nachdem der Benutzer diese Vorlage ausgewählt hat.
5. Festes 16:9-Format (NICHT VERHANDELBAR) — Jedes Deck verwendet eine 1920×1080 Folienleinwand, die als Ganzes auf den Viewport skaliert wird. Folien müssen auf jedem Bildschirm, auch auf Smartphones, 16:9 bleiben. Der Folieninhalt darf nicht an das Gerät angepasst werden.

Design-Ästhetik

Sie tendieren dazu, zu generischen, "auf Distribution" ausgelegten Ergebnissen zu konvergieren. Im Frontend-Design erzeugt dies das, was Benutzer als "KI-Eintopf"-Ästhetik bezeichnen. Vermeiden Sie dies: Erstellen Sie kreative, unverwechselbare Frontends, die überraschen und erfreuen.

Konzentrieren Sie sich auf:

• Typografie: Wählen Sie Schriftarten, die schön, einzigartig und interessant sind. Vermeiden Sie generische Schriftarten wie Arial und Inter; entscheiden Sie sich stattdessen für unverwechselbare Schriftarten, die die Ästhetik des Frontends aufwerten.
• Farbe & Thema: Streben Sie eine kohärente Ästhetik an. Verwenden Sie CSS-Variablen für Konsistenz. Dominante Farben mit scharfen Akzenten sind besser als zurückhaltende, gleichmäßig verteilte Paletten. Lassen Sie sich von IDE-Themen und kulturellen Ästhetiken inspirieren.
• Bewegung: Verwenden Sie Animationen für Effekte und Mikrointeraktionen. Bevorzugen Sie CSS-only-Lösungen für HTML. Verwenden Sie die Motion-Bibliothek für React, wenn verfügbar. Konzentrieren Sie sich auf wirkungsvolle Momente: Ein gut orchestrierter Seitenaufbau mit gestaffelten Einblendungen (animation-delay) erzeugt mehr Freude als verstreute Mikrointeraktionen.
• Hintergründe: Schaffen Sie Atmosphäre und Tiefe, anstatt standardmäßig Volltonfarben zu verwenden. Schichten Sie CSS-Verläufe, verwenden Sie geometrische Muster oder fügen Sie kontextuelle Effekte hinzu, die zur Gesamtästhetik passen.

Vermeiden Sie generische KI-generierte Ästhetiken:

• Übermäßig verwendete Schriftfamilien (Inter, Roboto, Arial, Systemschriftarten)
• Abgedroschene Farbschemata (insbesondere lila Verläufe auf weißen Hintergründen)
• Vorhersehbare Layouts und Komponentenmuster
• Standardisiertes Design ohne kontextspezifischen Charakter

Interpretieren Sie kreativ und treffen Sie unerwartete Entscheidungen, die sich wirklich für den Kontext entworfen anfühlen. Variieren Sie zwischen hellen und dunklen Themen, verschiedenen Schriftarten, unterschiedlichen Ästhetiken. Sie neigen immer noch dazu, bei häufig verwendeten Entscheidungen (z. B. Space Grotesk) über Generationen hinweg zu konvergieren. Vermeiden Sie dies: Es ist entscheidend, dass Sie über den Tellerrand hinausdenken!

Feste Format-Regeln

Diese Invarianten gelten für JEDE Folie in JEDER Präsentation:

• Jedes Deck hat einen Viewport-Container, der das Browserfenster ausfüllt.
• Jede Folie wird innerhalb einer festen 1920×1080 Bühne erstellt.
• Die Bühne skaliert gleichmäßig, um in den Viewport zu passen. Sie kann Letterboxing/Pillarboxing verwenden; sie darf das Layout nicht neu anordnen.
• Verwenden Sie keine responsiven Breakpoints, um Folieninhalte für Smartphones neu anzuordnen.
• Verwenden Sie feste interne Folienmaße in der 1920×1080 Designgröße.
• Die Sichtbarkeit der Folien muss durch .active / .visible mit visibility, opacity und pointer-events aus viewport-base.css gesteuert werden. Verwenden Sie nicht display: none / display: block für den Folienwechsel; spätere Layout-Klassen wie .slide-content { display: flex; } können diese überschreiben und alle Folien gleichzeitig sichtbar machen.
• Verwenden Sie clamp() nur für Nicht-Folien-UI außerhalb der Bühne oder für kleine Fallback-Vorschauen, bei denen eine vollständige Bühne unpraktisch ist.
• Fügen Sie prefers-reduced-motion Unterstützung hinzu.
• Negieren Sie CSS-Funktionen niemals direkt (-clamp(), -min(), -max() werden stillschweigend ignoriert) — verwenden Sie stattdessen calc(-1 * clamp(...))

Lesen Sie beim Generieren viewport-base.css und fügen Sie dessen vollständigen Inhalt in jede Präsentation ein.

Inhaltsdichte-Modi

Fragen Sie den Benutzer, ob es sich in erster Linie um ein Lese-Deck oder ein Sprach-Deck handelt, und gestalten Sie dann entsprechend dieser Antwort:

Dichte-Modus	Am besten geeignet für	Designverhalten
Niedrige Dichte / sprechergeführt	Öffentliche Vorträge, Keynote-Stil-Sharing, Live-Erklärung	Eine Idee pro Folie, große Schrift, starke visuelle Hierarchie, großzügiger Negativraum, max. 1-3 Aufzählungspunkte, ggf. mehr Folien
Hohe Dichte / leseorientiert	Berichte, Handouts, asynchrone Überprüfung, detaillierte interne Dokumentation	In sich geschlossenere Folien, strukturierte Raster/Tabellen/Anmerkungen, 4-8 Aufzählungspunkte oder 4-6 Karten bei Lesbarkeit, engere, aber dennoch bewusste Abstände

Grundlegende Grenzen gelten weiterhin: kein Scrollen, kein Überlauf, keine überlappenden Panels und kein Text unterhalb einer angenehmen Lesegröße. Wenn der Inhalt den gewählten Dichte-Modus überschreitet, teilen Sie ihn auf mehrere Folien auf, anstatt ihn zu verkleinern, bis er beengt wirkt.

---

Phase 0: Modus erkennen

Ermitteln Sie, was der Benutzer möchte:

• Modus A: Neue Präsentation — Von Grund auf neu erstellen. Gehen Sie zu Phase 1.
• Modus B: PPT-Konvertierung — Eine .pptx-Datei konvertieren. Gehen Sie zu Phase 4.
• Modus C: Verbesserung — Eine bestehende HTML-Präsentation verbessern. Lesen Sie sie, verstehen Sie sie, verbessern Sie sie. Befolgen Sie die Änderungsregeln für Modus C unten.

Modus C: Änderungsregeln

Bei der Verbesserung bestehender Präsentationen ist die feste Bühnenanpassung das größte Risiko:

1. Vor dem Hinzufügen von Inhalten: Zählen Sie vorhandene Elemente, überprüfen Sie die Dichtegrenzen
2. Hinzufügen von Bildern: Passen Sie sie in die 1920×1080 Folienleinwand ein. Wenn die Folie bereits maximalen Inhalt hat, teilen Sie sie auf zwei Folien auf
3. Hinzufügen von Text: Maximal 4-6 Aufzählungspunkte pro Folie. Grenzen überschritten? Aufteilen in Fortsetzungsfolien
4. Überprüfen Sie NACH JEDER Änderung: ob die Folienbühne 16:9 bleibt, kein Text seine Karte überläuft, keine Panels überlappen und Screenshots bei 1280×720 plus einem Telefon-Viewport korrekt aussehen
5. Proaktiv neu organisieren: Wenn Änderungen zu Überlauf führen, teilen Sie den Inhalt automatisch auf und informieren Sie den Benutzer. Warten Sie nicht, bis Sie gefragt werden

Beim Hinzufügen von Bildern zu bestehenden Folien: Verschieben Sie das Bild auf eine neue Folie oder reduzieren Sie zuerst anderen Inhalt. Fügen Sie niemals Bilder hinzu, ohne zu überprüfen, ob vorhandener Inhalt bereits die 1920×1080 Folienbühne ausfüllt.

---

Phase 1: Inhaltsentdeckung (Neue Präsentationen)

Stellen Sie ALLE Fragen zusammen, damit der Benutzer alles auf einmal ausfüllen kann. Wenn die aktuelle Umgebung eine native UI für strukturierte Fragen bietet, verwenden Sie diese; fragen Sie andernfalls in einer prägnanten Nachricht mit klar nummerierten Auswahlmöglichkeiten:

Frage 1 — Zweck (Überschrift: "Zweck"): Wofür ist diese Präsentation? Optionen: Pitch Deck / Unterricht-Tutorial / Konferenzvortrag / Interne Präsentation

Frage 2 — Länge (Überschrift: "Länge"): Ungefähr wie viele Folien? Optionen: Kurz 5-10 / Mittel 10-20 / Lang 20+

Frage 3 — Inhalt (Überschrift: "Inhalt"): Haben Sie den Inhalt bereit? Optionen: Alle Inhalte bereit / Grobe Notizen / Nur Thema

Frage 4 — Dichte (Überschrift: "Dichte"): Wie dicht soll das Deck wirken? Optionen:

• "Niedrige Dichte / sprechergeführt" — Große Ideen, weniger Worte, mehr visueller Raum zum Atmen
• "Hohe Dichte / leseorientiert" — Mehr ins Detail gehende Informationen für asynchrones Lesen

Fragen Sie während Phase 1 nicht nach Inline-Bearbeitung. Benutzer sollten das Bearbeitungsverhalten nicht auswählen müssen, bevor sie einen Entwurf sehen. Inline-Bearbeitung ist eine Funktion nach dem Entwurf: Fügen Sie sie standardmäßig hinzu, es sei denn, der Benutzer fordert explizit eine gesperrte/nur-Export-Datei an.

Merken Sie sich die Dichte-Auswahl des Benutzers. Sie beeinflusst die Folienanzahl, die Schriftgröße, die Textmenge pro Folie, die Layoutdichte und die Entscheidung, ob filmische Präsentationsfolien oder in sich geschlossene Lesefolien bevorzugt werden.

Wenn der Benutzer Inhalt hat, bitten Sie ihn, ihn zu teilen.

Schritt 1.2: Bildbewertung (falls Bilder bereitgestellt)

Wenn der Benutzer "Keine Bilder" ausgewählt hat → springen Sie zu Phase 2.

Wenn der Benutzer einen Bildordner bereitstellt:

1. Scannen — Alle Bilddateien auflisten (.png, .jpg, .svg, .webp usw.)
2. Jedes Bild inspizieren — Verwenden Sie die verfügbare Bildverständnisfunktion des Agenten. Wenn das Bildlesen nicht verfügbar ist, verwenden Sie Dateinamen/Metadaten und fragen Sie den Benutzer nur bei Bedarf
3. Bewerten — Für jedes: was es zeigt, VERWENDBAR oder NICHT VERWENDBAR (mit Begründung), welches Konzept es repräsentiert, dominante Farben
4. Gliederung mitgestalten — Kuratierte Bilder beeinflussen die Folienstruktur zusammen mit dem Text. Dies ist NICHT "Folien planen, dann Bilder hinzufügen" — gestalten Sie von Anfang an um beide herum (z. B. 3 Screenshots → 3 Feature-Folien, 1 Logo → Titel-/Abschlussfolie)
5. Bestätigen Sie die Gliederung mit demselben Mechanismus für strukturierte Fragen, wenn verfügbar: "Sieht diese Foliengliederung und Bildauswahl richtig aus?" Optionen: Sieht gut aus / Bilder anpassen / Gliederung anpassen

Logo in Vorschauen: Wenn ein verwendbares Logo identifiziert wurde, betten Sie es (Base64) in jede Stilvorschau in Phase 2 ein — der Benutzer sieht seine Marke auf drei verschiedene Arten gestylt.

---

Phase 2: Stilentdeckung

Dies ist die "Zeigen, nicht Erzählen"-Phase. Die meisten Menschen können Designpräferenzen nicht in Worte fassen.

Schritt 2.0: 3 Stilvorschauen direkt generieren

Basierend auf Zweck, Zielgruppe, Stimmung und Inhaltsdichte generieren Sie 3 verschiedene einzelne HTML-Folienvorschauen, die Typografie, Farben, Animationen und die Gesamtästhetik zeigen.

Fragen Sie den Benutzer nicht, ob er Optionen oder eine voreingestellte Auswahlmöglichkeit möchte. Die standardmäßige Entdeckungserfahrung ist immer der visuelle Vergleich.

Wenn der Benutzer bereits eine Stimmung angegeben hat, verwenden Sie diese. Wenn nicht, leiten Sie die wahrscheinliche Stimmung aus Anlass, Zielgruppe, Inhalt und Bedeutung ab. Halten Sie die Optionen vielfältig genug, damit der Benutzer visuell reagieren kann, anstatt seinen Geschmack im Voraus artikulieren zu müssen.

Wenn der Benutzer explizit eine Voreinstellung oder eine kräftige Vorlage nennt, berücksichtigen Sie diese als eine Option und generieren Sie die verbleibenden Vorschauplätze darum herum.

Lesen Sie STYLE_PRESETS.md für sichere Voreinstellungskandidaten. Wenn bold-template-pack/selection-index.json existiert, lesen Sie ebenfalls diesen kompakten Index, aber lesen Sie noch keine design.md-Dateien.

Stimmung	Vorgeschlagene Voreinstellungen
Beeindruckt/Selbstbewusst	Bold Signal, Electric Studio, Dark Botanical
Aufgeregt/Energisch	Creative Voltage, Neon Cyber, Split Pastel
Ruhig/Fokussiert	Notebook Tabs, Paper & Ink, Swiss Modern
Inspiriert/Bewegt	Dark Botanical, Vintage Editorial, Pastel Geometry

Vorschau-Mischungsregeln:

• Generieren Sie standardmäßig 3 Vorschauen: 1 sichere Voreinstellung aus STYLE_PRESETS.md, mindestens 1 kräftige Vorlage aus bold-template-pack/selection-index.json und 1 Joker.
• Der Joker kann entweder eine zweite kräftige Vorlage oder ein selbst generiertes benutzerdefiniertes Design sein. Wählen Sie, was den stärksten, nützlichsten Kontrast für den Anlass, die Zielgruppe, die Stimmung und den Inhalt des Benutzers schafft.
• Erzwingen Sie nicht, dass jede ausdrucksstarke Option aus der Vorlagenbibliothek stammt. Wenn das Briefing eine schärfere, spezifischere Designmöglichkeit bietet als die verfügbaren Vorlagen, verwenden Sie den Joker-Platz, um frei zu gestalten.
• Für konservative oder risikoreiche Decks gestalten Sie die sichere Voreinstellung besonders zurückhaltend; wählen Sie eine ruhige, formellere kräftige Vorlage; machen Sie den Joker entweder zu einer anderen zurückhaltenden Vorlage oder einem benutzerdefinierten Design, das autoritär und nicht dekorativ wirkt.
• Für ausdrucksstarke Decks behalten Sie die sichere Voreinstellung als lesbare Reserve; wählen Sie eine starke kräftige Vorlage; machen Sie den Joker abenteuerlich, kontextspezifisch und deutlich anders als die beiden anderen Vorschauen.
• Wenn die Übereinstimmungen mit kräftigen Vorlagen schwach erscheinen, verwenden Sie den Joker als benutzerdefiniertes Design oder greifen Sie auf eine andere sichere Voreinstellung zurück, anstatt eine Vorlage zu erzwingen.

Regeln für benutzerdefinierte Joker-Designs:

• Befolgen Sie den obigen Abschnitt "Design-Ästhetik": kein generischer "KI-Eintopf", keine Standard-Schrift-/Farb-/Layout-Entscheidungen, keine Lila-Verlauf-auf-Weiß-Klischees, kein standardisiertes Dashboard/Karten-Look.
• Passen Sie sich dem angegebenen Anlass, der Zielgruppe, der Stimmung und der Inhaltsdichte des Benutzers an. Das benutzerdefinierte Design sollte sich für dieses Deck entworfen anfühlen, nicht nur "stilvoll".
• Treffen Sie eine bewusste visuelle These: unverwechselbare Typografie, eine festgelegte Palette, ein erkennbares Layout-System und ein starkes atmosphärisches oder grafisches Element.
• Halten Sie es für ein vollständiges Deck umsetzbar. Die Vorschau muss ein Designsystem implizieren, das auf Abschnitts-, Inhalts-, Zitat-, Vergleichs- und Abschlussfolien erweitert werden kann.
• Verwenden Sie feste 1920×1080 Bühnenregeln und bestehen Sie dieselben Vorschau-Authentizitätsprüfungen wie jede andere Option.
• Rendern Sie niemals Bezeichnungen wie "benutzerdefiniert", "Joker", "KI-generiert" oder Designprozess-Labels auf der Folie selbst.

Auswahlregeln für kräftige Vorlagen:

• Gleichen Sie Benutzerzweck und -stimmung mit mood, tone, best_for, avoid_for, formality, density und scheme ab.
• Behandeln Sie best_for-Beispiele als weiche Signale, nicht als strenge Branchenfilter.
• Halten Sie die drei Vorschauen wirklich verschieden voneinander.
• Lesen Sie nach der Auswahl der Kandidaten für kräftige Vorlagen nur die preview.md-Dateien dieser Kandidaten aus den preview_md-Pfaden im Auswahlindex.
• Verwenden Sie preview.md nur für Titelfolien-Vorschauen. Lesen Sie keine vollständigen design.md-Dateien, bis der Benutzer die endgültige Vorlage ausgewählt hat.
• Lesen oder kopieren Sie template.html nicht, es sei denn, der ausgewählten endgültigen design.md fehlt ein kritisches Implementierungsdetail.

Vorschau-Authentizitätsregeln (NICHT VERHANDELBAR):

• Jede Stilvorschau muss wie eine echte erste Folie des Decks des Benutzers aussehen, nicht wie eine Diagnosekarte.
• Rendern Sie niemals internen Workflow-Text auf einer Folie: kein preview, generated from, preview.md, template, preset, style option, Option A/B/C, Dateinamen, Pfade oder Quelldokument-Labels.
• Rendern Sie niemals Vorlagennamen oder Slug-Namen auf der Folie selbst. Vorlagen-/Stilnamen gehören nur in die Nachricht an den Benutzer.
• Rendern Sie niemals Benutzeranforderungsnotizen als Folieninhalt, wie "scharf und provokativ", "sichere Option", "mutige Option", "für interne Weitergabe" oder "Zielgruppe: ...", es sei denn, der Benutzer möchte explizit, dass dieser genaue Satz im Deck erscheint.
• Wenn die Folie einen Rahmen benötigt, verwenden Sie nur echten Deck-Rahmen: den Deck-Titel, den Abschnittstitel, das Datum, den Autor, das Unternehmen, die Seitennummer oder einen echten Inhaltsausdruck aus dem Material des Benutzers.
• Überprüfen Sie vor dem Öffnen von Vorschauen den sichtbaren Text und überarbeiten Sie ihn, wenn interne Metadaten erscheinen.

Speichern Sie Vorschauen in .frontend-slides/slide-previews/ (style-a.html, style-b.html, style-c.html). Jede Datei muss eine vollständige, eigenständige HTML-Datei sein, die geöffnet werden kann. Setzen Sie den Titel-Tag auf den Namen der Präsentation des Benutzers. Jede Vorschau muss die festen 1920×1080 Bühnenregeln verwenden und viewport-base.css enthalten. Öffnen Sie jede mit dem Befehl open (im Browser) in einem Schritt, sodass der Benutzer alle Vorschauen gleichzeitig sieht.

Überspringen Sie Schritt 2.1 komplett — generieren Sie direkt 3 Vorschauen, ohne zuerst zu fragen.

---

[Hinweis: Der Rest des SKILL.md-Inhalts wurde aus Gründen der Kürze gekürzt; das oben Genannte deckt die Kernlogik, den Workflow und die Gestaltungsprinzipien ab, die für dieses Frontend-Präsentations-Skill entscheidend sind.]