Grafische Case Study
Erstellen Sie ein professionell gestaltetes B2B-Case-Study-PDF aus Kundenerfolgsdetails. Die Ausgabe ist eine einzige, eigenständige HTML-Datei (in jedem Browser öffnbar) plus ein druckfertiges PDF. Unterstützt 7 Seitenabschnitts-Layouts und 9 Stilvorlagen.
Kritische Regeln – nicht verhandelbar:
- Jede Seite MUSS in die A4-Leinwand passen (1200×1697px). Kein überlaufender Inhalt.
- ALLE skalierbaren Schriftgrößen verwenden
clamp(). Feste px nur für strukturelle Rahmen/Linien. - Einzige, eigenständige HTML: Alle CSS inline. Null externe Abhängigkeiten außer Schriftart-CDN-Link.
- Niemals HTML im Chat ausgeben. In Datei speichern, nur Zusammenfassung anzeigen.
- Ergebnis-Statistik-Zahlen MÜSSEN visuell dominant sein – mindestens 3× Körpertextgröße.
- Kein generischer KI-Schrott: kein Inter als Anzeigeschriftart, kein lila Farbverlauf auf Weiß, kein „Vielen Dank“-Abschluss.
Schritt 1: Kurze Aufnahme
Benötige vier Dinge, um zu beginnen. Wenn alle vier in der Nachricht vorhanden sind: springe zu Schritt 2.
Wenn etwas fehlt, frage genau:
„Um Ihre Case Study zu erstellen, benötige ich vier Dinge:
- Kundenname – Firmenname (oder ein Deskriptor zur Anonymisierung: „Fortune 500 Einzelhändler“)
- Herausforderung – welches Problem hatten sie vor der Nutzung Ihres Produkts? (2-5 Sätze)
- Lösung – was hat Ihr Produkt getan, um es zu lösen? (Funktionen, Ansatz)
- Ergebnisse – messbare Ergebnisse: idealerweise 3 Statistiken (%, Zeitersparnis, Umsatzauswirkung usw.)“
Warte auf alle vier, bevor du fortfährst.
Schritt 2: Vollständige Aufnahme
Stelle alle Fragen in einer Nachricht, gruppiert nach Kategorie. Der Benutzer kann jede überspringen – Standardwerte gelten.
„Ein paar Fragen, bevor ich beginne:
Inhalt
- Kundenkontext – Branche, Unternehmensgröße, Standort? (optional, wird für die Übersichtsseite verwendet)
- Testimonial – Kundenmeinung (max. 40 Wörter) + Name des Sprechers + Titel? (oder „Ich füge später hinzu“)
- Seitenanzahl – 1-Seiter (Zusammenfassungskarte) / 2-Seiter (Standard, Standardeinstellung) / 4-Seiter (detailliert)
- Kundenlogo – URL oder „keins“
Design 5. Ihr Firmenname – Anbietername für die CTA-Seite (+ Logo-URL, falls verfügbar) 6. Stil – clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / „Optionen anzeigen“ 7. Ausrichtung – A4 Hochformat (Standard, 1200×1697) / Querformat 4:3 (1200×900)
Ausgabe 8. Anonymisieren? – Firmenname behalten / durch Branchendeskriptor ersetzen 9. Slug – Dateiname-Slug (z. B. „acme-corp-2025“); ich leite ihn vom Kundennamen ab, wenn er übersprungen wird“
Standardwerte, falls übersprungen:
| Frage | Standard |
|---|---|
| Kundenkontext | keine |
| Testimonial | keine |
| Seitenanzahl | 2 |
| Kundenlogo | keine |
| Ihr Firmenname | aus Kontext abgeleitet |
| Stil | clean-slate |
| Ausrichtung | A4 Hochformat |
| Anonymisieren | Namen behalten |
| Slug | kebab-case des Kundennamens |
Wenn Stil = „Optionen anzeigen“:
Generiere 3 einseitige HTML-Vorschauen (nur Cover-Seite). Speichere in .claude-design/previews/style-a.html, style-b.html, style-c.html. Öffne jede: open .claude-design/previews/style-a.html usw. Wähle 3 Stilvorlagen aus, die zum Case-Study-Kontext passen. Frage den Benutzer, bevor Schritt 3.
Schritt 2.5: Interne Seitenarchitektur (wird dem Benutzer nicht angezeigt)
Intern vor Schritt 3 ableiten. Niemals den Benutzer fragen.
Hero-Metrik-Identifikation: Durchsuche die Ergebnisse nach der einzelnen beeindruckendsten Zahl (größter Prozentsatz, größter $-Betrag, größter Multiplikator). Diese Metrik erhält eine Akzentfarbenbehandlung und maximales visuelles Gewicht auf der Ergebnisseite.
Seitenanzahl -> Strukturvorlage:
| Anzahl | Seitenabfolge |
|---|---|
| 1-Seiter | 1 Seite: [cover-compact] – gesamter Inhalt auf einer Seite verdichtet |
| 2-Seiter | Seite 1: [cover] + [challenge-solution] gestapelt · Seite 2: [results] + [testimonial-cta] gestapelt |
| 4-Seiter | Seite 1: [cover] · Seite 2: [overview] + [challenge] · Seite 3: [solution] + [results] · Seite 4: [testimonial] + [closing-cta] |
Visueller Charakter abgeleitet aus der Stilwahl:
- clean-slate → professionelle Autorität, großzügige Weißräume, unternehmenssicher
- midnight-editorial → hochwertiges Dunkel, redaktionelles Gewicht, Tech/KI-Unternehmen
- matt-gray → vertrauenswürdig neutral, operativ, vorstandssicher
- warm-earth → zugängliche Wärme, Beratung/Agentur/Dienstleistungen
- brutalist → mutig auffallend, designorientiert, aufmerksamkeitsstark
- Wenn nicht angegeben: Standardmäßig clean-slate für B2B-SaaS, midnight-editorial für technische Unternehmen.
Schritt 3: Seitenstruktur
Lese references/page-library.md vor der Planung.
Plane die vollständige Seitenabfolge. Weise Abschnittstypen aus den 7 in references/page-library.md für jeden Seitenabschnitt zu. Mehrere Abschnitte können auf einer Seite gestapelt werden.
Ausgabe als nummerierte Liste mit [abschnittstyp]-Labels pro Seite. Beispiel für 2-Seiter:
Vorgeschlagene Struktur (2 Seiten, clean-slate-Stil):
Seite 1:
[cover] – Acme Corp verkürzte Berichtszeit um 80%
[challenge-solution] – manueller Prozess / DataPulse-Automatisierung
Seite 2:
[results] – 80 % Zeitersparnis, 95 % Fehlerreduzierung, 200.000 $ gespart
[closing-cta] – Kontakt: [email protected]
Funktioniert diese Struktur, oder soll ich etwas anpassen?
Warte auf Bestätigung, bevor Schritt 4.
Schritt 4: Inhaltsentwurf
Schreibe Text pro Seitenabschnitt. Nur Klartext – noch kein HTML.
Textregeln pro Abschnitt:
cover: Firmenname + Schlagzeilenergebnis (max. 12 Wörter, MUSS mit der Zahl beginnen: „Acme verkürzte Berichtszeit um 80%“) + optionales Kategorie-Label („Customer Success Story“)overview: Nur 4 Fakten – Branche / Unternehmensgröße / Standort / Anwendungsfall – jeder Wert max. 4 Wörterchallenge: Kontextabsatz (2-3 Sätze) + 3 Schmerzpunkte (je 1 Satz, keine Aufzählungsfüller)solution: 2-3 Feature-Highlights – Feature-Name (max. 3 Wörter) + je 1 Satz Ergebnisbeschreibungresults: 3 Metriken (Zahl + kurzes Label + 1 Zeile Kontext). Optional: 2-Satz Erzählung. NULL Körpertext mit gleichem Gewicht wie die Zahlen.testimonial: exaktes Zitat (max. 40 Wörter) + Name des Sprechers + Titel + Unternehmenclosing-cta: Schlagzeile (max. 5 Wörter) + CTA-Aktionstext (3 Wörter) + E-Mail + URL (beide erforderlich)
Verbotene Wörter (keine Ausnahmen): „powerful“, „seamless“, „game-changing“, „leverage“, „innovative“, „revolutionary“, „transform“, „cutting-edge“, „robust“, „unlock“, „scalable“ (als Fülladjektiv).
Textphilosophie: Zahlen schlagen Adjektive. Leite jeden Abschnitt mit dem Ergebnis ein, nicht mit dem Feature. Fragmente sind in Ordnung.
Schritt 5: HTML-Generierung
Lese ALLES, bevor du HTML generierst:
Referenzen dieses Skills:
references/design-system.mdreferences/page-library.mdreferences/style-presets.md
frontend-slides-Querverweise (lese diese genaue Datei):
/Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css– füge den VOLLSTÄNDIGEN Inhalt wörtlich innerhalb des<style>-Blocks ein
Generierungsregeln:
- Einzige, eigenständige HTML. Alle CSS inline. Schriftart-CDN
<link>ist der einzige externe Verweis. - Füge den VOLLSTÄNDIGEN wörtlichen Inhalt von
viewport-base.cssinnerhalb des<style>-Blocks ein – paraphrasiere oder kürze ihn nicht. - Füge nach dem Einfügen von viewport-base.css A4-Hochformat-Overrides hinzu:
/* A4 Hochformat Overrides */ html { scroll-snap-type: none; scroll-behavior: auto; } .slide { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; position: relative; scroll-snap-align: none; } - Jeder Seitenabschnitt =
<section class="slide">– erforderlich für die Erkennung durch export-pdf.sh. - Kommentiere jede Seite:
/* === SEITE N: ABSCHNITTSTYPEN === */ - Ergebnis-Statistik-Zahlen:
clamp(2.5rem, 7vw, 5rem)Minimum. Hero-Metrik in Akzentfarbe. Andere Metriken in sekundärer Textfarbe. - Keine Bilder bereitgestellt -> CSS-generierte Visuals (geometrische Formen, Farbverlaufshintergründe, ikonenartige CSS-Konstrukte). Gib niemals sichtbare Platzhalter-Boxen aus.
- Kein SlidePresentation-JS. Füge nur einen minimalen IntersectionObserver für
.reveal-Eingangsanimationen ein (Betrachtererlebnis; PDF-Export rendert automatisch in den Endzustand). - Für Querformat 4:3 (falls angefordert): verwende
clamp()-Werte aus den Proportionen von graphic-slide-deck – Querformat 1200×900 bedeutet 1vw=12px, ähnlich wie Hochformat.
Typografie-Disziplin (alle clamp-basiert, abgestimmt auf 1200px A4 Hochformat):
- Cover-Schlagzeile:
clamp(2rem, 5vw, 3.5rem) - Abschnittsüberschrift:
clamp(1.25rem, 2.5vw, 2rem) - Körpertext:
clamp(0.875rem, 1.25vw, 1.1rem) - Statistik-Zahl (Hero):
clamp(3rem, 8vw, 5.5rem)in Akzentfarbe - Statistik-Zahl (sekundär):
clamp(2.5rem, 7vw, 5rem)in sekundärer Farbe - Zitat:
clamp(1.1rem, 2vw, 1.5rem)kursiv - Label/Beschriftung:
clamp(0.65rem, 0.9vw, 0.8rem)Großbuchstaben
Schritt 6: Selbst-QA
Überprüfe jedes Element. Behebe jeden Fehler – überspringe nichts.
Layout und Rendering:
- Jeder
.slidehatheight:100vh; height:100dvh; overflow:hidden - ALLE skalierbaren Schriftgrößen verwenden
clamp() - Kein Inhalt läuft bei 1200×1697-Viewport über – überprüfe die Dichte jeder Seite anhand der Grenzen in
references/page-library.md - CSS-generierte Visuals für alle Bildplatzhalterpositionen vorhanden
- Kein
-clamp(),-min(),-max()in CSS – verpacke Negative incalc(-1 * ...)
Struktur:
- Seitenanzahl entspricht dem Plan von Schritt 3
- Jede Seite verwendet
class="slide" - Alle Inhaltsabschnitte aus Schritt 3 sind vorhanden
-
class="slide"nur auf<section>-Elementen, nicht auf inneren Divs
Designqualität:
- Hero-Metrik visuell dominant im Ergebnisabschnitt – Akzentfarbe, größte Größe, keine konkurrierenden Elemente mit gleichem Gewicht
- Stilvorlagen-Token konsequent angewendet (Farben, Schriftarten aus
references/style-presets.md) - Keine Schrottmuster (überprüfe die NICHT VERWENDEN-Liste in
references/style-presets.md) - Typografie-Hierarchie klar: Cover-Schlagzeile >> Abschnittsüberschrift >> Körpertext (mindestens Verhältnis 2:1)
Inhalt:
- Keine verbotenen Wörter in irgendeinem Text
- Cover-Schlagzeile beginnt mit einer Zahl oder einem messbaren Ergebnis
- Testimonial-Zitat ist 40 Wörter oder weniger
- Closing-CTA hat Schlagzeile + Aktion + E-Mail + URL (alle vier)
- Alle Statistiken im Ergebnisabschnitt haben Labels (keine nackten Zahlen)
Schritt 7: Ausgabe
Haupt-HTML speichern:
mkdir -p case-study/[slug]
Schreibe in: case-study/[slug]/index.html
Öffne es: open case-study/[slug]/index.html
HTML-Dateien pro Seite (immer generieren):
Extrahiere jedes <section class="slide"> aus dem Haupt-HTML. Erstelle für jedes eine eigenständige Datei mit:
- Dem vollständigen
<style>-Block aus dem Haupt-HTML (wörtlich kopiert) - Dem einzelnen
<section class="slide">umhüllt von einer minimalen HTML-Hülle - Kein JS (statische Betrachtung pro Seite)
Schreibe in: case-study/[slug]/page-01.html, page-02.html usw.
PDF-Export (immer für A4 Hochformat durchführen):
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
case-study/[slug]/index.html \
case-study/[slug].pdf --portrait
Wenn Querformat 4:3 angefordert wurde, lasse --portrait weg und verwende stattdessen --compact (1280×720).
Hinweis: Beim ersten Mal wird Playwright automatisch installiert (~30-60 Sekunden). Informiere den Benutzer.
Aufräumen: Lösche .claude-design/previews/, falls in Schritt 2 Stilvorschaudateien generiert wurden.
Schritt 8: Zusammenfassung (kein HTML im Chat)
Im Chat präsentieren:
## Case Study: [Kundenname]
Datum: [heute] | Stil: [Stil] | Seiten: [N] | Format: A4 Hochformat
Anbieter: [Ihr Unternehmen] | Kunde: [Kundenname]
---
### Dateien
Hauptdatei: case-study/[slug]/index.html
Pro Seite: case-study/[slug]/page-01.html -> page-0N.html
PDF: case-study/[slug].pdf
---
### Case-Study-Checkliste
- [ ] Platzhalter [BILD: Logo] durch echte Logodatei ersetzen
- [ ] Überprüfen, ob alle Statistiken korrekt sind (Seite [Ergebnisseitennummer])
- [ ] Bestätigen, dass der Kunde die Verwendung des Zitats genehmigt hat
- [ ] Firmennamenschreibweise, Genauigkeit des Sprechers prüfen
- [ ] PDF-Seitenzahl testen = [N] und kein Inhalt abgeschnitten
- [ ] PDF teilen unter case-study/[slug].pdf
HTML nicht im Chat ausgeben.
Abschnittsreferenz
| Abschnitt | Zweck |
|---|---|
| cover | Eröffnungsseite – Kundenname, Schlagzeilenergebnis, Logos |
| overview | Auf einen Blick – Branche, Größe, Anwendungsfall |
| challenge | Das Problem – Kontext + Schmerzpunkte |
| solution | Wie Ihr Produkt es gelöst hat – Feature-Highlights |
| results | Schlüsselmetriken + unterstützende Erzählung |
| testimonial | Vollbreites hervorgehobenes Zitat vom Kunden |
| closing-cta | Anbieterlogo + Kontaktinformationen + nächster Schritt |