Projekte aus einer Beschreibung bauen
Von der Idee zur lauffähigen App mit einem Prompt
⏱ ca. ~8 Min
01 · Lesen
Bauen wir etwas Echtes. Bisher hast du einzelne Dateien gebaut und kleine Änderungen gemacht. Aber Claude Code kann viel mehr — du kannst ihm eine vollständige Projektbeschreibung geben und zusehen, wie es das Ganze baut.
Das Geheimnis für gute Ergebnisse ist, konkret genug zu sein. Je mehr Details du zu Funktionen, Verhalten und Design lieferst, desto näher kommt Claude beim ersten Versuch an das heran, was du willst.
Wir bauen einen Bookmark-Manager — eine einfache Web-App, mit der du Bookmarks speichern, ansehen und löschen kannst. Kein Server — alles läuft im Browser per localStorage.
02 · Prompt-Vorlage
Gib Claude eine detaillierte Projektbeschreibung. Schau, wie konkret dieser Prompt ist — jedes Feature aufgelistet, Verhalten beschrieben, Technik angegeben.
Bau mir eine einfache Bookmark-Manager-Web-App:
- Eine HTML-Seite mit einem Formular zum Hinzufügen von Bookmarks (URL und Titel)
- JavaScript, das Bookmarks im localStorage speichert
- Eine Liste, die alle gespeicherten Bookmarks anzeigt
- Jedes Bookmark hat einen Löschen-Button
- Sauberes, modernes CSS-Styling
- Komplett als Single-Page-App (kein Server nötig)
03 · Echte Übung
Öffne die von Claude gebaute HTML-Datei im Browser. Füg ein paar Bookmarks hinzu, lade die Seite neu, um zu prüfen, ob sie bleiben, und teste den Löschen-Button.
open index.html
04 · Checkliste
Teste den Bookmark-Manager gründlich. Hak jedes Feature ab, das du als funktionierend verifizieren kannst.
- Ich kann Bookmarks mit URL und Titel hinzufügen
- Bookmarks werden in der Liste angezeigt
- Der Löschen-Button entfernt Bookmarks
- Bookmarks bleiben nach dem Neuladen erhalten
05 · Quiz
Was macht einen Prompt für Claude Code wirksamer?
- Je weniger Worte, desto besser
- In Code statt in natürlicher Sprache schreiben
- Alles auf einmal fragen
- Konkret bei Features, Tech-Stack und Struktur
06 · Ausfüllen
Wenn du Claude Code bittest, ein Projekt zu bauen, liefert eine _____ Beschreibung mit konkreten Features weit bessere Ergebnisse als vage Wünsche.
07 · Lesen
Du hast gerade aus einer Beschreibung in natürlicher Sprache eine vollständige, funktionierende Web-App gebaut. Stell dir vor, wie lange das per Hand dauern würde — HTML-Struktur aufsetzen, JavaScript für localStorage schreiben, Formular-Submit behandeln, Löschlogik bauen, alles mit CSS layouten.
Mit Claude Code dauert die erste Version Sekunden. Wenn etwas nicht stimmt, iterierst du: lass Claude reparieren, Features hinzufügen, Design ändern.
Das ist die Kraft KI-gestützter Entwicklung. Du bringst Ideen und Urteil, Claude bringt Geschwindigkeit.
Kernpunkte
- Detaillierte Prompts liefern bessere Ergebnisse — liste jedes gewünschte Feature auf
- Teste das Ergebnis immer selbst, bevor du weitermachst
- Wenn etwas nicht stimmt, beschreib das Problem und lass Claude es beheben
- Claude baut in Sekunden, was per Hand viel länger dauern würde
08 · Quiz
Du willst Claude Code bitten, eine Todo-App zu bauen. Welcher Prompt liefert beim ersten Versuch das beste Ergebnis?
- Bau eine Todo-Web-App mit einem Eingabefeld zum Hinzufügen von Aufgaben, einer Liste, die alle Aufgaben zeigt, einer Checkbox zum Abhaken, einem Löschen-Button pro Aufgabe und localStorage, damit alles nach dem Neuladen erhalten bleibt
- Bau eine Todo-App
- Mach etwas Nützliches mit JavaScript
- Bau eine Todo-App mit allen Features
09 · Ausfüllen
Nachdem Claude ein Projekt gebaut hat, solltest du das Ergebnis immer selbst _____, bevor du weitermachst.
Andere Lektionen aus diesem Kapitel
⚠ Das volle interaktive Erlebnis braucht JavaScript. Bitte aktiviere es und lade die Seite neu.
※ Diese Seite ist ein unabhängiges Bildungsprojekt — kein offizielles Anthropic-Produkt. Claude™ ist eine eingetragene Marke von Anthropic, PBC.