Vibe-Coding-Mindset

Der Denkunterschied zwischen traditioneller Programmierung und Vibe Coding

Der Denkweg der traditionellen Programmierung ist:

I have a requirement → What syntax do I need? → How do I write the code? → Write it out → Debug

Der Denkweg von Vibe Coding ist:

我有需求 → 我该怎么描述这个需求？→ AI 生成代码 → 我验证结果 → 继续调整描述

Der Kernunterschied ist: Traditionelle Programmierung bedeutetCode schreiben, während Vibe Codingdas Beschreiben von Anforderungen bedeutet。

Erleben Sie den Unterschied anhand eines Beispiels

Angenommen, Sie möchten einBenutzerregistrierungsformularerstellen, um Benutzername und Passwort zu validieren.

Traditionelle Programmierdenkweise:

用什么框架？React 还是 Vue？
表单验证库用哪个？Formik 还是 React Hook Form？
正则表达式怎么写？
状态管理怎么设计？

Denkweise beim Vibe Coding:

What does the user need to do on this form?
What input fields are there? What are the validation rules?
What should be displayed when validation fails?
Where should it redirect to after successful validation?

Beim Ersteren dreht sich das Denken darum, wie man etwas implementiert, während sich das Denken beim Letzteren darum dreht, was der Nutzer braucht.

Vibe Coding hebt dein Denken von der technischen Implementierung auf das Produktdesign. Du musst nicht wissen, wie man reguläre Ausdrücke schreibt, aber du musst wissen:Benutzernamen müssen mindestens 3 Zeichen lang sein– diese Regel.

Drei zentrale Denkweisen beim Vibe Coding

Denkweise 1: Du bist der Regisseur, nicht der Schauspieler

Ein Regisseur muss nicht jede Rolle selbst spielen; was ein Regisseur braucht, ist:

Wissen, was die Szene ausdrücken soll (klare Anforderungen).
Beurteilen können, ob die Schauspieler gut spielen (Ergebnisprüfung).
Konkrete Anpassungsanweisungen geben können (präzises Feedback).

Beim Vibe Coding ist die KI dein Schauspielteam, und du bist der Regisseur.

Falscher Ansatz: Die KI machen lassen, was sie will, keine Grenzen setzen, keine Ergebnisse prüfen und am Ende etwas bekommen, das "gut aussieht, aber nicht verwendet werden kann."
Richtiger Ansatz: Gib der KI klare Szenarien, Rollen und Standards; überprüfe jede Ausgabe; und gib konkretes Feedback zu allem, was nicht zufriedenstellend ist.

Denkweise 2: Iteration ist besser, als alles auf Anhieb richtig zu machen

Traditionelle Entwicklung strebt danach, es in einem Durchgang richtig zu schreiben; Vibe Coding strebt schnelle Iteration an, bis es richtig ist.

Ein typischer Iterationsprozess beim Vibe Coding:

第 1 轮：先让 AI 做一个能跑的版本，即使很简陋
第 2 轮：添加核心功能，让它能用
第 3 轮：修复明显的 bug 和体验问题
第 4 轮：优化细节和边缘情况
第 5 轮：添加测试和文档

In jeder Runde überprüfst du, gibst Feedback und passt an; in jeder Runde verbessert sich die KI basierend auf der vorherigen Runde.

Grundprinzip:Erst zum Laufen bringen, dann gut machen und schließlich verfeinern.

Denkweise 3: Beschreibungsfähigkeit > Programmierfähigkeit

Beim Vibe Coding ist deine wichtigste Fähigkeit nicht das Schreiben von Code, sondern das klare Beschreiben, was du willst.

Eine gute Anforderungsbeschreibung enthält fünf Elemente:

Element	Beschreibung	Beispiel
Ziel	Was zu tun ist	Erstelle ein Benutzer-Login-Formular
Einschränkungen	Welche Einschränkungen bestehen	Verwende React + TypeScript, binde keine UI-Bibliotheken von Drittanbietern ein
Eingabe	Welche Daten es empfängt	Benutzername (3-20 Zeichen) und Passwort (6 oder mehr Zeichen)
Ausgabe	Welches Ergebnis es erzeugt	Wenn die Validierung erfolgreich ist, die API aufrufen; wenn sie fehlschlägt, eine Fehlermeldung anzeigen
Akzeptanzkriterien	Was als bestanden gilt	Beim Klicken auf Senden mit leerem Benutzernamen wird "Bitte geben Sie einen Benutzernamen ein" angezeigt

Übung: Den Unterschied zwischen den beiden Denkweisen erleben

Unten folgt eine praktische Übung. Beschreibe dieselbe Aufgabe auf zwei verschiedene Arten und beobachte, wie sich die Ausgabe der KI unterscheidet.

Methode 1: Vage Beschreibung (häufig bei Anfängern)

Help me make a counter

Die KI gibt dir vielleicht einen einfachen Zähler, aber möglicherweise:

Hat kein Styling; es ist nur eine einfache Zahl und Schaltflächen.
Verwende ein Framework, das du nicht kennst.
Negative Zahlen nicht behandeln.
Keine Reset-Funktion haben.

Methode 2: Strukturierte Beschreibung (Vibe-Coding-Ansatz)

帮我做一个计数器组件，要求：
- 目标：一个带加减按钮的数字计数器
- 约束：使用 HTML + CSS + 原生 JavaScript，单文件
- 输入：初始值 0，最小值 0（不能减到负数），最大值 99
- 输出：显示当前数字，两个按钮（+ 和 -），一个重置按钮
- 验收标准：
  - 点 + 数字加 1，到 99 后按钮变灰不可点击
  - 点 - 数字减 1，到 0 后按钮变灰不可点击
  - 点重置回到 0
  - 数字变化时有短暂的放大动画
  - 深色背景，白色卡片，圆角设计

Sende beide Beschreibungen getrennt an die KI und vergleiche die Unterschiede in der Ausgabe.

Du wirst feststellen, dass der Code aus einer strukturierten Beschreibung von weit höherer Qualität und Nutzbarkeit ist als der aus einer vagen Beschreibung.

KI kann keine Gedanken lesen. Je spezifischer deine Beschreibung, desto genauer entspricht die Ausgabe deinen Erwartungen. Das ist keine Einschränkung der KI, sondern die Grenze deiner Fähigkeiten.

Wann man Vibe Coding verwenden sollte und wann nicht

Vibe Coding ist kein Allheilmittel. Der folgende Szenarienvergleich kann dir bei der Entscheidung helfen:

Für Vibe Coding geeignet	Nicht für Vibe Coding geeignet
Prototypenvalidierung, schnelle Erstellung eines MVP	Kernsysteme mit extremen Anforderungen an Leistung und Sicherheit
CRUD-Geschäftslogik	Low-Level-Module, die präzise Kontrolle über Speicher und Algorithmen erfordern
UI-Komponenten und Seitenlayouts	Änderungen, die ein tiefes Verständnis bestehender komplexer Codebasen erfordern
Datentransformation und -formatierung	Finanz- und Medizincode, der Compliance- und regulatorische Vorschriften betrifft
Generierung von Testfällen	Originäre Algorithmen, die Patentschutz erfordern
Generierung von Dokumentation und Kommentaren	Verschlüsselungsmodule, die Sicherheitsaudits erfordern

Wie man Bugs einer KI beschreibt

Wenn es ein Problem mit deinem Code gibt, erfordert die Beschreibung des Bugs gegenüber der KI ebenfalls strukturiertes Denken.

Sag nicht "dieser Code hat ein Problem"; sondern:

我在运行以下代码时遇到了问题：
[粘贴代码]

预期行为：点击按钮后数字应该加 1
实际行为：点击按钮后数字没有变化，控制台报错：
  Uncaught TypeError: count is not defined

我的环境：Chrome 浏览器，直接在 HTML 文件中运行

Diese Beschreibung enthält:

Code: Die KI kann den vollständigen Kontext sehen.
Erwartet vs. tatsächlich: Die KI weiß, was das Ziel ist und wo die Lücke liegt.
Fehlermeldung: Dies ist der wertvollste Hinweis; die KI kann das Problem direkt lokalisieren.
Umgebung: Hilft der KI, gezielte Lösungen bereitzustellen.

Andere Erweiterungen

Vibe Coding Werkzeuge