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.
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
"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]."
"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]"
"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."
"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
"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]"
"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."
"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."
"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
"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]"
"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]"
"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]"
"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]"
"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
"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."
"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."
"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
"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?"
"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?"
"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)
"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]"
"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)."
"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
"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?"
"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?"