Bessere Verwendung von AIs in VS Code mit Prompt-Dateien

Warum Prompt-Dateien wichtig sind

Bei 0:00 sagt Tim: "Die Verwendung einer Prompt-Datei mit einer KI kann die Erfahrung von nur okay zu großartig machen." Eine Prompt-Datei teilt dem KI-Modell mit, was es denken soll, wie es vorgehen soll und wie es auf eine Benutzeranfrage reagieren soll. Tim verlinkt dies mit Burke Hollands "Beast Mode"-Datei von Microsoft, einer großen Eingabeaufforderung, die wie eine Vorlage wirkt. Auf diese Weise können Entwickler sich wiederholende Anweisungen einsparen, Fehler reduzieren und einen besser vorhersehbaren Code in VS Code generieren.

Tim sieht das Ganze als eine Art Prompt-Engineering: Sie erstellen einen wiederverwendbaren Satz von Anweisungen, so dass die KI Ihren Programmierstil und Ihre bevorzugte Projektstruktur bereits kennt, wenn Sie später eine kurze Eingabeaufforderung in die Chat-Ansicht oder das AI-Toolkit-Symbol in der Aktivitätsleiste eingeben.

Tim's Ressourcen für Entwickler

Bevor er das Tool vorstellt, rekapituliert Tim (0:27) die kostenlosen und kostenpflichtigen Ressourcen, die er anbietet - neun vollständige Kurse, ein Zehntel auf iamtimcorey.com sowie einen Podcast, der Fragen von Entwicklern beantwortet. Er betont, dass diese Tools Entwicklern dabei helfen sollen, ihre Fähigkeiten zu verfeinern und bessere Arbeitsabläufe zu entwickeln. Damit ist klar, warum eine VS Code AI-Prompt-Datei wichtig ist: Sie ist Teil der modernen Praktiken zur Verbesserung der alltäglichen Codierungsaufgaben.

Einrichten des Beast-Modus in VS Code

Bei 1:22 geht Tim auf den Abschnitt über die Tools von VS Code ein. Er hat den Beast Mode bereits installiert und unter "Konfigurationsmodi" ausgewählt Er erklärt, dass Sie die AI Toolkit-Ansicht öffnen, Modelle aus dem Modellkatalog durchsuchen und einen neuen benutzerdefinierten Modus erstellen können. In seinem Beispiel könnten Sie auf "Eingabeaufforderung hinzufügen" klicken, ihr einen Namen wie "GitHub Chat Modes" geben und den Inhalt der Datei einfügen (1:34). Dies speichert Ihre benutzerdefinierte System-Eingabeaufforderung, so dass sie immer in Ihrem Arbeitsbereich verfügbar ist.

Tims Setup zeigt, wie lokale Modelle oder Cloud-Modelle mit Ihren eigenen Prompt-Builder-Anweisungen kombiniert werden können. Alles wird ordentlich in Ihrem VS Code-Stammordner oder einem anderen gespeicherten Ordner abgelegt, so dass Sie es später leicht wiederholen können.

Anwendung von KI in einem realen Projekt

Ab 2:03 demonstriert Tim die KI an seinem aktuellen Website-Projekt, das in seinem VS Code-Arbeitsbereich gehostet wird. Er öffnet den Code für den Bereich "Learning Paths" - im Wesentlichen eine Python/React-gestützte Website - und zeigt das Navigationsmenü der App. Er möchte das Pfeilsymbol optimieren, um eine kleine Animation beim Schweben hinzuzufügen (3:21).

Dies ist ein typisches Entwicklerszenario: Sie haben etwas Front-End-Code, Sie möchten, dass ein KI-Agent das CSS für Sie generiert, und Sie möchten nicht jedes Detail von Hand schreiben. Wenn eine Prompt-Datei bereits geladen ist, kann Ihre Benutzerführung kurz sein, und die KI wird den Kontext ausfüllen.

Vorbereitung des AI Prompt

Bei 3:38 verwendet Tim das Windows Snipping Tool (Windows+Umschalt+S), um einen Screenshot zu erstellen, der den Pfeil zeigt (3:45). Dieser visuelle Kontext hilft der KI. Er tippt dann eine natürliche Eingabeaufforderung bei 4:43:

"Drehen Sie in meinem Navigationsmenü unter dem Abschnitt Lernpfad den Pfeil von 30° in die Horizontale, wenn Sie mit der Maus darüber fahren, und dann wieder zurück auf Maus aus. Hier ist ein Screenshot, wie es derzeit aussieht."

Tim merkt an, dass er später genau angeben könnte, wo das CSS platziert werden soll, aber er beginnt mit der folgenden Aufforderung, um die Funktionalität des Beast Mode zu testen.

Der Plan von Beast Mode

Um 6:00 Uhr erklärt Tim, dass Beast Mode einen Arbeitsablauf skizziert: den richtigen Selektor identifizieren, eine CSS-Klasse hinzufügen, einen Hover-Effekt hinzufügen, dann testen und überprüfen. Sie platziert sogar das CSS in der richtigen site.css-Datei über dem Stammverzeichnis (6:42). Dies zeigt, wie ein vordefiniertes Schema in Ihrer Prompt-Datei - Ihre "Regeln" darüber, wo Stile hingehören - die Antwort der KI steuert.

Tim nennt dies die "große Sache" bei der Verwendung einer Prompt-Datei: Sie fügt den Kontext hinzu und lässt die KI so arbeiten, als ob sie Ihre Projektstruktur kennt, ohne dass Sie jedes Mal die vollständige Beschreibung wiederholen müssen.

Iterieren und Verfeinern

Als Tim die Website um 6:54 Uhr überprüft, wirkt sich der generierte Code nur auf einen Pfeil aus und zwar in die falsche Richtung. Anschließend verfeinert er die Eingabeaufforderung bei 7:29, um den Hover-Effekt umzukehren und ihn auf alle Pfeile anzuwenden.

Bei 8:49 bemerkt er, dass sich jetzt alle Pfeile auf einmal drehen. Also sendet er um 9:06 Uhr eine weitere Eingabeaufforderung, in der er der KI mitteilt, dass sie den Effekt nur auf das in der Schwebe gehaltene Element anwenden soll. Tim bemerkt bei 9:38: "Man muss eine KI optimieren. Sie macht nicht immer das Richtige."

Dies ist ein großartiges Beispiel für Prompt-Engineering in der Chat-Ansicht. Sie bearbeiten, wiederholen und speichern Ihre Eingabeaufforderungen, bis die KI die von Ihnen gewünschte strukturierte Ausgabe erzeugt. Da die Prompt-Datei bereits die System-Eingabeaufforderung liefert, ist jede neue Anweisung nur eine kleine Verfeinerung.

Endgültiges Ergebnis

Um 9:52 Uhr bestätigt Tim, dass die Animation jetzt per Pfeil funktioniert: Drehen beim Hovern, Zurücksetzen beim Loslassen der Maus. Er merkt an, dass Sie zum hellen oder dunklen Thema wechseln können, die Farben ändern, den Übergang verlangsamen - was immer Sie möchten (10:02). Der Schlüssel ist, dass die KI die SVG-Transformation herausfand und das CSS für ihn schrieb (10:11).

Tim erklärt bei 10:30-11:20, dass Sie den Beast Mode erweitern oder Ihre eigene Prompt-Builder-Datei erstellen können, um zu definieren, wie Sie Dateien anordnen, wie Sie die Formatierung von Code handhaben wollen oder wie Sie eine Python-Funktion aufrufen. Dann können Ihre täglichen Aufforderungen viel kürzer sein und trotzdem konsistente Antworten liefern.

Überprüfung der AI-Ausgabe

Um 11:50 Uhr warnt Tim davor, die Änderungen der KI immer zu überprüfen. Selbst mit einer geschützten Prompt-Datei und guten Praktiken ist es möglich, dass eine KI eine Klasse an der falschen Stelle hinzufügt oder Ihre erforderlichen Abhängigkeiten aufbricht. In seinem Beispiel hat die KI nur kleine, sinnvolle Änderungen vorgenommen - hier eine CSS-Klasse, dort eine Codezeile -, aber Entwickler sollten trotzdem das Änderungsprotokoll überprüfen und bei Bedarf nachbessern.

Abschließend weist Tim darauf hin, dass Sie ein Ergebnis, das Ihnen gefällt, speichern und wiederverwenden können. Das ist der Kern der Verwendung von KI-Modellen und Prompt-Dateien in VS Code: ein wiederholbarer, konsistenter Arbeitsablauf, der Ad-hoc-Prompting in eine zuverlässige SDK-ähnliche Erfahrung verwandelt.

Aus der Demo von Tim Corey mitgenommen

Tim Coreys Anleitung im Video zeigt, wie eine gut gestaltete Prompt-Datei in Visual Studio Code aussehen kann:

• Geben Sie den KI-Modellen einen konsistenten Kontext, damit Ihre Aufforderungen kürzer sein können.

• Automatischer Umgang mit generiertem Code, strukturierter Ausgabe und Formatierung.

• Integrieren Sie das Tool in Ihren Arbeitsbereich, Ihre Aktivitätsleiste und Ihr AI-Toolkit, damit Sie Prompts einfach öffnen, testen und verfeinern können.

• Ermöglichen Sie es Ihnen, Modelle zu durchsuchen, zwischen lokalen Modellen oder der Cloud zu wechseln und Ihre Prompt-Engineering-Regeln nahtlos anzuwenden.

Indem Sie Ihre Regeln in einer Prompt-Datei speichern, geben Sie der KI ein zuverlässiges Agenten-Skript an die Hand, dem sie folgen kann, sodass Sie sich auf übergeordnete Entwicklungsaufgaben konzentrieren können, anstatt dieselben Anweisungen zu wiederholen.