Stable
This commit is contained in:
673
html page/index.html
Normal file
673
html page/index.html
Normal file
@@ -0,0 +1,673 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Richtig Prompten mit KI – S-P-K-A-O Framework</title>
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Manrope:wght@500;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Tailwind Config -->
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'deep-grey': '#242424',
|
||||
'layer': '#2E2E2E',
|
||||
'rust': '#CE412B',
|
||||
'burn': '#E89165',
|
||||
'off-white': '#E0E0E0',
|
||||
},
|
||||
fontFamily: {
|
||||
'headline': ['Manrope', 'sans-serif'],
|
||||
'body': ['IBM Plex Sans', 'sans-serif'],
|
||||
'mono': ['Fira Code', 'monospace'],
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body class="bg-deep-grey text-off-white font-body antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-deep-grey/90 backdrop-blur-md border-b border-layer">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<a href="#" class="font-headline font-bold text-xl text-white">
|
||||
<span class="text-rust">S-P-K-A-O</span> Framework
|
||||
</a>
|
||||
<div class="hidden md:flex gap-6 text-sm font-medium">
|
||||
<a href="#warum" class="hover:text-rust transition-colors">Warum?</a>
|
||||
<a href="#framework" class="hover:text-rust transition-colors">Framework</a>
|
||||
<a href="#bausteine" class="hover:text-rust transition-colors">Bausteine</a>
|
||||
<a href="#vergleich" class="hover:text-rust transition-colors">Vergleich</a>
|
||||
<a href="#tipps" class="hover:text-rust transition-colors">Tipps</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="relative pt-32 pb-20 px-6 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-rust/10 via-transparent to-burn/5"></div>
|
||||
<div class="max-w-4xl mx-auto text-center relative z-10">
|
||||
<h1 class="font-headline font-extrabold text-5xl md:text-6xl lg:text-7xl text-white mb-6 leading-tight">
|
||||
Richtig Prompten<br>mit <span class="text-rust">KI</span>
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-off-white/80 max-w-2xl mx-auto leading-relaxed">
|
||||
Stell dir vor, du bestellst in einem Restaurant. Sagst du nur <em class="text-burn">„Essen!"</em>, bekommst du vielleicht eine Suppe – obwohl du Pizza wolltest.
|
||||
</p>
|
||||
<div class="mt-10 flex flex-wrap gap-4 justify-center">
|
||||
<a href="#framework" class="inline-flex items-center gap-2 bg-rust hover:bg-rust/90 text-white font-headline font-semibold px-8 py-3 rounded-lg transition-colors">
|
||||
Framework entdecken
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</a>
|
||||
<a href="#vergleich" class="inline-flex items-center gap-2 border border-off-white/30 hover:border-off-white/60 text-off-white font-headline font-semibold px-8 py-3 rounded-lg transition-colors">
|
||||
Direkt zum Vergleich
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Warum ein guter Prompt wichtig ist -->
|
||||
<section id="warum" class="py-20 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-layer rounded-2xl p-8 md:p-12 border border-white/5">
|
||||
<div class="flex items-start gap-4 mb-6">
|
||||
<div class="w-12 h-12 rounded-xl bg-rust/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<svg class="w-6 h-6 text-rust" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-headline font-bold text-2xl md:text-3xl text-white mb-4">Warum ein guter Prompt wichtig ist</h2>
|
||||
<p class="text-off-white/80 leading-relaxed text-lg">
|
||||
<strong class="text-white">Genau so funktioniert Prompting mit KI.</strong> Je genauer deine Anweisung, desto besser das Ergebnis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Framework Überblick -->
|
||||
<section id="framework" class="py-20 px-6 bg-layer/50">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="font-headline font-bold text-3xl md:text-4xl text-white text-center mb-4">Das S-P-K-A-O Framework</h2>
|
||||
<p class="text-off-white/70 text-center max-w-2xl mx-auto mb-12">Dieses Framework ist dein Werkzeugkasten für jede KI-Interaktion. Es besteht aus fünf Bausteinen, die du nach Bedarf kombinierst.</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-4">
|
||||
<!-- S -->
|
||||
<div class="bg-layer rounded-2xl p-6 border border-white/5 hover:border-rust/50 transition-all group">
|
||||
<div class="w-14 h-14 rounded-xl bg-rust/20 flex items-center justify-center mb-4 group-hover:bg-rust/30 transition-colors">
|
||||
<span class="font-headline font-bold text-2xl text-rust">S</span>
|
||||
</div>
|
||||
<h3 class="font-headline font-semibold text-white mb-1">Situativer Kontext</h3>
|
||||
<p class="text-sm text-off-white/60">Wer soll die KI sein?</p>
|
||||
</div>
|
||||
|
||||
<!-- P -->
|
||||
<div class="bg-layer rounded-2xl p-6 border border-white/5 hover:border-rust/50 transition-all group">
|
||||
<div class="w-14 h-14 rounded-xl bg-rust/20 flex items-center justify-center mb-4 group-hover:bg-rust/30 transition-colors">
|
||||
<span class="font-headline font-bold text-2xl text-rust">P</span>
|
||||
</div>
|
||||
<h3 class="font-headline font-semibold text-white mb-1">Präzise Aufgabe</h3>
|
||||
<p class="text-sm text-off-white/60">Was genau soll sie tun?</p>
|
||||
</div>
|
||||
|
||||
<!-- K -->
|
||||
<div class="bg-layer rounded-2xl p-6 border border-white/5 hover:border-rust/50 transition-all group">
|
||||
<div class="w-14 h-14 rounded-xl bg-rust/20 flex items-center justify-center mb-4 group-hover:bg-rust/30 transition-colors">
|
||||
<span class="font-headline font-bold text-2xl text-rust">K</span>
|
||||
</div>
|
||||
<h3 class="font-headline font-semibold text-white mb-1">Kontext & Regeln</h3>
|
||||
<p class="text-sm text-off-white/60">Welche Leitplanken gelten?</p>
|
||||
</div>
|
||||
|
||||
<!-- A -->
|
||||
<div class="bg-layer rounded-2xl p-6 border border-white/5 hover:border-rust/50 transition-all group">
|
||||
<div class="w-14 h-14 rounded-xl bg-rust/20 flex items-center justify-center mb-4 group-hover:bg-rust/30 transition-colors">
|
||||
<span class="font-headline font-bold text-2xl text-rust">A</span>
|
||||
</div>
|
||||
<h3 class="font-headline font-semibold text-white mb-1">Ausgabeformat</h3>
|
||||
<p class="text-sm text-off-white/60">Wie soll das Ergebnis aussehen?</p>
|
||||
</div>
|
||||
|
||||
<!-- O -->
|
||||
<div class="bg-layer rounded-2xl p-6 border border-white/5 hover:border-rust/50 transition-all group">
|
||||
<div class="w-14 h-14 rounded-xl bg-rust/20 flex items-center justify-center mb-4 group-hover:bg-rust/30 transition-colors">
|
||||
<span class="font-headline font-bold text-2xl text-rust">O</span>
|
||||
</div>
|
||||
<h3 class="font-headline font-semibold text-white mb-1">Optimierung</h3>
|
||||
<p class="text-sm text-off-white/60">Was passiert als Nächstes?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bausteine Detail -->
|
||||
<section id="bausteine" class="py-20 px-6">
|
||||
<div class="max-w-4xl mx-auto space-y-16">
|
||||
|
||||
<!-- Baustein 1: S -->
|
||||
<article class="scroll-mt-24">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-16 h-16 rounded-2xl bg-rust flex items-center justify-center flex-shrink-0">
|
||||
<span class="font-headline font-bold text-3xl text-white">S</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-2xl md:text-3xl text-white">S – Situativer Kontext</h3>
|
||||
<p class="text-off-white/60">Persona</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-layer rounded-2xl p-6 md:p-8 border border-white/5 mb-6">
|
||||
<blockquote class="border-l-4 border-burn pl-4 text-off-white/80 italic">
|
||||
<strong class="text-burn not-italic">Alltagsbeispiel:</strong> 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.
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-layer rounded-xl p-5 border border-white/5">
|
||||
<p class="text-sm text-off-white/60 mb-2 font-headline font-semibold uppercase tracking-wide">So formulierst du es:</p>
|
||||
<code class="font-mono text-burn text-sm">Du bist ein erfahrener [Rolle], spezialisiert auf [Nische].</code>
|
||||
</div>
|
||||
<div class="bg-layer rounded-xl p-5 border border-white/5">
|
||||
<p class="text-sm text-off-white/60 mb-2 font-headline font-semibold uppercase tracking-wide">Konkret:</p>
|
||||
<code class="font-mono text-burn text-sm">Du bist ein erfahrener Python-Entwickler, spezialisiert auf Datenanalyse.</code>
|
||||
</div>
|
||||
<p class="text-off-white/80 leading-relaxed">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>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<hr class="border-layer">
|
||||
|
||||
<!-- Baustein 2: P -->
|
||||
<article class="scroll-mt-24">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-16 h-16 rounded-2xl bg-rust flex items-center justify-center flex-shrink-0">
|
||||
<span class="font-headline font-bold text-3xl text-white">P</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-2xl md:text-3xl text-white">P – Präzise Aufgabe</h3>
|
||||
<p class="text-off-white/60">Task</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-layer rounded-2xl p-6 md:p-8 border border-white/5 mb-6">
|
||||
<blockquote class="border-l-4 border-burn pl-4 text-off-white/80 italic">
|
||||
<strong class="text-burn not-italic">Alltagsbeispiel:</strong> Wenn du jemanden bittest, dir zu helfen, sagst du nicht nur <em>„Hilf mir"</em>, sondern <em>„Kannst du mir helfen, diese Schrankwand zu tragen?"</em>. Ein aktives Verb macht den Unterschied.
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<p class="text-off-white/80 font-headline font-semibold">Formuliere immer mit einem aktiven Verb:</p>
|
||||
<div class="bg-layer rounded-xl p-5 border border-white/5 font-mono text-sm space-y-1">
|
||||
<p><span class="text-green-400">✅</span> Erstelle, Analysiere, Schreibe um, Extrahiere, Vergleiche, Fasse zusammen</p>
|
||||
<p><span class="text-red-400">❌</span> Kannst du mal schauen ob... <span class="text-off-white/50">(zu vage)</span></p>
|
||||
</div>
|
||||
<div class="bg-layer rounded-xl p-5 border border-white/5">
|
||||
<p class="text-sm text-off-white/60 mb-2 font-headline font-semibold uppercase tracking-wide">Konkret:</p>
|
||||
<code class="font-mono text-burn text-sm">Analysiere den folgenden Python-Code und identifiziere potenzielle Performance-Probleme.</code>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<hr class="border-layer">
|
||||
|
||||
<!-- Baustein 3: K -->
|
||||
<article class="scroll-mt-24">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-16 h-16 rounded-2xl bg-rust flex items-center justify-center flex-shrink-0">
|
||||
<span class="font-headline font-bold text-3xl text-white">K</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-2xl md:text-3xl text-white">K – Kontext & Regeln</h3>
|
||||
<p class="text-off-white/60">Constraints</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-layer rounded-2xl p-6 md:p-8 border border-white/5 mb-6">
|
||||
<blockquote class="border-l-4 border-burn pl-4 text-off-white/80 italic">
|
||||
<strong class="text-burn not-italic">Alltagsbeispiel:</strong> Wenn du einen Handwerker beauftragst, sagst du ihm vielleicht: <em>„Nur Holz verwenden, nichts über 2 Meter, und bitte bis Freitag fertig."</em> Diese Regeln halten das Ergebnis im Rahmen.
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<p class="text-off-white/80 font-headline font-semibold mb-4">Die wichtigsten Regeln im Überblick:</p>
|
||||
<div class="bg-layer rounded-2xl border border-white/5 overflow-hidden mb-6">
|
||||
<table class="w-full text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-white/10">
|
||||
<th class="px-6 py-4 font-headline font-semibold text-white text-sm">Regel</th>
|
||||
<th class="px-6 py-4 font-headline font-semibold text-white text-sm">Was sie bewirkt</th>
|
||||
<th class="px-6 py-4 font-headline font-semibold text-white text-sm">Beispiel</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-off-white/80 text-sm">
|
||||
<tr class="border-b border-white/5">
|
||||
<td class="px-6 py-4 font-medium text-white">Zielgruppe</td>
|
||||
<td class="px-6 py-4">Passt Sprache an</td>
|
||||
<td class="px-6 py-4"><em>„Erkläre es einem 10-Jährigen"</em></td>
|
||||
</tr>
|
||||
<tr class="border-b border-white/5">
|
||||
<td class="px-6 py-4 font-medium text-white">Tonalität</td>
|
||||
<td class="px-6 py-4">Bestimmt den Stil</td>
|
||||
<td class="px-6 py-4"><em>„Sachlich und formell"</em></td>
|
||||
</tr>
|
||||
<tr class="border-b border-white/5">
|
||||
<td class="px-6 py-4 font-medium text-white">Wissensbasis</td>
|
||||
<td class="px-6 py-4">Begrenzt Quellen</td>
|
||||
<td class="px-6 py-4"><em>„Nutze nur die Informationen aus Text X"</em></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium text-white">Länge</td>
|
||||
<td class="px-6 py-4">Kontrolliert Umfang</td>
|
||||
<td class="px-6 py-4"><em>„Maximal 3 Sätze"</em></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="bg-layer rounded-xl p-5 border border-white/5">
|
||||
<p class="text-sm text-off-white/60 mb-2 font-headline font-semibold uppercase tracking-wide">Konkret:</p>
|
||||
<code class="font-mono text-burn text-sm block leading-relaxed">
|
||||
Beachte folgende Regeln:<br>
|
||||
1. Verwende nur Fachbegriffe, die ein Anfänger versteht<br>
|
||||
2. Maximal 200 Wörter<br>
|
||||
3. Beziehe dich ausschließlich auf React 18
|
||||
</code>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<hr class="border-layer">
|
||||
|
||||
<!-- Baustein 4: A -->
|
||||
<article class="scroll-mt-24">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-16 h-16 rounded-2xl bg-rust flex items-center justify-center flex-shrink-0">
|
||||
<span class="font-headline font-bold text-3xl text-white">A</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-2xl md:text-3xl text-white">A – Ausgabeformat</h3>
|
||||
<p class="text-off-white/60">Output Formatting</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-layer rounded-2xl p-6 md:p-8 border border-white/5 mb-6">
|
||||
<blockquote class="border-l-4 border-burn pl-4 text-off-white/80 italic">
|
||||
<strong class="text-burn not-italic">Alltagsbeispiel:</strong> 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.
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<p class="text-off-white/80 font-headline font-semibold mb-4">Du kannst strukturierte Formate vorgeben:</p>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-layer rounded-xl p-4 border border-white/5">
|
||||
<code class="font-mono text-burn text-sm">Gib das Ergebnis als Tabelle aus mit den Spalten: Problem | Lösung | Priorität.</code>
|
||||
</div>
|
||||
<div class="bg-layer rounded-xl p-4 border border-white/5">
|
||||
<code class="font-mono text-burn text-sm">Strukturiere die Antwort als Bullet-Points mit Zwischenüberschriften.</code>
|
||||
</div>
|
||||
<div class="bg-layer rounded-xl p-4 border border-white/5">
|
||||
<code class="font-mono text-burn text-sm">Gib den Code als Markdown-Codeblock mit Syntax-Highlighting aus.</code>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<hr class="border-layer">
|
||||
|
||||
<!-- Baustein 5: O -->
|
||||
<article class="scroll-mt-24">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-16 h-16 rounded-2xl bg-rust flex items-center justify-center flex-shrink-0">
|
||||
<span class="font-headline font-bold text-3xl text-white">O</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-2xl md:text-3xl text-white">O – Optimierung</h3>
|
||||
<p class="text-off-white/60">Iteration</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-layer rounded-2xl p-6 md:p-8 border border-white/5 mb-6">
|
||||
<blockquote class="border-l-4 border-burn pl-4 text-off-white/80 italic">
|
||||
<strong class="text-burn not-italic">Alltagsbeispiel:</strong> Bei einem Friseur sagst du nach dem ersten Schnitt vielleicht <em>„Noch etwas kürzer an den Seiten"</em>. Das Feedback-Loop sorgt für das perfekte Ergebnis.
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<p class="text-off-white/80 font-headline font-semibold mb-4">So lädst du die KI zur Interaktion ein:</p>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-layer rounded-xl p-4 border border-white/5">
|
||||
<code class="font-mono text-burn text-sm">Stelle mir Rückfragen, falls Informationen fehlen, bevor du beginnst.</code>
|
||||
</div>
|
||||
<div class="bg-layer rounded-xl p-4 border border-white/5">
|
||||
<code class="font-mono text-burn text-sm">Erkläre deine Lösung Schritt für Schritt (Chain of Thought).</code>
|
||||
</div>
|
||||
<div class="bg-layer rounded-xl p-4 border border-white/5">
|
||||
<code class="font-mono text-burn text-sm">Falls meine Anweisung unklar ist, frage nach, bevor du generierst.</code>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Blueprint Vorlage -->
|
||||
<section class="py-20 px-6 bg-layer/50">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="font-headline font-bold text-3xl md:text-4xl text-white text-center mb-4">Vollständige Blueprint-Vorlage</h2>
|
||||
<p class="text-off-white/70 text-center max-w-2xl mx-auto mb-10">Kopiere diese Vorlage und füll die Platzhalter aus:</p>
|
||||
|
||||
<div class="bg-deep-grey rounded-2xl p-6 md:p-8 border border-white/10 font-mono text-sm leading-relaxed overflow-x-auto">
|
||||
<pre class="text-off-white/90"><span class="text-rust">[PERSONA]</span>: Du bist ein <span class="text-burn">[Rolle/Experte]</span>, spezialisiert auf <span class="text-burn">[Nische]</span>.
|
||||
|
||||
<span class="text-rust">[TASK]</span>: Deine Aufgabe ist es, <span class="text-burn">[präzise Tätigkeit]</span> basierend auf <span class="text-burn">[Input/Daten]</span> auszuführen.
|
||||
|
||||
<span class="text-rust">[CONSTRAINTS]</span>: Beachte dabei folgende Regeln:
|
||||
1. <span class="text-burn">[Regel 1]</span>
|
||||
2. <span class="text-burn">[Regel 2]</span>
|
||||
Die Zielgruppe ist <span class="text-burn">[Zielgruppe]</span>. Der Tonfall sollte <span class="text-burn">[Adjektiv]</span> sein.
|
||||
|
||||
<span class="text-rust">[FORMAT]</span>: Gib die Antwort als <span class="text-burn">[Tabelle/Liste/Code]</span> aus. Verwende <span class="text-burn">[Überschriften/Fettmarkierungen]</span>.
|
||||
|
||||
<span class="text-rust">[OPTIMIZE]</span>: Wenn etwas unklar ist, frage nach, bevor du generierst.</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Praxis-Vergleich -->
|
||||
<section id="vergleich" class="py-20 px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="font-headline font-bold text-3xl md:text-4xl text-white text-center mb-4">Praxis-Vergleich</h2>
|
||||
<p class="text-off-white/70 text-center max-w-2xl mx-auto mb-4">Schlechter vs. guter Prompt</p>
|
||||
<p class="text-off-white/60 text-center max-w-2xl mx-auto mb-12">Scenario: Du brauchst ein kleines Programm, das Temperaturen von Celsius in Fahrenheit umrechnet. Die Formel lautet: F = C × 9/5 + 32</p>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
<!-- Schlechter Prompt -->
|
||||
<div class="bg-layer rounded-2xl border border-red-500/30 overflow-hidden">
|
||||
<div class="bg-red-500/10 px-6 py-4 border-b border-red-500/20">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-red-400 text-xl">❌</span>
|
||||
<h3 class="font-headline font-bold text-xl text-white">Schlechter Prompt</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="bg-deep-grey rounded-xl p-4 border border-white/10 mb-6">
|
||||
<code class="font-mono text-off-white/90 text-sm">Mach mir ein Temperatur-Programm</code>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-off-white/60 font-headline font-semibold mb-3 uppercase tracking-wide">Was die KI liefert (typisch):</p>
|
||||
<div class="bg-deep-grey rounded-xl p-4 border border-white/10 mb-6 overflow-x-auto">
|
||||
<pre class="font-mono text-sm text-off-white/80">celsius = <span class="text-orange-400">25</span>
|
||||
fahrenheit = (celsius * <span class="text-orange-400">9</span>/<span class="text-orange-400">5</span>) + <span class="text-orange-400">32</span>
|
||||
<span class="text-yellow-400">print</span>(fahrenheit)</pre>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-off-white/60 font-headline font-semibold mb-3 uppercase tracking-wide">Was fehlt:</p>
|
||||
<ul class="space-y-2 text-sm text-off-white/70">
|
||||
<li class="flex items-start gap-2"><span class="text-red-400 mt-0.5">✗</span> Keine Funktion – nur ein festgelegter Wert (25)</li>
|
||||
<li class="flex items-start gap-2"><span class="text-red-400 mt-0.5">✗</span> Keine Erklärung, was der Code macht</li>
|
||||
<li class="flex items-start gap-2"><span class="text-red-400 mt-0.5">✗</span> Kein User-Input – man kann keine eigenen Werte eingeben</li>
|
||||
<li class="flex items-start gap-2"><span class="text-red-400 mt-0.5">✗</span> Keine Fehlerbehandlung (Was ist bei Text statt Zahl?)</li>
|
||||
<li class="flex items-start gap-2"><span class="text-red-400 mt-0.5">✗</span> Kein Hinweis, wofür das Programm gedacht ist</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Guter Prompt -->
|
||||
<div class="bg-layer rounded-2xl border border-green-500/30 overflow-hidden">
|
||||
<div class="bg-green-500/10 px-6 py-4 border-b border-green-500/20">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-green-400 text-xl">✅</span>
|
||||
<h3 class="font-headline font-bold text-xl text-white">Guter Prompt (S-P-K-A-O)</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="bg-deep-grey rounded-xl p-4 border border-white/10 mb-6 overflow-x-auto">
|
||||
<pre class="font-mono text-xs text-off-white/90 leading-relaxed"><span class="text-rust">[PERSONA]</span>: Du bist ein erfahrener Python-Entwickler, der Code für Anfänger verständlich und sauber schreibt.
|
||||
|
||||
<span class="text-rust">[TASK]</span>: Erstelle ein kleines Python-Programm, das dem User eine Temperatur in Celsius abfragt und das Ergebnis in Fahrenheit ausgibt.
|
||||
|
||||
<span class="text-rust">[CONSTRAINTS]</span>:
|
||||
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
|
||||
|
||||
<span class="text-rust">[FORMAT]</span>: Gib den Code als Codeblock aus. Füge danach eine kurze Erklärung bei, wie man das Programm ausführt.
|
||||
|
||||
<span class="text-rust">[OPTIMIZE]</span>: Erkläre Schritt für Schritt, was jede Code-Zeile macht.</pre>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-off-white/60 font-headline font-semibold mb-3 uppercase tracking-wide">Was die KI nun liefert:</p>
|
||||
<div class="bg-deep-grey rounded-xl p-4 border border-white/10 mb-6 overflow-x-auto">
|
||||
<pre class="font-mono text-sm text-off-white/80"><span class="text-green-400"># Temperatur von Celsius nach Fahrenheit umrechnen</span>
|
||||
<span class="text-green-400"># Formel: F = C × 9/5 + 32</span>
|
||||
|
||||
<span class="text-purple-400">try</span>:
|
||||
<span class="text-green-400"># User nach Temperatur fragen</span>
|
||||
celsius = <span class="text-yellow-400">float</span>(<span class="text-yellow-400">input</span>(<span class="text-green-400">"Gib die Temperatur in Celsius ein: "</span>))
|
||||
|
||||
<span class="text-green-400"># Umrechnung durchführen</span>
|
||||
fahrenheit = (celsius * <span class="text-orange-400">9</span>/<span class="text-orange-400">5</span>) + <span class="text-orange-400">32</span>
|
||||
|
||||
<span class="text-green-400"># Ergebnis ausgeben (gerundet auf 2 Nachkommastellen)</span>
|
||||
<span class="text-yellow-400">print</span>(<span class="text-green-400">f"<span class="text-white">{celsius}°C</span> entspricht <span class="text-white">{fahrenheit:.2f}°F</span>"</span>)
|
||||
|
||||
<span class="text-purple-400">except</span> <span class="text-yellow-400">ValueError</span>:
|
||||
<span class="text-green-400"># Fehlermeldung bei Fehleingabe</span>
|
||||
<span class="text-yellow-400">print</span>(<span class="text-green-400">"Fehler: Bitte gib eine gültige Zahl ein (z.B. 25 oder 36.5)."</span>)</pre>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-off-white/60 font-headline font-semibold mb-3 uppercase tracking-wide">Was jetzt anders ist:</p>
|
||||
<ul class="space-y-2 text-sm text-off-white/70">
|
||||
<li class="flex items-start gap-2"><span class="text-green-400 mt-0.5">✓</span> Funktioniert als interaktives Programm</li>
|
||||
<li class="flex items-start gap-2"><span class="text-green-400 mt-0.5">✓</span> Fehlerbehandlung bei Fehleingabe</li>
|
||||
<li class="flex items-start gap-2"><span class="text-green-400 mt-0.5">✓</span> Jeder Code-Schritt ist kommentiert</li>
|
||||
<li class="flex items-start gap-2"><span class="text-green-400 mt-0.5">✓</span> Ausgabe ist formatiert und auf Deutsch</li>
|
||||
<li class="flex items-start gap-2"><span class="text-green-400 mt-0.5">✓</span> Klare Erklärung, wie man es ausführt</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zusammenfassung Tabelle -->
|
||||
<div class="mt-12 bg-layer rounded-2xl border border-white/5 overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-white/10">
|
||||
<h3 class="font-headline font-bold text-xl text-white">Zusammenfassung der Verbesserung</h3>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-white/10">
|
||||
<th class="px-6 py-4 font-headline font-semibold text-white text-sm">Aspekt</th>
|
||||
<th class="px-6 py-4 font-headline font-semibold text-red-400 text-sm">Schlechter Prompt</th>
|
||||
<th class="px-6 py-4 font-headline font-semibold text-green-400 text-sm">Guter Prompt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-sm">
|
||||
<tr class="border-b border-white/5">
|
||||
<td class="px-6 py-4 font-medium text-white">Interaktivität</td>
|
||||
<td class="px-6 py-4 text-red-400">❌ Fester Wert</td>
|
||||
<td class="px-6 py-4 text-green-400">✅ User-Eingabe</td>
|
||||
</tr>
|
||||
<tr class="border-b border-white/5">
|
||||
<td class="px-6 py-4 font-medium text-white">Fehlerbehandlung</td>
|
||||
<td class="px-6 py-4 text-red-400">❌ Keine</td>
|
||||
<td class="px-6 py-4 text-green-400">✅ Bei Fehleingabe</td>
|
||||
</tr>
|
||||
<tr class="border-b border-white/5">
|
||||
<td class="px-6 py-4 font-medium text-white">Kommentare</td>
|
||||
<td class="px-6 py-4 text-red-400">❌ Keine</td>
|
||||
<td class="px-6 py-4 text-green-400">✅ Jeder Schritt erklärt</td>
|
||||
</tr>
|
||||
<tr class="border-b border-white/5">
|
||||
<td class="px-6 py-4 font-medium text-white">Verständlichkeit</td>
|
||||
<td class="px-6 py-4 text-red-400">❌ Nur Code</td>
|
||||
<td class="px-6 py-4 text-green-400">✅ Code + Anleitung</td>
|
||||
</tr>
|
||||
<tr class="border-b border-white/5">
|
||||
<td class="px-6 py-4 font-medium text-white">Sprache</td>
|
||||
<td class="px-6 py-4 text-red-400">❌ Englisch</td>
|
||||
<td class="px-6 py-4 text-green-400">✅ Deutsch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium text-white">Zielgruppe</td>
|
||||
<td class="px-6 py-4 text-red-400">❌ Unbekannt</td>
|
||||
<td class="px-6 py-4 text-green-400">✅ Anfänger</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-8 text-center text-off-white/80 text-lg">
|
||||
<strong class="text-white">Der Unterschied ist wie Tag und Nacht.</strong> Ein guter Prompt spart dir nicht nur Zeit bei der Korrektur, sondern liefert Ergebnisse, die du direkt produktiv einsetzen kannst.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Praxis-Tipps -->
|
||||
<section id="tipps" class="py-20 px-6 bg-layer/50">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="font-headline font-bold text-3xl md:text-4xl text-white text-center mb-12">Praxis-Tipps</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
<!-- Positive Anweisungen -->
|
||||
<div class="bg-layer rounded-2xl p-6 border border-white/5">
|
||||
<div class="w-12 h-12 rounded-xl bg-burn/20 flex items-center justify-center mb-4">
|
||||
<span class="text-2xl">💬</span>
|
||||
</div>
|
||||
<h3 class="font-headline font-bold text-lg text-white mb-3">Positive Anweisungen</h3>
|
||||
<p class="text-off-white/70 text-sm mb-4">Sag der KI, was sie tun <strong class="text-white">soll</strong> – nicht, was sie nicht tun soll.</p>
|
||||
<div class="bg-deep-grey rounded-xl p-3 font-mono text-xs space-y-1">
|
||||
<p><span class="text-red-400">❌</span> <span class="text-off-white/60">Schreibe nicht so emotional.</span></p>
|
||||
<p><span class="text-green-400">✅</span> <span class="text-burn">Schreibe sachlich und neutral.</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Few-Shot -->
|
||||
<div class="bg-layer rounded-2xl p-6 border border-white/5">
|
||||
<div class="w-12 h-12 rounded-xl bg-burn/20 flex items-center justify-center mb-4">
|
||||
<span class="text-2xl">🎯</span>
|
||||
</div>
|
||||
<h3 class="font-headline font-bold text-lg text-white mb-3">Few-Shot Prompting</h3>
|
||||
<p class="text-off-white/70 text-sm mb-4">Gib der KI 1–2 Beispiele direkt mit. KI lernt extrem schnell aus Mustern.</p>
|
||||
<div class="bg-deep-grey rounded-xl p-3 font-mono text-xs leading-relaxed">
|
||||
<p class="text-off-white/60">Schreibe eine Begrüßung. Beispiel:</p>
|
||||
<p class="text-burn">"Sehr geehrte Frau Müller..."</p>
|
||||
<p class="text-off-white/60 mt-2">Schreibe nun für Herrn Schmidt.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delimiters -->
|
||||
<div class="bg-layer rounded-2xl p-6 border border-white/5">
|
||||
<div class="w-12 h-12 rounded-xl bg-burn/20 flex items-center justify-center mb-4">
|
||||
<span class="text-2xl">🔀</span>
|
||||
</div>
|
||||
<h3 class="font-headline font-bold text-lg text-white mb-3">Trennzeichen</h3>
|
||||
<p class="text-off-white/70 text-sm mb-4">Nutze <code class="text-burn font-mono">###</code> oder <code class="text-burn font-mono">"""</code> um Anweisungen vom Inhalt zu trennen.</p>
|
||||
<div class="bg-deep-grey rounded-xl p-3 font-mono text-xs leading-relaxed">
|
||||
<p class="text-off-white/60">Analysiere den Text:</p>
|
||||
<p class="text-burn">""" Text hier """</p>
|
||||
<p class="text-off-white/60 mt-2">Fasse in 3 Punkten zusammen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TL;DR -->
|
||||
<section class="py-20 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-gradient-to-br from-rust/20 via-layer to-layer rounded-2xl p-8 md:p-12 border border-rust/30">
|
||||
<h2 class="font-headline font-bold text-3xl text-white text-center mb-8">TL;DR – Die 5 Regeln auf einen Blick</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8">
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 rounded-full bg-rust flex items-center justify-center mx-auto mb-3">
|
||||
<span class="font-headline font-bold text-white">1</span>
|
||||
</div>
|
||||
<p class="font-headline font-semibold text-white text-sm">S</p>
|
||||
<p class="text-off-white/60 text-xs mt-1">Sag der KI WER sie ist</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 rounded-full bg-rust flex items-center justify-center mx-auto mb-3">
|
||||
<span class="font-headline font-bold text-white">2</span>
|
||||
</div>
|
||||
<p class="font-headline font-semibold text-white text-sm">P</p>
|
||||
<p class="text-off-white/60 text-xs mt-1">Sag WAS sie tun soll</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 rounded-full bg-rust flex items-center justify-center mx-auto mb-3">
|
||||
<span class="font-headline font-bold text-white">3</span>
|
||||
</div>
|
||||
<p class="font-headline font-semibold text-white text-sm">K</p>
|
||||
<p class="text-off-white/60 text-xs mt-1">Sag WAS die Leitplanken sind</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 rounded-full bg-rust flex items-center justify-center mx-auto mb-3">
|
||||
<span class="font-headline font-bold text-white">4</span>
|
||||
</div>
|
||||
<p class="font-headline font-semibold text-white text-sm">A</p>
|
||||
<p class="text-off-white/60 text-xs mt-1">Sag WIE das Ergebnis aussehen soll</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 rounded-full bg-rust flex items-center justify-center mx-auto mb-3">
|
||||
<span class="font-headline font-bold text-white">5</span>
|
||||
</div>
|
||||
<p class="font-headline font-semibold text-white text-sm">O</p>
|
||||
<p class="text-off-white/60 text-xs mt-1">Lass die KI RÜCKFRAGEN stellen</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<p class="text-off-white/80 text-lg">
|
||||
<strong class="text-white">Merke:</strong> Ein Prompt ist wie eine Bestellung im Restaurant. Je genauer du beschreibst, desto näher kommt das Ergebnis an das, was du dir vorstellst.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 px-6 border-t border-layer">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<p class="font-headline font-bold text-white mb-2">
|
||||
<span class="text-rust">S-P-K-A-O</span> Framework
|
||||
</p>
|
||||
<p class="text-off-white/50 text-sm">Richtig Prompten mit KI – Eine Anleitung</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scroll to Top Button -->
|
||||
<button id="scroll-top" class="fixed bottom-6 right-6 w-12 h-12 bg-rust hover:bg-rust/90 text-white rounded-full shadow-lg flex items-center justify-center opacity-0 pointer-events-none transition-all duration-300 z-50">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
const scrollBtn = document.getElementById('scroll-top');
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 500) {
|
||||
scrollBtn.classList.remove('opacity-0', 'pointer-events-none');
|
||||
scrollBtn.classList.add('opacity-100');
|
||||
} else {
|
||||
scrollBtn.classList.add('opacity-0', 'pointer-events-none');
|
||||
scrollBtn.classList.remove('opacity-100');
|
||||
}
|
||||
});
|
||||
scrollBtn.addEventListener('click', () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user