Prompt-Bibliothek

Kuratierte Sammlung erprobter Prompts für typische Webentwicklungsaufgaben in den Digital Humanities. Nutze diese als Ausgangspunkt und passe sie an dein konkretes Projekt an.

Wie du diese Prompts nutzt

Ersetze die Platzhalter in [eckigen Klammern] mit deinen eigenen Daten. Je mehr Kontext du gibst (bestehender Code, Datenbeispiele, Design-Vorgaben), desto besser das Ergebnis.

HTML-Prompts

Semantische Seite erstellen

"Erstelle eine semantische HTML5-Seite für einen historischen Brief. Der Brief ist von [Absender] an [Empfänger], datiert auf [Datum], geschrieben in [Ort]. Verwende die Elemente header, main, footer und article. Der Brieftext lautet: [Text]."

TEI zu HTML

"Wandle dieses TEI-XML-Dokument in eine HTML-Seite um. Behalte die Absatzstruktur und die Metadaten (Absender, Empfänger, Datum) bei. Zeige die Metadaten in einem header-Bereich an. Hier ist das TEI-XML: [TEI-Code]"

Navigation erstellen

"Erstelle eine HTML-Navigation für eine Portfolio-Website mit folgenden Seiten: Startseite (index.html), Über mich (about.html), Projekte (projects.html), Kontakt (contact.html). Die Navigation soll als horizontale Leiste dargestellt werden und auf der aktuellen Seite einen aktiven Zustand haben."

Metadaten-Tabelle

"Erstelle eine HTML-Tabelle für diese Handschriften-Metadaten. Spalten: Signatur, Titel, Autor, Datum, Ort. Verwende thead und tbody. Hier sind die Daten: [CSV oder Liste]"

CSS-Prompts

Historisches Dokument stylen

"Style diese HTML-Seite wie ein historisches Dokument: Verwende eine Serifenschrift (Georgia), breite Ränder (mindestens 3rem), gedämpfte Farben (beige Hintergrund, dunkles Braun für Text). Definiere CSS-Variablen für alle Farben. Hier ist das HTML: [HTML-Code]"

Responsives Grid-Layout

"Erstelle ein responsives CSS-Grid-Layout für Sammlungsobjekte. Auf Desktop: 3 Spalten, auf Tablet (unter 768px): 2 Spalten, auf Mobile (unter 480px): 1 Spalte. Jede Karte hat ein Bild, einen Titel und eine kurze Beschreibung. Verwende CSS-Variablen für Abstände und Farben."

CSS-Variablen-System

"Erstelle ein CSS-Variablen-System (Custom Properties) für ein DH-Projekt. Definiere Variablen für: Primärfarbe, Sekundärfarbe, Hintergrund, Text, Link-Farbe, Schriftarten (Serif für Text, Sans-Serif für UI, Monospace für Code), Abstände (klein, mittel, groß) und Randradien."

Tabelle stylen

"Style diese HTML-Tabelle: Abwechselnde Zeilenfarben (Zebra-Streifen), Hover-Effekt auf Zeilen, sticky Header, saubere Borders. Die Tabelle soll auf schmalen Bildschirmen horizontal scrollbar sein."

JavaScript-Prompts

CSV einlesen und anzeigen

"Schreibe eine JavaScript-Funktion, die eine CSV-Datei per fetch() lädt, sie zeilenweise parst (Komma als Trenner) und als HTML-Tabelle in das Element mit der ID 'tabelle' einfügt. Die erste Zeile der CSV enthält die Spaltenüberschriften. Hier ist ein Beispiel der Daten: [erste 3 CSV-Zeilen]"

TEI-XML parsen

"Schreibe JavaScript-Code, der diese TEI-XML-Datei per fetch() lädt und mit DOMParser parst. Extrahiere aus dem teiHeader: Titel, Absender (correspAction type='sent'), Empfänger (correspAction type='received') und Datum. Zeige diese Informationen in einem HTML-Container an. Hier ist ein Beispiel des TEI: [TEI-Snippet]"

Filterfunktion

"Erstelle eine Live-Suchfunktion für eine Liste von Briefkorrespondenzen. Bei Eingabe in ein Suchfeld soll die angezeigte Tabelle nach Absender, Empfänger und Ort gefiltert werden. Verwende addEventListener('input', ...) und Array.filter(). Die Daten haben dieses Format: [JSON-Beispiel]"

Sortierfunktion

"Füge der bestehenden Tabelle eine Sortierfunktion hinzu: Klick auf einen Spaltenheader sortiert die Tabelle nach dieser Spalte (aufsteigend/absteigend toggle). Verwende Array.sort() mit einer Vergleichsfunktion. Hier ist mein bestehender Code: [Code]"

Leaflet-Karte

"Erstelle eine Leaflet.js-Karte, die GeoJSON-Daten mit Korrespondenzorten anzeigt. Jeder Marker soll ein Popup mit dem Ortsnamen und der Anzahl der Briefe zeigen. Beim Klick auf einen Marker soll rechts neben der Karte eine Detailansicht erscheinen. Hier sind meine GeoJSON-Daten: [GeoJSON-Snippet]"

Datenverarbeitungs-Prompts

API-Response verarbeiten

"Hier ist die JSON-Response der Europeana API: [JSON-Snippet]. Schreibe JavaScript, das die Items extrahiert und für jedes Item eine Karte (div mit Bild, Titel, Jahr und Quelle) erstellt. Füge die Karten in den Container mit der ID 'ergebnisse' ein."

IIIF-Manifest verarbeiten

"Hier ist ein IIIF Presentation API 3.0 Manifest: [JSON-Snippet]. Schreibe JavaScript, das alle Canvases durchgeht, für jedes die Bild-URL aus dem Annotation Body extrahiert, und die Bilder als Galerie anzeigt. Zeige auch das Label jedes Canvas als Bildunterschrift."

Daten transformieren

"Ich habe Briefdaten als CSV: [CSV-Beispiel]. Transformiere diese in ein JavaScript-Array von Objekten mit den Properties: id, sender, receiver, date (als Date-Objekt), city. Schreibe eine Funktion, die die CSV-Daten einliest und das Array zurückgibt."

Debugging-Prompts

Fehlermeldung erklären

"Mein JavaScript zeigt folgenden Fehler in der Browser-Konsole: '[Fehlermeldung]'. Der Fehler tritt in Zeile [X] auf. Hier ist der relevante Code: [Code]. Was bedeutet dieser Fehler und wie kann ich ihn beheben?"

Layout-Problem lösen

"Mein CSS-Layout verhält sich nicht wie erwartet. Ich möchte, dass [gewünschtes Verhalten], aber stattdessen passiert [tatsächliches Verhalten]. Hier ist mein HTML: [HTML] und mein CSS: [CSS]. Was stimmt nicht?"

Code Review

"Bitte überprüfe diesen JavaScript-Code auf mögliche Fehler, Sicherheitsprobleme und Verbesserungsmöglichkeiten. Fokus auf Lesbarkeit und Korrektheit: [Code]"

Meta-Prompts (über Code lernen)

Code erklären

"Erkläre mir diesen JavaScript-Code Zeile für Zeile. Ich bin Anfänger und kenne die Grundlagen (Variablen, if/else, Funktionen), aber nicht [Konzept]. Hier ist der Code: [Code]"

Konzept verstehen

"Erkläre mir [async/await | das Box-Model | CSS Grid | die Fetch API] so, als wäre ich Geisteswissenschaftler:in ohne Programmiererfahrung. Verwende ein Beispiel aus den Digital Humanities (z.B. Briefe, Archive, Metadaten)."

Alternativen vergleichen

"Ich habe zwei Möglichkeiten, [Problem] zu lösen: [Ansatz A] und [Ansatz B]. Welcher Ansatz ist für mein Projekt besser geeignet und warum? Mein Projekt ist: [Beschreibung]"

Reflexions-Prompts

Prompt-Analyse

"Hier ist mein ursprünglicher Prompt: [Prompt 1]. Das Ergebnis war nicht zufriedenstellend weil [Problem]. Ich habe dann diesen Prompt verwendet: [Prompt 2]. Das Ergebnis war besser. Analysiere: Was habe ich beim zweiten Prompt anders gemacht und warum hat es besser funktioniert?"

Lernfortschritt

"Vergleiche diese zwei Code-Ausschnitte, die ich mit LLM-Unterstützung erstellt habe. Der erste ist aus Woche 1: [Code 1]. Der zweite aus Woche 8: [Code 2]. Welche Verbesserungen siehst du in meiner Art, mit einem LLM zu arbeiten?"