Zum Inhalt springen

Vorlagen: öffnen, anpassen, teilen

Drei fertige Seiten, die zeigen, was aus einer HTML-Datei wird. Mit einem Tipp in deiner Bibliothek – oder als Prompt, mit dem Claude deine eigene Version baut.

Monatsreport

KPIs, Trend, Segmente, Risiken – auf einer Seite

Der klassische Management-Report als interaktive Seite statt PDF: vier Kennzahlen mit Veränderung, ein 12-Monats-Chart, Umsatz nach Segment, Highlights und Risiken. Zahlen sind Platzhalter – ersetzen oder von Claude aus deiner Tabelle befüllen lassen.

Für: Geschäftsführung, Investoren, Beiräte

Enthält

  • KPI-Kacheln mit Vormonatsvergleich
  • Liniendiagramm ohne externe Bibliothek
  • Segment-Tabelle mit Balken
  • Abschnitt für Highlights, Risiken, nächste Schritte

Claude-Prompt zum Nachbauen

Erstelle einen Monatsreport als eigenständige HTML-Datei (kein externes CSS/JS, mobil lesbar). Oben vier KPI-Kacheln (Umsatz, EBITDA-Marge, Neukunden, Churn) mit Veränderung zum Vormonat in Grün/Rot. Darunter ein Liniendiagramm der letzten 12 Monate als Inline-SVG, eine Tabelle „Umsatz nach Segment“ mit Anteilsbalken und ein Abschnitt „Highlights & Risiken“ als Liste. Verwende diese Zahlen: [hier Tabelle einfügen]. Farben: Dunkelblau #0f172a, Akzent #1a6be6. Jede Kennzahl soll ein data-kpi-Attribut tragen, damit Kommentare eindeutig zugeordnet werden können.

Rechner

Regler bewegen, Ergebnis sofort – teilbar mit festgehaltenen Werten

Ein ROI-Rechner mit fünf Reglern (Stunden, Stundensatz, Einsparung, Einführungs- und laufende Kosten) und sofortigem Ergebnis: Ersparnis pro Jahr, Amortisation, ROI. Die Werte lassen sich in der URL festhalten, damit der Empfänger genau deine Annahmen sieht.

Für: Vertrieb, Berater, Projektleiter

Enthält

  • Fünf Eingaberegler mit Live-Anzeige
  • Ergebnis-Box mit Jahresersparnis und Amortisation
  • Werte per URL festhalten
  • Kein Framework, 5 KB

Claude-Prompt zum Nachbauen

Baue einen Rechner als eigenständige HTML-Datei für: [Fragestellung, z. B. „Lohnt sich die Einführung von X?“]. Eingaben als Schieberegler mit Live-Anzeige des Werts: [Liste der Eingaben mit Min/Max/Standard]. Ergebnis groß in einer dunklen Box (Hauptkennzahl), darunter zwei Nebenkennzahlen. Formel: [Formel]. Ein Button „Werte festhalten“ schreibt alle Eingaben in die URL (history.replaceState) und liest sie beim Laden wieder ein. Mobil zuerst, kein externes CSS/JS, Akzentfarbe #1a6be6.

One-Pager / Pitch

Problem, Lösung, Zahlen, Plan, Entscheidung – zum Durchscrollen

Ein Projektvorschlag auf einer Seite: Hero mit Claim, dann Problem, Lösung, drei Kennzahlen, Zeitplan, Risiken und die konkrete Entscheidung, die gebraucht wird. Empfänger kommentieren direkt am Absatz, den sie anders sehen.

Für: Interne Vorschläge, Gründer, Projektteams

Enthält

  • Hero mit Claim und Datum
  • Abschnitte Problem / Lösung / Zahlen / Plan / Risiken
  • Zeitstrahl in vier Schritten
  • Entscheidungs-Box am Ende

Claude-Prompt zum Nachbauen

Schreibe einen One-Pager als eigenständige HTML-Datei für diesen Vorschlag: [Thema in 2–3 Sätzen]. Aufbau: farbiger Kopfbereich mit Titel und einem Satz Claim; Abschnitte „Problem“, „Lösung“ (3 Punkte), „Zahlen“ (3 Kennzahlen als Kacheln), „Plan“ (4 Schritte als Zeitstrahl), „Risiken“ (2 Punkte) und eine dunkle Box „Entscheidung“ mit der konkreten Bitte und Frist. Kurze Sätze, keine Füllwörter, mobil lesbar, kein externes CSS/JS. Jeder Abschnitt bekommt eine id, damit Kommentare eindeutig zugeordnet werden.

Weitere Vorlagen folgen – Wünsche an hello@annopane.com.

Probier es mit einer Datei, die du schon hast.

Kostenlos, ohne Anmeldung. Hochladen, Link teilen, Feedback einsammeln.

Kostenlos starten