Das erste Vibe Coding
Es gibt viele Vibe-Coding-Plattformtools. Einige konzentrieren sich auf No-Code-Drag-and-Drop, andere betonen Engineering-Anpassung, und viele sind der Geschäftsprozess-Orchestrierung und kollaborativen Multi-Agenten-Entwicklung gewidmet.
Verschiedene Tool-Plattformen haben unterschiedliche Anwendungsfälle. Dieses Kapitel stellt vier Tools vor: zwei Online-Tools und zwei lokale Tools:
| Tool-Name | Tool-Typ | Kernfunktionen und anwendbare Szenarien |
|---|---|---|
| Miaoda | No-Code / natürliche Sprache | Text direkt eingeben, um Anwendungen zu generieren; reine diktatbasierte Generierung, geeignet für schnelles Onboarding und zum Ausprobieren von Vibe Coding |
| MoneyCode | KI führt Coding-Aufgaben online aus | Online-Anwendung: Text direkt eingeben, Aufgaben in der Plattform erstellen, die KI programmieren lassen und Terminal, Dateiverwaltung und Vorschau in der Cloud-Entwicklungsumgebung nutzen |
| Claude Code | Terminal-Befehlszeile | CLI-Interaktion mit extrem starker logischer Schlussfolgerungsfähigkeit; eine Waffe für Geeks beim dateiübergreifenden Refactoring |
| Copilot | Klassisches IDE-Plugin | Intelligente Code-Vervollständigung (Tab-Taste), geeignet für halbautomatische Code-Feinabstimmung |
| Trae | KI-nativer Editor | Von ByteDance entwickelt, KI-Editor |
| Qoder | KI-nativer Editor | KI-Programmier-IDE von Alibaba |
0 Anwendungscode generieren
Als Nächstes beginnt Miaoda mit der Generierung eines Anforderungsdokuments, das recht detailliert ist. Dann können wir rechts auf die Schaltfläche „Dokument bearbeiten“ oder „Anwendung generieren“ klicken, und es beginnt direkt mit der Generierung der Anwendung basierend auf unseren Anforderungen:
Als Nächstes beginnt es mit der Generierung von Code. Während des gesamten Prozesses müssen Sie keine einzige Zeile Code schreiben – es generiert direkt:
Werfen Sie einen Blick auf die Oberfläche und den Nutzungseffekt – es ist sehr einfach zu bedienen:
Wenn Sie immer noch nicht wissen, was Sie sich ansehen sollen, können Sie auch zum Anwendungsplaza gehen, um hervorragende Produkte zu sehen, die von anderen erstellt wurden:
MonkeyCode für Vibe Coding verwenden
MonkeyCode ist nicht nur ein KI-Programmierwerkzeug für Vibe Coding; es deckt den gesamten Prozess von Anforderungen → Design → Entwicklung → Überprüfung ab. Es ist kostenlos nutzbar, erfordert keine Installation und verfügt über eine integrierte Cloud-Entwicklungsumgebung.
Registrierung und Anmeldung
Nach dem Aufrufen der Seite klicken Sie in der oberen rechten Ecke aufRegistrieren, um ein neues Konto zu erstellen. Wenn Sie bereits ein Konto haben, können Sie sich anmelden und es direkt nutzen.
Nach erfolgreicher Registrierung gelangen wir in die Konsole und geben unsere Anforderungen ein:
帮我写一个 JavaScript 小游戏：程序随机生成 1 到 100 的数字，让我猜，猜大了提示「太大了」，猜小了提示「太小了」，猜中了就结束。
Um die Ausführung zu starten, können wir ein Modell auswählen:
Nach Abschluss der Aufgabe können Sie die generierte Vorschau-URL anzeigen:
Ergebnis anzeigen:
Vibe Coding in VS Code
Mit seinen umfangreichen KI-Plugins ist VS Code zum gängigsten Editor für die Umsetzung von Vibe Coding geworden. Sie können Copilot für eine leichtgewichtige Entwicklung verwenden oder ein spezielles VIBE-Agent-Plugin für die vollautomatische Multi-Datei-Entwicklung installieren.
VS Code-Tutorial:https://www.example.com/vscode/vscode-tutorial.html
Die neue Version von VS Code (1.116+ neueste stabile Version) enthält Copilot nativ, sodass Sie keine Plugins manuell installieren müssen.
Öffnen Sie den Editor, und Sie sehen den Copilot-Eintrag. Sie müssen sich nur mit Ihrem GitHub-Konto anmelden; es ist nicht nötig, Plugins aus dem Erweiterungsmarktplatz zu installieren.
Ältere Versionen von VS Code (1.115 und früher) erfordern die manuelle Installation von zwei Erweiterungen:
- GitHub Copilot: Inline-Code-Autovervollständigung
- GitHub Copilot Chat: Konversationeller KI-Programmierassistent
Als Nächstes erstellen wir einen Verzeichnisordner:
mkdir example-vibe-coding
In das Verzeichnis wechseln:
cd example-vibe-coding
Mit VS Code öffnen:
code .
Fügen Sie im Editor eine Datei hinzuvibe-coding-example.html ：
Im linken Dateimenü wählen wir die erstellte Datei aus, klicken auf die Panel-Umschalttaste in der oberen rechten Ecke, um das KI-Tool einzublenden, und geben dann den Prompt im Dialogfeld ein:
帮我写一个 JavaScript 小游戏：程序随机生成 1 到 100 的数字，让我猜，猜大了提示「太大了」，猜小了提示「太小了」，猜中了就结束。
Die KI beginnt mit der Arbeit. Werfen Sie einen Blick auf das Endergebnis:
Während des gesamten Prozesses müssen wir nicht am Programmieren teilnehmen. Der HTML-Code, der CSS-Stilcode und der JavaScript-Code werden alle automatisch für uns generiert.
CLI-Programmierwerkzeuge
Im Folgenden demonstrieren wir am Beispiel vonClaude Code (Terminal CLI)einen typischen Vibe-Coding-Workflow.
Siehe das vollständige Tutorial zu Claude Code:https://www.example.com/claude-code/claude-code-tutorial.html
Erstes Projekt: Hallo, Vibe World!
Ziel:Lassen Sie Claude Code in 5 Minuten mit reiner natürlicher Sprache eine persönliche Visitenkarten-Webseite für Sie erstellen.
Schritt 1: Projektordner erstellen
mkdir my-card && cd my-card claude
Schritt 2: Beschreiben Sie Claude, was Sie möchten
Geben Sie in der interaktiven Oberfläche von Claude Code ein:
帮我创建一个个人名片网页，要求： - 显示我的名字（张三）和职业（前端开发者） - 有一个简短的个人简介区域 - 列出3个技能标签（React、Python、设计） - 设计风格：简洁现代，深色背景，有轻微的渐变效果 - 单个 HTML 文件，不需要外部依赖
Schritt 3: Claude bei der Arbeit beobachten
Sie werden sehen, wie Claude Code automatisch:
分析你的需求 创建 index.html 文件 写入完整的 HTML、CSS 和少量 JavaScript
Schritt 4: Ergebnis ansehen
open index.html # macOS # oder xdg-open index.html # Linux
Schritt 5: Iterieren und ändern
Wenn Sie nicht zufrieden sind, setzen Sie das Gespräch fort:
把背景色改成深蓝色渐变，字体换成更现代的 sans-serif， 技能标签加上悬停动画效果
Claude Code wird die Dateien direkt ändern, ohne dass Sie Code anfassen müssen.
Andere Erweiterungen