Prompt-Engineering

Der Prompt ist der einzige Kommunikationskanal zwischen dir und der KI. Bei derselben Anforderung können unterschiedliche Prompts zu einem 10x-Unterschied in der Ausgabequalität führen.

Die fünf Elemente eines guten Prompts:

Element	Kernfrage	Was passiert, wenn es fehlt
Ziel	Was ist zu tun?	Die KI errät deine Absicht und kann vom Kurs abweichen
Einschränkungen	Was sind die Einschränkungen?	Die KI verwendet einen Tech-Stack, den du nicht kennst, und der Code kann nicht integriert werden
Eingabe	Welche Daten erhält sie?	Die KI geht von einem Eingabeformat aus, und es schlägt zur Laufzeit fehl
Ausgabe	Welches Ergebnis erzeugt sie?	Die KI gibt Code, aber keine Nutzungsanleitung, sodass du nicht weißt, wie du ihn ausführen kannst
Akzeptanzkriterien	Was gilt als akzeptabel?	Die KI beendet die Arbeit, aber du weißt nicht, ob sie tatsächlich erledigt ist

Element 1: Ziel - Klar angeben, was zu tun ist

Schlechter Schreibstil

Help me write a form.

Problem: Welches Formular? Login? Registrierung? Suche? Wie viele Felder?

Guter Schreibstil

Help me write a user registration form, including the following fields: username, email, password, confirm password.

Besserer Schreibstil

帮我写一个用户注册表单，包含以下字段：
- 用户名（文本框，3-20 个字符）
- 邮箱（文本框，需验证格式）
- 密码（密码框，至少 6 位，包含数字和字母）
- 确认密码（密码框，需与密码一致）

Kerntechnik:Zerlege das „Was zu tun ist“ in konkrete Bestandteile. KI versteht konkrete Dinge weit besser als vage Konzepte.

Element 2: Einschränkungen - Die Grenzen definieren

Einschränkungen sagen der KI, was sie nicht tun darf und was sie verwenden muss. Ohne Einschränkungen improvisiert die KI frei, was zu Code führt, der nicht in dein Projekt integriert werden kann.

Häufige Arten von Einschränkungen

技术栈约束：
- 使用 React 18 + TypeScript
- 不引入第三方 UI 库（自己写 CSS）
- 使用 Vite 作为构建工具

代码风格约束：
- 使用函数组件和 Hooks，不用 Class 组件
- 每个文件不超过 150 行
- 所有 props 都要有 TypeScript 类型定义

输出约束：
- 所有代码放在一个文件里
- 给出完整的 import 语句
- 关键逻辑加上注释

Je mehr Einschränkungen du schreibst, desto kontrollierbarer ist die Ausgabe der KI. Aber schreibe nicht zu viele auf einmal – schreibe zuerst 3–5 Kern-Einschränkungen und ergänze dann weitere basierend auf den Ergebnissen.

Element 3: Eingabe – Definiere das Datenformat

Sag der KI, wie die Eingabedaten aussehen, und sie kann präziseren Code schreiben.

Schlechter Schreibstil

Write a function to handle user data.

Guter Schreibstil

写一个函数 formatUser(user)，接收一个用户对象：
{
  name: string,       // 用户名，例如 "张三"
  age: number,        // 年龄，例如 25
  email: string,      // 邮箱，例如 "[email protected]"
  createdAt: string   // 注册时间，ISO 格式，例如 "2026-06-28T10:00:00Z"
}
返回格式化的用户信息字符串。

Kerntechnik:Füge jedem Feld Beispielwerte hinzu. KI versteht Beispiele weit besser als abstrakte Typbeschreibungen.

Element 4: Ausgabe – Das Ergebnisformat festlegen

Sag der KI, welche Ausgabeform du erwartest – Code? Erklärung? Änderungsvorschläge?

Häufige Ausgabeformate

Ausgabeformat	Anwendungsszenario	Prompt-Beispiel
Vollständiger Code	Neue Funktionen, neue Dateien	Gib mir den vollständigen Code, einschließlich aller Importe
Codeänderung	Bestehenden Code ändern	Gib nur die geänderten Teile im Diff-Format aus
Erklärung	Code verstehen	Erkläre Zeile für Zeile, was dieser Code tut
Lösungsvorschläge	Architekturentscheidungen	Gib zwei Implementierungsoptionen an, vergleiche Vor- und Nachteile
Fehlerbehebung	Debugging	Analysiere die Ursache dieses Fehlers und gib Schritte zur Behebung an

Element 5: Akzeptanzkriterien – Fertigstellung definieren

Akzeptanzkriterien sind das am leichtesten übersehene Element, aber sie bestimmen, ob du beurteilen kannst, dass die Aufgabe abgeschlossen ist.

Beispiel für gute Akzeptanzkriterien

验收标准：
- 用户名少于 3 个字符时，显示红色提示"用户名至少 3 个字符"
- 密码少于 6 位时，显示红色提示"密码至少 6 位"
- 两次密码不一致时，显示红色提示"两次密码不一致"
- 所有字段为空时点击提交，每个字段下方显示对应的错误提示
- 所有字段正确填写后点击提交，控制台打印表单数据，不发送请求

Schlüsseltechnik:Akzeptanzkriterien sollten spezifisch für „was eingegeben wird, was zu sehen ist“ sein, verwende„Wenn ..., sollte ...“Satzmuster.

Prompt-Vorlage

Das Folgende ist die Prompt-Vorlage, die später in diesem Kurs verwendet wird; du kannst sie direkt verwenden:

## 目标
[一句话描述要做什么]

## 约束
- [技术栈限制]
- [代码风格要求]
- [输出格式要求]

## 输入
[输入数据的结构和示例]

## 输出
[期望的输出形式]

## 验收标准
- [具体可验证的标准 1]
- [具体可验证的标准 2]
- [具体可验证的标准 3]

Häufige Prompt-Fehler und Korrekturen

Fehler	Problem	Beheben
Hilf mir, einen Online-Shop zu erstellen	Zu vage, die KI weiß nicht, wo sie anfangen soll	Hilf mir, die Produktlistenseite des Shops zu erstellen, mit Produktbildern, Namen, Preisen, 3 Produkte pro Zeile
Implementiere es auf die bestmögliche Weise	Die KI weiß nicht, was "best" für dich bedeutet	Verwende React.memo und useCallback, um die Rendering-Performance zu optimieren
Es gibt ein Problem mit diesem Code, hilf mir, es zu beheben	Es wurde nicht gesagt, wo das Problem liegt	Nach dem Klicken auf die Löschen-Schaltfläche aktualisiert sich die Liste nicht, und die Konsole meldet einen Fehler "id is undefined"; hilf mir, das zu beheben
Füge ein Feature hinzu	Es wurde nicht gesagt, in welche Datei oder an welcher Stelle es hinzugefügt werden soll	Füge ein Dropdown-Menü für den Benutzeravatar auf der rechten Seite der Navigationsleiste in src/components/Header.tsx hinzu

Praktisch: Drei Prompts für dieselbe Anforderung im Vergleich

Anforderung: Erstelle eineheutige To-do-Liste.

Version A: Ein-Satz-Prompt

Help me make a todo list.

KI-Ausgabe: Es könnte eine einfache HTML-Seite sein, es könnte React verwenden, es könnte Vue verwenden, man weiß nicht, was man bekommt.

Version B: Prompt mit zusätzlichen Einschränkungen

帮我做一个待办列表，用 HTML + CSS + 原生 JavaScript，
可以添加和删除任务。

KI-Ausgabe: Eine brauchbare To-do-Liste, aber das Styling könnte grob sein, und sie verarbeitet möglicherweise keine leere Eingabe.

Version C: Vollständiger Fünf-Elemente-Prompt

## 目标
做一个"今日待办"列表组件。

## 约束
- 使用 HTML + CSS + 原生 JavaScript，单文件
- 不使用任何第三方库
- 移动端友好的响应式布局

## 输入
- 用户在输入框中输入待办事项文字
- 用户点击"添加"按钮或按 Enter 键

## 输出
- 一个完整的 HTML 文件，可以直接在浏览器打开
- 输入框在顶部，已添加的待办事项在下方列表显示
- 每个待办事项右侧有删除按钮
- 底部显示"共 X 项，已完成 Y 项"

## 验收标准
- 输入空内容点击添加时，显示提示"请输入待办事项"
- 添加成功后，输入框清空
- 点击待办事项文字，切换完成/未完成状态（加删除线）
- 点击删除按钮，该项消失
- 统计数据实时更新
- 刷新页面后数据保留（使用 localStorage）

KI-Ausgabe: Eine voll funktionsfähige To-do-Liste mit Datenpersistenz, Statistiken und Fehlerbehandlung.

Wenn man die Ausgaben der drei Versionen vergleicht, spürt man intuitiv: Die Qualitätsobergrenze des Prompts ist die Qualitätsobergrenze der KI-Ausgabe.

Praktische iterative Entwicklung

Der Kern-Workflow von Vibe Coding besteht nicht darin, den Prompt einmal zu geben und sofort perfekten Code zu erhalten, sondern eherPrompt geben → Überprüfen → Feedback → Erneut überprüfenZyklus.

Die fünf Phasen der iterativen Entwicklung

Praktisches Projekt: Erstelle ein "Programmierterminologie-Wörterbuch"

Dieses Projekt dient dem Aufbau eines durchsuchbaren Wörterbuchs für Programmierungsterminologie, einschließlich Begriffsnamen, Erklärungen und Kategorien.

Folge den fünf untenstehenden Iterationsrunden und praktiziere jede Runde tatsächlich.

Runde 1: Bring es zum Laufen

Prompt：

做一个编程术语词典网页，要求：
- 使用 HTML + CSS + 原生 JavaScript，单文件
- 显示一个术语列表，每条术语包含名称和简短解释
- 预置 10 个常见编程术语（HTML、CSS、JavaScript、API、变量、函数、循环、数组、对象、Git）
- 顶部有一个搜索框，输入关键词可以过滤术语
- 深色背景，卡片式布局

Speichere den von der KI generierten Code alsdict.html, und öffne ihn im Browser.

Verifikation: Lässt sich die Seite öffnen? Werden alle 10 Begriffe angezeigt? Filtert das Suchfeld?
Feedback: Wenn die Suche nicht funktioniert, beschreibe der KI das genaue Symptom.

Das Ziel von Runde 1 ist nicht Perfektion, sondern lauffähig zu sein. Eine Version, die läuft, aber nicht perfekt ist, ist 100-mal besser als eine Version, die in der Vorstellung perfekt ist, aber noch nicht geschrieben wurde.

Runde 2: Mach es benutzbar

Prompt：

在上一轮的代码基础上，做以下改进：
1. 每个术语卡片加上分类标签（如"前端"、"JavaScript"、"通用"等）
2. 搜索时同时匹配术语名称和分类标签
3. 搜索结果为空时，显示"没有找到相关术语"而不是空白
4. 添加一个"随机学习"按钮，点击后随机展示一个术语
5. 术语列表按字母顺序排列

Verifikation: Werden Kategoriebeschriftungen angezeigt? Kann die Suche Kategorien abgleichen? Gibt es einen Hinweis bei leeren Ergebnissen? Funktioniert die Zufallsschaltfläche?

Feedback: Prüfe Punkt für Punkt und teile der KI die Punkte mit, die nicht erfüllt sind.

Runde 3: Fehler beheben

In dieser Runde solltest du aktiv nach Fehlern suchen.

Teste die folgenden Szenarien:

Gib Sonderzeichen in das Suchfeld ein (z. B.<、>、/）。

Gib Leerzeichen in das Suchfeld ein (führende und abschließende Leerzeichen).

Klicke schnell hintereinander auf die Zufallsschaltfläche.

Gib Großbuchstaben in das Suchfeld ein (die ursprünglichen Daten können klein geschrieben sein).

Lösche alle Begriffe (falls Löschen unterstützt wird).

Beschreibe jeden gefundenen Fehler der KI in strukturierter Form:

当我在搜索框中输入大写 "HTML" 时，没有匹配到任何结果。
预期：不区分大小写，输入 "html" 和 "HTML" 都能匹配到。
实际：只有输入小写 "html" 才能匹配。
请修复这个大小写敏感的问题。

Runde 4: Details verfeinern

Prompt：

在上一轮代码基础上，优化以下细节：
1. 搜索时添加防抖（输入停止 300ms 后再搜索，避免频繁过滤）
2. 卡片 hover 时有一个微小的上浮动画
3. 搜索结果高亮匹配的关键词（用黄色背景标记）
4. 添加一个"已学 X 个"的计数器，点击术语卡片上的"已学"按钮 +1
5. 已学过的术语显示一个勾的标记
6. 用 localStorage 保存已学记录

Überprüfung: Ist die Animation flüssig? Ist die Hervorhebung korrekt? Sind die gelernten Datensätze nach dem Aktualisieren noch vorhanden?

Runde 5: Tests und Dokumentation hinzufügen

Prompt：

在上一轮代码基础上：
1. 在代码顶部用注释写出功能说明和用法
2. 为搜索过滤函数写注释，说明它的输入、输出和逻辑
3. 如果代码中有复杂的逻辑，拆分成更小的函数，每个函数只做一件事
4. 在文件中添加数据来源说明（术语数据来自哪里）

Wichtige Gewohnheiten während der Iteration

Ändere jeweils nur eine Sache

Wenn die KI viele Dinge auf einmal ändert, du aber nur eine Sache ändern möchtest, sei präzise:

Only fix the case issue in the search box, don't change any other code.

Führe die Verifizierung sofort nach jeder Iteration aus

Spare nicht mehrere Änderungen auf, um sie zusammen zu verifizieren – führe die Verifizierung nach jeder Runde von Änderungen aus, um sicherzustellen, dass keine neuen Probleme entstehen.

Behalte eine Version jeder Runde

Committe die Ergebnisse jeder Runde mit Git:

git add dict.html && git commit -m "第一轮：基本功能能跑"
git add dict.html && git commit -m "第二轮：添加分类和随机功能"
git add dict.html && git commit -m "第三轮：修复大小写和特殊字符 bug"
git add dict.html && git commit -m "第四轮：添加动画和已学记录"
git add dict.html && git commit -m "第五轮：添加注释和文档"

Auf diese Weise kannst du jederzeit zu jeder Version zurückkehren und auch die Änderungen in jeder Runde vergleichen.

Git ist das Sicherheitsnetz für Vibe Coding. Wenn du die KI bittest, größere Änderungen vorzunehmen, committe zuerst die aktuelle Version und mache ein Rollback, wenn etwas schiefgeht.

Weitere Erweiterungen

Vibe Coding Werkzeuge

Prompt-Engineering

Element 1: Ziel - Klar angeben, was zu tun ist

Schlechter Schreibstil

Guter Schreibstil

Besserer Schreibstil

Element 2: Einschränkungen - Die Grenzen definieren

Häufige Arten von Einschränkungen

Element 3: Eingabe – Definiere das Datenformat

Schlechter Schreibstil

Guter Schreibstil

Element 4: Ausgabe – Das Ergebnisformat festlegen

Häufige Ausgabeformate

Element 5: Akzeptanzkriterien – Fertigstellung definieren

Beispiel für gute Akzeptanzkriterien

Prompt-Vorlage

Häufige Prompt-Fehler und Korrekturen

Praktisch: Drei Prompts für dieselbe Anforderung im Vergleich

Version A: Ein-Satz-Prompt

Version B: Prompt mit zusätzlichen Einschränkungen

Version C: Vollständiger Fünf-Elemente-Prompt

Praktische iterative Entwicklung

Die fünf Phasen der iterativen Entwicklung

Praktisches Projekt: Erstelle ein "Programmierterminologie-Wörterbuch"

Runde 1: Bring es zum Laufen

Runde 2: Mach es benutzbar

Runde 3: Fehler beheben

Runde 4: Details verfeinern

Runde 5: Tests und Dokumentation hinzufügen

Wichtige Gewohnheiten während der Iteration

Ändere jeweils nur eine Sache

Führe die Verifizierung sofort nach jeder Iteration aus

Behalte eine Version jeder Runde