From 6fb9767ad81f17c42f8d1b50790d5353c23c2aa3 Mon Sep 17 00:00:00 2001 From: Radixura Date: Thu, 23 Apr 2026 15:10:58 +0200 Subject: [PATCH] Stable --- DESIGN.md | 24 ++ PROMPTS.md | 292 +++++++++++++++++++ html page/index.html | 673 +++++++++++++++++++++++++++++++++++++++++++ html page/style.css | 91 ++++++ 4 files changed, 1080 insertions(+) create mode 100644 DESIGN.md create mode 100644 PROMPTS.md create mode 100644 html page/index.html create mode 100644 html page/style.css diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 0000000..ac41cce --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,24 @@ +# Design System + +## 1. Farbpalette + +| Priorität | Funktion | Hex-Code | Anwendung | +|-----------|----------|----------|-----------| +| Primärfarbe | Rust-Orange | `#CE412B` | Markenidentität & Key-Visuals | +| Sekundärfarbe | Burn-Akzent | `#E89165` | Interaktive Elemente & Highlights | +| Hintergrund | Soft Deep Grey | `#242424` | Dark Mode Basis | +| Oberfläche | Layer Grau | `#2E2E2E` | Für Karten oder Sektionen, um Tiefe zu erzeugen. | +| Textfarbe | Off-White | `#E0E0E0` | Maximale Lesbarkeit auf dunklem Grund | + +## 2. Typografie + +### Überschriften (Headlines) +- **Schriftart:** Manrope +- **Stil:** Semibold (600) + +### Fließtext (Body) +- **Schriftart:** IBM Plex Sans +- **Stil:** Regular (400) + +### Auszeichnungsschrift (Technical) +- **Schriftart:** Fira Code diff --git a/PROMPTS.md b/PROMPTS.md new file mode 100644 index 0000000..ea55fb6 --- /dev/null +++ b/PROMPTS.md @@ -0,0 +1,292 @@ +# Richtig Prompten mit KI + +## Warum ein guter Prompt wichtig ist + +Stell dir vor, du bestellst in einem Restaurant. Sagst du nur *„Essen!"*, bekommst du vielleicht eine Suppe – obwohl du Pizza wolltest. Sagst du hingegen *„Ich hätte gern eine Margherita mit extra Käse, bitte"*, trifft die Bestellung genau, was du dir vorstellst. + +**Genau so funktioniert Prompting mit KI.** Je genauer deine Anweisung, desto besser das Ergebnis. + +--- + +## Das S-P-K-A-O Framework + +Dieses Framework ist dein Werkzeugkasten für jede KI-Interaktion. Es besteht aus fünf Bausteinen, die du nach Bedarf kombinierst. + +``` +S ─ Situativer Kontext → Wer soll die KI sein? +P ─ Präzise Aufgabe → Was genau soll sie tun? +K ─ Kontext & Regeln → Welche Leitplanken gelten? +A ─ Ausgabeformat → Wie soll das Ergebnis aussehen? +O ─ Optimierung → Was passiert als Nächstes? +``` + +--- + +## Baustein 1: S – Situativer Kontext (Persona) + +> **Alltagsbeispiel:** Wenn du zum Arzt gehst, erwartest du kompetente Beratung. Wenn du zum Mechaniker gehst, erwartest du eine andere Art von Expertise. Die KI funktioniert genauso – sie passt ihr Wissen an die Rolle an, die du ihr gibst. + +**So formulierst du es:** + +``` +Du bist ein erfahrener [Rolle], spezialisiert auf [Nische]. +``` + +**Konkret:** + +``` +Du bist ein erfahrener Python-Entwickler, spezialisiert auf Datenanalyse. +``` + +Was hier passiert: Die KI weiß jetzt, dass sie Fachbegriffe aus der Python-Welt verwenden, Code-Vorschläge in Python machen und auf Datenanalyse-Fälle eingehen soll. + +--- + +## Baustein 2: P – Präzise Aufgabe (Task) + +> **Alltagsbeispiel:** Wenn du jemanden bittest, dir zu helfen, sagst du nicht nur *„Hilf mir"*, sondern *„Kannst du mir helfen, diese Schrankwand zu tragen?"*. Ein aktives Verb macht den Unterschied. + +**Formuliere immer mit einem aktiven Verb:** + +``` +✅ Erstelle, Analysiere, Schreibe um, Extrahiere, Vergleiche, Fasse zusammen +❌ Kannst du mal schauen ob... (zu vage) +``` + +**Konkret:** + +``` +Analysiere den folgenden Python-Code und identifiziere potenzielle Performance-Probleme. +``` + +--- + +## Baustein 3: K – Kontext & Regeln (Constraints) + +> **Alltagsbeispiel:** Wenn du einen Handwerker beauftragst, sagst du ihm vielleicht: *„Nur Holz verwenden, nichts über 2 Meter, und bitte bis Freitag fertig."* Diese Regeln halten das Ergebnis im Rahmen. + +**Die wichtigsten Regeln im Überblick:** + +| Regel | Was sie bewirkt | Beispiel | +|-------|----------------|----------| +| Zielgruppe | Passt Sprache an | *„Erkläre es einem 10-Jährigen"* | +| Tonalität | Bestimmt den Stil | *„Sachlich und formell"* | +| Wissensbasis | Begrenzt Quellen | *„Nutze nur die Informationen aus Text X"* | +| Länge | Kontrolliert Umfang | *„Maximal 3 Sätze"* | + +**Konkret:** + +``` +Beachte folgende Regeln: +1. Verwende nur Fachbegriffe, die ein Anfänger versteht +2. Maximal 200 Wörter +3. Beziehe dich ausschließlich auf React 18 +``` + +--- + +## Baustein 4: A – Ausgabeformat (Output Formatting) + +> **Alltagsbeispiel:** Du kannst jemanden bitten, dir eine Adresse aufzuschreiben – auf einem Zettel, in einer E-Mail oder als Sprachnachricht. Das Format macht einen großen Unterschied in der Nutzbarkeit. + +**Du kannst strukturierte Formate vorgeben:** + +``` +Gib das Ergebnis als Tabelle aus mit den Spalten: Problem | Lösung | Priorität. +``` + +``` +Strukturiere die Antwort als Bullet-Points mit Zwischenüberschriften. +``` + +``` +Gib den Code als Markdown-Codeblock mit Syntax-Highlighting aus. +``` + +--- + +## Baustein 5: O – Optimierung (Iteration) + +> **Alltagsbeispiel:** Bei einem Friseur sagst du nach dem ersten Schnitt vielleicht *„Noch etwas kürzer an den Seiten"*. Das Feedback-Loop sorgt für das perfekte Ergebnis. + +**So lädst du die KI zur Interaktion ein:** + +``` +Stelle mir Rückfragen, falls Informationen fehlen, bevor du beginnst. +``` + +``` +Erkläre deine Lösung Schritt für Schritt (Chain of Thought). +``` + +``` +Falls meine Anweisung unklar ist, frage nach, bevor du generierst. +``` + +--- + +## Vollständige Blueprint-Vorlage + +Kopiere diese Vorlage und füll die Platzhalter aus: + +```` +[PERSONA]: Du bist ein [Rolle/Experte], spezialisiert auf [Nische]. + +[TASK]: Deine Aufgabe ist es, [präzise Tätigkeit] basierend auf [Input/Daten] auszuführen. + +[CONSTRAINTS]: Beachte dabei folgende Regeln: +1. [Regel 1] +2. [Regel 2] +Die Zielgruppe ist [Zielgruppe]. Der Tonfall sollte [Adjektiv] sein. + +[FORMAT]: Gib die Antwort als [Tabelle/Liste/Code] aus. Verwende [Überschriften/Fettmarkierungen]. + +[OPTIMIZE]: Wenn etwas unklar ist, frage nach, bevor du generierst. +```` + +--- + +## Praxis-Tipps + +### 1. Positive Anweisungen geben + +Sag der KI, was sie tun **soll** – nicht, was sie nicht tun soll. + +``` +❌ Schreibe nicht so emotional. +✅ Schreibe sachlich und neutral. +``` + +### 2. Few-Shot Prompting (Musterbeispiele) + +Gib der KI 1–2 Beispiele für das gewünschte Ergebnis direkt mit. KI lernt extrem schnell aus Mustern. + +``` +Schreibe eine E-Mail-Begrüßung. Beispiel: +"Sehr geehrte Frau Müller, willkommen bei unserem Team..." + +Schreibe nun eine Begrüßung für einen Kunden namens Herr Schmidt. +``` + +### 3. Trennzeichen (Delimiters) + +Nutze Zeichen wie `###` oder `"""`, um Anweisungen vom Inhalt zu trennen. Das verhindert, dass die KI Anweisungen mit dem zu analysierenden Text verwechselt. + +``` +Analysiere den folgenden Text: + +""" +Hier steht der zu analysierende Text. +""" + +Fasse die Kernpunkte in 3 Bullet-Points zusammen. +``` + +--- + +## Praxis-Vergleich: Schlechter vs. guter Prompt + +### Scenario: Du brauchst ein kleines Programm, das Temperaturen von Celsius in Fahrenheit umrechnet. + +*Hintergrund: Die Formel lautet F = C × 9/5 + 32. Einfach, oder? Schau mal, was ein Unterschied im Prompt macht.* + +--- + +### Schlechter Prompt + +``` +Mach mir ein Temperatur-Programm +``` + +**Was die KI liefert (typisch):** + +```python +celsius = 25 +fahrenheit = (celsius * 9/5) + 32 +print(fahrenheit) +``` + +**Was fehlt:** +- Keine Funktion – nur ein Hardcoded-Wert +- Keine Erklärung, was der Code macht +- Kein User-Input – man kann keine eigenen Werte eingeben +- Keine Fehlerbehandlung (Was ist, wenn jemand Text statt eine Zahl eingibt?) +- Kein Hinweis, für welche Sprache oder welchen Zweck + +--- + +### Besserer Prompt (S-P-K-A-O) + +```` +[PERSONA]: Du bist ein erfahrener Python-Entwickler, der Code für Anfänger verständlich und sauber schreibt. + +[TASK]: Erstelle ein kleines Python-Programm, das dem User eine Temperatur in Celsius abfragt und das Ergebnis in Fahrenheit ausgibt. + +[CONSTRAINTS]: +1. Nutze die Formel: F = C × 9/5 + 32 +2. Behandle Fehler: Was passiert, wenn der User Text statt einer Zahl eingibt? +3. Schreibe Commentare im Code, die jedem Schritt erklären +4. Zielgruppe: Jemand, der noch nie programmiert hat – erkläre alles verständlich +5. Output soll auf Deutsch sein + +[FORMAT]: Gib den Code als Codeblock aus. Füge danach eine kurze Erklärung bei, wie man das Programm ausführt. + +[OPTIMIZE]: Erkläre Schritt für Schritt, was jede Code-Zeile macht. +```` + +**Was die KI nun liefert:** + +```python +# Temperatur von Celsius nach Fahrenheit umrechnen +# Formel: F = C × 9/5 + 32 + +try: + # User nach Temperatur fragen + celsius = float(input("Gib die Temperatur in Celsius ein: ")) + + # Umrechnung durchführen + fahrenheit = (celsius * 9/5) + 32 + + # Ergebnis ausgeben (gerundet auf 2 Nachkommastellen) + print(f"{celsius}°C entspricht {fahrenheit:.2f}°F") + +except ValueError: + # Fehlermeldung, wenn keine gültige Zahl eingegeben wurde + print("Fehler: Bitte gib eine gültige Zahl ein (z.B. 25 oder 36.5).") +``` + +**Was jetzt anders ist:** +- ✅ Funktioniert als interaktives Programm (User gibt Werte ein) +- ✅ Fehlerbehandlung bei Fehleingaben (Text statt Zahl) +- ✅ Jeder Code-Schritt ist kommentiert und verständlich +- ✅ Ausgabe ist formatiert und auf Deutsch +- ✅ Klare Erklärung, wie man es ausführt + +--- + +### Zusammenfassung der Verbesserung + +| Aspekt | Schlechter Prompt | Guter Prompt | +|--------|-------------------|--------------| +| Interaktivität | ❌ Fester Wert | ✅ User-Eingabe | +| Fehlerbehandlung | ❌ Keine | ✅ Bei Fehleingabe | +| Kommentare | ❌ Keine | ✅ Jeder Schritt erklärt | +| Verständlichkeit | ❌ Nur Code | ✅ Code + Anleitung | +| Sprache | ❌ Englisch | ✅ Deutsch | +| Zielgruppe | ❌ Unbekannt | ✅ Anfänger | + +**Der Unterschied ist wie Tag und Nacht.** Ein guter Prompt spart dir nicht nur Zeit bei der Korrektur, sondern liefert Ergebnisse, die du direkt produktiv einsetzen kannst. + +--- + +## TL;DR – Die 5 Regeln auf einen Blick + +``` +1. S – Sag der KI WER sie ist (Persona) +2. P – Sag WAS sie tun soll (Task) +3. K – Sag WAS die Leitplanken sind (Constraints) +4. A – Sag WIE das Ergebnis aussehen soll (Format) +5. O – Lass die KI RÜCKFRAGEN stellen (Optimierung) +``` + +**Merke:** Ein Prompt ist wie eine Bestellung im Restaurant. Je genauer du beschreibst, desto näher kommt das Ergebnis an das, was du dir vorstellst. diff --git a/html page/index.html b/html page/index.html new file mode 100644 index 0000000..0f91278 --- /dev/null +++ b/html page/index.html @@ -0,0 +1,673 @@ + + + + + + Richtig Prompten mit KI – S-P-K-A-O Framework + + + + + + + + + + + + + + + + + + + + +
+
+
+

+ Richtig Prompten
mit KI +

+

+ Stell dir vor, du bestellst in einem Restaurant. Sagst du nur „Essen!", bekommst du vielleicht eine Suppe – obwohl du Pizza wolltest. +

+
+ + Framework entdecken + + + + Direkt zum Vergleich + +
+
+
+ + +
+
+
+
+
+ +
+
+

Warum ein guter Prompt wichtig ist

+

+ Genau so funktioniert Prompting mit KI. Je genauer deine Anweisung, desto besser das Ergebnis. +

+
+
+
+
+
+ + +
+
+

Das S-P-K-A-O Framework

+

Dieses Framework ist dein Werkzeugkasten für jede KI-Interaktion. Es besteht aus fünf Bausteinen, die du nach Bedarf kombinierst.

+ +
+ +
+
+ S +
+

Situativer Kontext

+

Wer soll die KI sein?

+
+ + +
+
+ P +
+

Präzise Aufgabe

+

Was genau soll sie tun?

+
+ + +
+
+ K +
+

Kontext & Regeln

+

Welche Leitplanken gelten?

+
+ + +
+
+ A +
+

Ausgabeformat

+

Wie soll das Ergebnis aussehen?

+
+ + +
+
+ O +
+

Optimierung

+

Was passiert als Nächstes?

+
+
+
+
+ + +
+
+ + +
+
+
+ S +
+
+

S – Situativer Kontext

+

Persona

+
+
+ +
+
+ Alltagsbeispiel: Wenn du zum Arzt gehst, erwartest du kompetente Beratung. Wenn du zum Mechaniker gehst, erwartest du eine andere Art von Expertise. Die KI funktioniert genauso – sie passt ihr Wissen an die Rolle an, die du ihr gibst. +
+
+ +
+
+

So formulierst du es:

+ Du bist ein erfahrener [Rolle], spezialisiert auf [Nische]. +
+
+

Konkret:

+ Du bist ein erfahrener Python-Entwickler, spezialisiert auf Datenanalyse. +
+

Was hier passiert: Die KI weiß jetzt, dass sie Fachbegriffe aus der Python-Welt verwenden, Code-Vorschläge in Python machen und auf Datenanalyse-Fälle eingehen soll.

+
+
+ +
+ + +
+
+
+ P +
+
+

P – Präzise Aufgabe

+

Task

+
+
+ +
+
+ Alltagsbeispiel: Wenn du jemanden bittest, dir zu helfen, sagst du nicht nur „Hilf mir", sondern „Kannst du mir helfen, diese Schrankwand zu tragen?". Ein aktives Verb macht den Unterschied. +
+
+ +
+

Formuliere immer mit einem aktiven Verb:

+
+

✅ Erstelle, Analysiere, Schreibe um, Extrahiere, Vergleiche, Fasse zusammen

+

❌ Kannst du mal schauen ob... (zu vage)

+
+
+

Konkret:

+ Analysiere den folgenden Python-Code und identifiziere potenzielle Performance-Probleme. +
+
+
+ +
+ + +
+
+
+ K +
+
+

K – Kontext & Regeln

+

Constraints

+
+
+ +
+
+ Alltagsbeispiel: Wenn du einen Handwerker beauftragst, sagst du ihm vielleicht: „Nur Holz verwenden, nichts über 2 Meter, und bitte bis Freitag fertig." Diese Regeln halten das Ergebnis im Rahmen. +
+
+ +

Die wichtigsten Regeln im Überblick:

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RegelWas sie bewirktBeispiel
ZielgruppePasst Sprache an„Erkläre es einem 10-Jährigen"
TonalitätBestimmt den Stil„Sachlich und formell"
WissensbasisBegrenzt Quellen„Nutze nur die Informationen aus Text X"
LängeKontrolliert Umfang„Maximal 3 Sätze"
+
+ +
+

Konkret:

+ + Beachte folgende Regeln:
+ 1. Verwende nur Fachbegriffe, die ein Anfänger versteht
+ 2. Maximal 200 Wörter
+ 3. Beziehe dich ausschließlich auf React 18 + +
+
+ +
+ + +
+
+
+ A +
+
+

A – Ausgabeformat

+

Output Formatting

+
+
+ +
+
+ Alltagsbeispiel: Du kannst jemanden bitten, dir eine Adresse aufzuschreiben – auf einem Zettel, in einer E-Mail oder als Sprachnachricht. Das Format macht einen großen Unterschied in der Nutzbarkeit. +
+
+ +

Du kannst strukturierte Formate vorgeben:

+
+
+ Gib das Ergebnis als Tabelle aus mit den Spalten: Problem | Lösung | Priorität. +
+
+ Strukturiere die Antwort als Bullet-Points mit Zwischenüberschriften. +
+
+ Gib den Code als Markdown-Codeblock mit Syntax-Highlighting aus. +
+
+
+ +
+ + +
+
+
+ O +
+
+

O – Optimierung

+

Iteration

+
+
+ +
+
+ Alltagsbeispiel: Bei einem Friseur sagst du nach dem ersten Schnitt vielleicht „Noch etwas kürzer an den Seiten". Das Feedback-Loop sorgt für das perfekte Ergebnis. +
+
+ +

So lädst du die KI zur Interaktion ein:

+
+
+ Stelle mir Rückfragen, falls Informationen fehlen, bevor du beginnst. +
+
+ Erkläre deine Lösung Schritt für Schritt (Chain of Thought). +
+
+ Falls meine Anweisung unklar ist, frage nach, bevor du generierst. +
+
+
+ +
+
+ + +
+
+

Vollständige Blueprint-Vorlage

+

Kopiere diese Vorlage und füll die Platzhalter aus:

+ +
+ 
[PERSONA]: Du bist ein [Rolle/Experte], spezialisiert auf [Nische].
+
+[TASK]: Deine Aufgabe ist es, [präzise Tätigkeit] basierend auf [Input/Daten] auszuführen.
+
+[CONSTRAINTS]: Beachte dabei folgende Regeln:
+1. [Regel 1]
+2. [Regel 2]
+Die Zielgruppe ist [Zielgruppe]. Der Tonfall sollte [Adjektiv] sein.
+
+[FORMAT]: Gib die Antwort als [Tabelle/Liste/Code] aus. Verwende [Überschriften/Fettmarkierungen].
+
+[OPTIMIZE]: Wenn etwas unklar ist, frage nach, bevor du generierst.
+
+
+
+ + +
+
+

Praxis-Vergleich

+

Schlechter vs. guter Prompt

+

Scenario: Du brauchst ein kleines Programm, das Temperaturen von Celsius in Fahrenheit umrechnet. Die Formel lautet: F = C × 9/5 + 32

+ +
+ + +
+
+
+ ❌ +

Schlechter Prompt

+
+
+
+
+ Mach mir ein Temperatur-Programm +
+ +

Was die KI liefert (typisch):

+
+ 
celsius = 25
+fahrenheit = (celsius * 9/5) + 32
+print(fahrenheit)
+
+ +

Was fehlt:

+
    +
  • ✗ Keine Funktion – nur ein festgelegter Wert (25)
    • +
  • ✗ Keine Erklärung, was der Code macht
    • +
  • ✗ Kein User-Input – man kann keine eigenen Werte eingeben
    • +
  • ✗ Keine Fehlerbehandlung (Was ist bei Text statt Zahl?)
    • +
  • ✗ Kein Hinweis, wofür das Programm gedacht ist
    • +
+
+
+ + +
+
+
+ ✅ +

Guter Prompt (S-P-K-A-O)

+
+
+
+
+ 
[PERSONA]: Du bist ein erfahrener Python-Entwickler, der Code für Anfänger verständlich und sauber schreibt.
+
+[TASK]: Erstelle ein kleines Python-Programm, das dem User eine Temperatur in Celsius abfragt und das Ergebnis in Fahrenheit ausgibt.
+
+[CONSTRAINTS]:
+1. Nutze die Formel: F = C × 9/5 + 32
+2. Behandle Fehler: Was passiert, wenn der User Text statt einer Zahl eingibt?
+3. Schreibe Commentare im Code, die jedem Schritt erklären
+4. Zielgruppe: Jemand, der noch nie programmiert hat
+5. Output soll auf Deutsch sein
+
+[FORMAT]: Gib den Code als Codeblock aus. Füge danach eine kurze Erklärung bei, wie man das Programm ausführt.
+
+[OPTIMIZE]: Erkläre Schritt für Schritt, was jede Code-Zeile macht.
+
+ +

Was die KI nun liefert:

+
+ 
# Temperatur von Celsius nach Fahrenheit umrechnen
+# Formel: F = C × 9/5 + 32
+
+try:
+    # User nach Temperatur fragen
+    celsius = float(input("Gib die Temperatur in Celsius ein: "))
+
+    # Umrechnung durchführen
+    fahrenheit = (celsius * 9/5) + 32
+
+    # Ergebnis ausgeben (gerundet auf 2 Nachkommastellen)
+    print(f"{celsius}°C entspricht {fahrenheit:.2f}°F")
+
+except ValueError:
+    # Fehlermeldung bei Fehleingabe
+    print("Fehler: Bitte gib eine gültige Zahl ein (z.B. 25 oder 36.5).")
+
+ +

Was jetzt anders ist:

+
    +
  • ✓ Funktioniert als interaktives Programm
    • +
  • ✓ Fehlerbehandlung bei Fehleingabe
    • +
  • ✓ Jeder Code-Schritt ist kommentiert
    • +
  • ✓ Ausgabe ist formatiert und auf Deutsch
    • +
  • ✓ Klare Erklärung, wie man es ausführt
    • +
+
+
+
+ + +
+
+

Zusammenfassung der Verbesserung

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AspektSchlechter PromptGuter Prompt
Interaktivität❌ Fester Wert✅ User-Eingabe
Fehlerbehandlung❌ Keine✅ Bei Fehleingabe
Kommentare❌ Keine✅ Jeder Schritt erklärt
Verständlichkeit❌ Nur Code✅ Code + Anleitung
Sprache❌ Englisch✅ Deutsch
Zielgruppe❌ Unbekannt✅ Anfänger
+
+
+ +

+ Der Unterschied ist wie Tag und Nacht. Ein guter Prompt spart dir nicht nur Zeit bei der Korrektur, sondern liefert Ergebnisse, die du direkt produktiv einsetzen kannst. +

+
+
+ + +
+
+

Praxis-Tipps

+ +
+ + +
+
+ 💬 +
+

Positive Anweisungen

+

Sag der KI, was sie tun soll – nicht, was sie nicht tun soll.

+
+

❌ Schreibe nicht so emotional.

+

✅ Schreibe sachlich und neutral.

+
+
+ + +
+
+ 🎯 +
+

Few-Shot Prompting

+

Gib der KI 1–2 Beispiele direkt mit. KI lernt extrem schnell aus Mustern.

+
+

Schreibe eine Begrüßung. Beispiel:

+

"Sehr geehrte Frau Müller..."

+

Schreibe nun für Herrn Schmidt.

+
+
+ + +
+
+ 🔀 +
+

Trennzeichen

+

Nutze ### oder """ um Anweisungen vom Inhalt zu trennen.

+
+

Analysiere den Text:

+

""" Text hier """

+

Fasse in 3 Punkten zusammen.

+
+
+ +
+
+
+ + +
+
+
+

TL;DR – Die 5 Regeln auf einen Blick

+ +
+
+
+ 1 +
+

S

+

Sag der KI WER sie ist

+
+
+
+ 2 +
+

P

+

Sag WAS sie tun soll

+
+
+
+ 3 +
+

K

+

Sag WAS die Leitplanken sind

+
+
+
+ 4 +
+

A

+

Sag WIE das Ergebnis aussehen soll

+
+
+
+ 5 +
+

O

+

Lass die KI RÜCKFRAGEN stellen

+
+
+ +
+

+ Merke: Ein Prompt ist wie eine Bestellung im Restaurant. Je genauer du beschreibst, desto näher kommt das Ergebnis an das, was du dir vorstellst. +

+
+
+
+
+ + + + + + + + + + + diff --git a/html page/style.css b/html page/style.css new file mode 100644 index 0000000..960bbbb --- /dev/null +++ b/html page/style.css @@ -0,0 +1,91 @@ +/* ============================================ + Richtig Prompten mit KI – Custom Styles + Design System: Rust-Orange / Burn-Akzent / Dark Mode + ============================================ */ + +/* Scrollbar Styling */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: #242424; +} + +::-webkit-scrollbar-thumb { + background: #CE412B; + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: #E89165; +} + +/* Selection Styling */ +::selection { + background: rgba(206, 65, 43, 0.3); + color: #E0E0E0; +} + +/* Smooth Scrolling */ +html { + scroll-behavior: smooth; +} + +/* Code Block Overflow */ +pre { + white-space: pre; + tab-size: 4; +} + +/* Blockquote Styling */ +blockquote em { + color: #E89165; +} + +/* Table Row Hover */ +tbody tr:hover { + background: rgba(255, 255, 255, 0.03); +} + +/* Card Hover Effects */ +.group:hover .group-hover\:bg-rust\/30 { + background: rgba(206, 65, 43, 0.3); +} + +/* Focus Visible for Accessibility */ +*:focus-visible { + outline: 2px solid #CE412B; + outline-offset: 2px; + border-radius: 4px; +} + +/* Print Styles */ +@media print { + body { + background: white; + color: #242424; + } + + nav, #scroll-top, footer { + display: none; + } + + .bg-layer, .bg-deep-grey, .bg-layer\/50 { + background: #f5f5f5; + border-color: #ddd; + } + + .text-rust, .text-burn { + color: #CE412B; + } + + .text-white { + color: #242424; + } + + .text-off-white, .text-off-white\/80, .text-off-white\/70, .text-off-white\/60 { + color: #555; + } +}