Bolt.new Test: Wie es mir Stunden bei der Dev-Setup gespart hat

Die Einrichtung von Entwicklungsumgebungen bleibt für viele Entwickler eine erhebliche Frustration. Sie können leicht unzählige Stunden mit dem Umgang mit Abhängigkeiten, der Korrektur von Versionsunterschieden und dem Versuch, Server zum Laufen zu bringen, verlieren, bevor Sie eine einzige Zeile Code schreiben.

Dort kommt Bolt.new ins Spiel. Anstatt Zeit mit der Einrichtung zu verschwenden, tippte ich einfach einen Textprompt ein und sah zu, wie er eine ganze App (Pakete installiert, Server läuft, Vorschau live) direkt in meinem Browser erstellte.

In diesem Bolt.new-Review werde ich die Vor- und Nachteile, was es ist, für wen es am besten geeignet ist und seine wichtigsten Funktionen besprechen. Dann werde ich Ihnen zeigen, wie ich es verwendet habe, um eine Landingpage für eine umweltfreundliche Wasserflaschenmarke zu erstellen.

Ich werde den Artikel mit einem Vergleich von Bolt mit meinen drei besten Alternativen (Replit, Windsurf und Cursor) beenden. Am Ende werden Sie wissen, ob Bolt das richtige Tool für Ihren Workflow ist!

Urteil

Bolt.new ermöglicht es Ihnen, einfache Textprompts in vollständige Apps in Minuten umzuwandeln, mit Bearbeitung, Vorschau, GitHub-Integration und einem Klick-Deployment im Browser. Es ist leistungsstark und kollaborativ, aber größere Projekte können teuer und langsamer werden.

Was ist Bolt.new?

Bolt.new ist eine AI-Webentwicklungsplattform, auf der Sie vollständige Anwendungen mit Prompts generieren, bearbeiten und bereitstellen können. Sie benötigen keine lokale Einrichtung oder Installation.

Die Plattform wurde von dem Team bei StackBlitz entwickelt. Sie haben ihre bestehende browserbasierte Entwicklungsumgebung mit AI ausgestattet. Als Ergebnis zielt Bolt.new darauf ab, die Art und Weise, wie Entwickler Anwendungen erstellen, neu zu definieren, indem der Prozess schnell und mühelos gemacht wird.

Als ich Bolt zum ersten Mal verwendete, erkannte ich, dass die AI nicht nur Code generierte. Sie installierte Pakete, startete Server, debuggte Fehler und bereitstellte das Endprodukt.

Bolt.new vs. traditionelle Entwicklungsplattformen

Die meisten traditionellen Entwicklungsplattformen zwingen Sie, die ganze Arbeit zu leisten. Sie richten Ihre Umgebung ein, installieren Abhängigkeiten, konfigurieren Build-Tools und richten Bereitstellungspipelines ein. Es ist erschöpfend.

Bolt.new integriert AI-Modelle, die von StackBlitz’ WebContainers angetrieben werden. Der Teil der WebContainers ist entscheidend. Er bedeutet, dass Sie eine vollständige Node.js-Umgebung im Browser erhalten.

Aber was Bolt.new wirklich von anderen abhebt, ist, dass es AI-Modellen die vollständige Kontrolle über die gesamte Umgebung gibt. Dazu gehören Dateisystem, Node-Server, Paket-Manager, Terminal und Browser-Konsole.

Während andere AI-Coding-Tools wie Claude oder ChatGPT Code schreiben können, können sie ihn nicht ausführen, debuggen oder bereitstellen. Bolt kann all das tun.

Die Tech-Stack, die tatsächlich funktioniert

Bolt.new funktioniert mit den gängigsten JavaScript-Frameworks und -Bibliotheken. Alles, was auf StackBlitz läuft, läuft auch auf Bolt.new.

Sie können Projekte mit React, Vue, Next.js, Svelte und JavaScript erstellen. Es unterstützt CSS-Frameworks wie Tailwind, Bootstrap und styled-components mühelos.

Wenn Sie ein Backend benötigen, kann es Express-Server starten, mit Datenbanken über Supabase arbeiten und Zahlungsverarbeitung über Stripe integrieren.

Die Plattform verwendet Anthropics Claude 3.7 Sonnet LLM für die Programmierleistung. Das bedeutet, dass der generierte Code meistens solide ist.

Netzwerk mit Ihrer bestehenden Arbeitsweise

Bolt ist nicht isoliert. Es integriert sich mit den folgenden Plattformen:

• Figma für Design
• Supabase für Datenbanken, Authentifizierung und Dateispeicherung
• GitHub für Versionskontrolle, Backups und Zusammenarbeit
• Expo für mobile Anwendungsentwicklung
• Stripe für Zahlungsabwicklung

Die GitHub-Integration ist ein Game-Changer. Sie können ein Projekt in Bolt starten, es zu einem guten Zustand bringen und dann zu GitHub pushen und die Entwicklung lokal für mehr Kontrolle fortsetzen. Oder Sie können das gesamte Projekt in Bolt halten und GitHub für Backups und Zusammenarbeit verwenden.

Dann gibt es Bolt-Hosting. Es ermöglicht es Ihnen, Ihr Projekt in Sekunden an eine Live-URL zu veröffentlichen, mit einer kostenlosen .bolt.host-Domäne. Wenn Sie jedoch Ihre eigene Domäne verwenden oder Ihr Projekt woanders bereitstellen möchten, können Sie es leicht exportieren.

Wer ist Bolt.new am besten geeignet?

Hier sind die Arten von Menschen, die am meisten von Bolt.new profitieren:

• Entwickler können Bolt.new verwenden, um Apps mit AI-Code-Generierung, Debugging und einem Klick-Deployment zu erstellen, während sie den Code noch anpassen können.
• Produktmanager und Designer können Bolt.new verwenden, um Prototypen und Apps ohne tiefere Codierkenntnisse zu erstellen.
• Unternehmer und Marketing-Experten können Bolt.new verwenden, um Ideen schnell zu testen und MVPs mit wenig technischem Aufwand zu erstellen.
• Teams und Unternehmen können Bolt.new verwenden, um zusammenzuarbeiten, sich mit GitHub zu integrieren und die Entwicklung ohne Einrichtung zu rationalisieren.
• Jeder, der Prototypen erstellt, kann Bolt.new verwenden, um Konzepte zu testen und auf App-Ideen in Minuten statt in Wochen zu iterieren.

Bolt.new-Schlüsselfunktionen

Hier sind die Bolt.new-Funktionen, auf die Sie achten sollten:

• Vollständige Entwicklung im Browser: Erstellen Sie Frontend- und Backend-Code direkt im Browser ohne Einrichtung.
• AI-Code-Generierung: Geben Sie an, was Sie wollen, und Bolt erstellt den Code, die Struktur und die Benutzeroberfläche für schnelles Prototyping.
• Framework-Unterstützung: Funktioniert mit beliebten Frameworks wie React, Vue, Angular, Nuxt.js, Svelte und Astro.
• Pakete und Backend: Installieren Sie npm-Pakete, richten Sie Backend-Logik ein und verbinden Sie Datenbanken wie Supabase.
• Code-Bearbeitung: Bearbeiten Sie Ihr Projekt manuell mit einem integrierten Editor, Terminal und Datei-Explorer.
• Ein-Klick-Deployment: Veröffentlichen Sie sofort mit Hosting-Anbietern wie Netlify.
• Live-Vorschau und Zusammenarbeit: Sehen Sie Updates in Echtzeit und arbeiten Sie leicht zusammen.
• Fehlerbehandlung: Erkennen Sie Fehler im Code und schlagen Sie Lösungen vor.
• Flexibles Preismodell: Kostenlos für Einzelpersonen, mit bezahlten Plänen für Teams und Unternehmen.

So verwenden Sie Bolt.new

Hier ist, wie ich Bolt.new verwendet habe, um eine Landingpage für eine umweltfreundliche Wasserflaschenmarke zu erstellen:

1. Erstellen Sie ein Konto
2. Fügen Sie einen Prompt hinzu
3. Erweitern Sie den Prompt mit AI
4. Importieren Sie Dateien aus Figma und GitHub
5. Erstellen Sie eine Website
6. Sehen Sie den Code an
7. Vorschau Ihres Projekts
8. Zugriff auf die Prompt-Bibliothek
9. Bearbeiten Sie mit AI
10. Sehen Sie die Projekt-Einstellungen an
11. Verbinden Sie Integrationen
12. Veröffentlichen

Schritt 1: Erstellen Sie ein Konto

Ich begann, indem ich zu bolt.new ging und auf “Loslegen” oben rechts klickte. Nachdem ich ein Konto erstellt hatte, konnte ich damit beginnen, Apps und Websites zu erstellen, indem ich mit der AI sprach.

Schritt 2: Fügen Sie einen Prompt hinzu

Ich fügte den folgenden Prompt in das leere Feld ein:

“Erstellen Sie eine lebendige Landingpage für eine neue umweltfreundliche Wasserflaschenmarke mit vielen grünen Farben, Naturbildern und einem Vorbestell-Call-to-Action-Button.”

Schritt 3: Erweitern Sie den Prompt mit AI

Unter meinem Prompt waren zwei Optionen: Ich konnte Dateien hochladen oder den Prompt erweitern.

Das Hochladen von Dateien ermöglicht es Ihnen, sie Ihrem Projekt hinzuzufügen oder als Referenzmaterialien zu verwenden. Wenn Sie eine Datei hochladen, können Sie beschreiben, wie Bolt sie in Ihrem Prompt verwenden soll, oder Bolt das automatisch tun lassen.

Ich hatte keine Datei zum Hochladen, aber ich wollte den Prompt erweitern. Ich wählte diese Option, und Bolt erweiterte meinen Prompt sofort mit der folgenden Beschreibung:

“Sie sind ein Web-Designer, der eine lebendige, umweltfreundliche Landingpage für ‘AquaVerde’, eine neue nachhaltige Wasserflaschenmarke, die nächsten Monat startet, erstellen soll.

Markenübersicht:
AquaVerde produziert hochwertige wiederverwendbare Wasserflaschen aus 100% recycelten Materialien, die auf umweltbewusste Verbraucher im Alter von 25-45 abzielen, die Nachhaltigkeit und Qualität schätzen.

Design-Anforderungen:

Farbpalette:
– Primär: Verschiedene Schattierungen von Grün (#2E7D32, #4CAF50, #81C784)
– Sekundär: Erdtöne (Braun, Beige) und saubere Weiß
– Akzent: Ozeanblau (#1976D2) für Kontrast

Visuelle Elemente:
– Hero-Sektion mit hochwertigen Naturbildern (Wälder, Berge oder saubere Wasserquellen)
– Produktfotografie, die die Flaschen in natürlichen Außenbereichen zeigt
– Symbole, die Nachhaltigkeit darstellen (Recyclingsymbole, Blätter, Wassertropfen)
– Saubere, moderne Typografie, die Vertrauen vermittelt

Inhaltsstruktur:
1. Header mit Logo und Navigation
2. Hero-Sektion mit einem überzeugenden Titel über Nachhaltigkeit
3. Produktmerkmale, die umweltfreundliche Materialien hervorheben
4. Umweltauswirkungsstatistiken
5. Kundenbewertungen (falls verfügbar)
6. Vorbestellsektion mit Preisen

Call-to-Action:
Erstellen Sie einen prominenten “Vorbestellen – 25% sparen” -Button in der Hero-Sektion und wiederholen Sie ihn strategisch auf der gesamten Seite. Der Button sollte auffallen, während er die umweltfreundliche Ästhetik beibehält.

Technische Spezifikationen:
– Mobile-freundliches Design
– Schnelle Ladezeiten
– Barrierefrei
– Mit Hover-Effekten und glatten Scrollen

Stellen Sie eine detaillierte Beschreibung der Landingpage-Layouts bereit, einschließlich spezifischer Platzierung von Elementen, vorgeschlagenem Text für wichtige Abschnitte und wie das Design die umweltfreundliche Mission der Marke vermittelt.”

Diese Beschreibung war viel detaillierter als mein ursprünglicher Prompt.

Ich empfehle dringend, Ihren Prompt in Bolt zu erweitern, um die besten Ergebnisse zu erzielen. Seien Sie spezifisch bei Farben, Layout-Präferenzen, Funktionen und sogar dem Ton Ihres Platzhalter-Textes.

Verwenden Sie hierfür folgende Vorlage, um mit Ihren Bolt.new-Prompts zu beginnen:

“Erstellen Sie [Art der Anwendung] mit [Framework-Präferenz] und [spezifische Funktionen]. Stilisieren Sie es mit [Design-Präferenzen]. Fügen Sie [erforderliche Integrationen] hinzu. Machen Sie es [responsive/accessible/andere Anforderungen].”

Sie können dann diesen Prompt mit dem AI-Erweiterer erweitern.

Versuchen Sie nicht, alles auf einmal zu bauen. Beginnen Sie einfach und iterieren Sie. Bauen Sie die Kernfunktionen zuerst, bringen Sie sie zum Laufen und bitten Sie dann um Verbesserungen, eine Funktion nach der anderen.

Schritt 4: Importieren Sie Dateien aus Figma und GitHub

Es ist auch erwähnenswert, dass Sie mit Bolt Dateien aus Figma und GitHub importieren können. Das bedeutet, dass Sie Figma-Design-Rahmen in eine funktionierende Web-App oder interaktive HTML-Seite fast sofort umwandeln können.

Schritt 5: Erstellen Sie eine Website

Sofort begann Bolt, meine Landingpage zu erstellen. Der Chatbot auf der linken Seite zeigte Bolts gesamten Prozess. Auf der rechten Seite war eine Vorschau.

Insgesamt war ich beeindruckt, wie professionell die Landingpage aussah. Sie entsprach genau dem Prompt, den ich ihr gegeben hatte. Sie erledigte alles, von der Layout- bis zur Styling-Automatisierung, und rettete mir so Stunden manueller Codier- und Designarbeit.

Schritt 6: Sehen Sie den Code an

Eine meiner Lieblingsfunktionen von Bolt.new ist, wie einfach es ist, zwischen der Vorschau und dem Code zu wechseln.

Schritt 7: Vorschau Ihres Projekts

Sie können die Vorschau auch auf verschiedene Weise anzeigen (neues Fenster, mobile, vollbild), indem Sie die verschiedenen Symbole auf der rechten Seite auswählen.

Schritt 8: Zugriff auf die Prompt-Bibliothek

Am unteren Ende des Chatbots wurden die folgenden Optionen angezeigt:

• Dateien hochladen
• Den Prompt erweitern
• Zwischen Diskussion und Build-Modus umschalten
• Die Prompt-Bibliothek öffnen (oder “/”)
• Die Hilfe suchen

Die Prompt-Bibliothek war etwas, das ich bei keinem der AI-Code-Generatoren, die ich ausprobiert habe, gesehen hatte. Sie ermöglichte es mir, meine Lieblingsprompts über mehrere Projekte hinweg zu speichern, zu organisieren und wiederzuverwenden.

Schritt 9: Bearbeiten Sie mit AI

Ich wollte, dass Bolt Änderungen mit AI vornimmt, also gab ich dem Chatbot den folgenden Prompt:

“Aktualisieren Sie das Design der Landingpage, indem Sie die Farbpalette auf weichere, pastellfarbene Schattierungen von Grün und Blau für ein ruhiges, umweltfreundliches Gefühl anpassen. Stellen Sie sicher, dass alle Buttons und Akzente diese neue Farbpalette widerspiegeln, während Sie einen guten Kontrast für die Barrierefreiheit beibehalten.”

Einige Minuten später hatte Bolt meine Anfrage auf die Landingpage angewendet. Sie sah nicht viel anders aus, aber die Farben waren etwas weicher und pastellfarbener, wie ich es angefordert hatte.

Schritt 10: Sehen Sie die Projekt-Einstellungen an

Oben rechts befanden sich meine Projekt-Einstellungen, wo ich die Projekt-Sichtbarkeit anpassen konnte. Hier konnte ich auch eine Domäne verbinden, Analyse anzeigen und mehr.

Schritt 11: Verbinden Sie Integrationen

Ich konnte auch Integrationen wie Stripe, Supabase oder GitHub hinzufügen.

Schritt 12: Veröffentlichen

Sobald ich mit allem zufrieden war, klickte ich auf “Veröffentlichen” oben rechts.

Insgesamt machte Bolt.new das Erstellen einer Landingpage mühelos. Es brachte mich von einem einfachen Prompt zu einem professionellen Design in Minuten, das ich mit AI anpassen konnte.

Top 3 Bolt.new-Alternativen

Hier sind die besten Bolt.new-Alternativen, die ich empfehlen würde.

Replit

Die erste Bolt.new-Alternative, die ich empfehlen würde, ist Replit AI. Es ist eine cloud-basierte IDE, die 50+ Sprachen unterstützt.

Replit hebt sich durch breite Sprachunterstützung, integriertes Deployment und Echtzeit-Zusammenarbeit hervor. Sein Ghostwriter-AI hilft bei Code und Debugging, wenn auch mit weniger Kontext als Bolt.new.

Währenddessen konzentriert sich Bolt.new auf die schnelle Entwicklung von vollständigen Web-Anwendungen aus einfachen Textprompts. Es erledigt Paket-Setup, Debugging und Deployment. Es ist großartig für Solo-Entwickler oder diejenigen, die schnell mit Frameworks wie React, Vue und Next.js prototypisieren.

Wählen Sie Replit AI für Teamarbeit, Multi-Sprachen-Coding und Cloud-IDE-Zugriff. Andernfalls wählen Sie Bolt.new, um schnell Apps mit AI zu erstellen.

Lesen Sie meine Replit AI-Bewertung oder besuchen Sie Replit!

Windsurf

Die nächste Bolt.new-Alternative, die ich empfehlen würde, ist Windsurf. Es ist ein AI-Coding-Assistent, der Entwicklern hilft, Code einfacher zu schreiben, insbesondere für die Benutzeroberflächen-Design.

Beide Plattformen beschleunigen die Entwicklung, aber Windsurf hebt sich durch Funktionen hervor, die ihm ein tieferes Verständnis Ihrer Codebasis verleihen.

Währenddessen ist Bolt.new großartig, um Ideen schnell in funktionierende Web-Anwendungen umzuwandeln. Es läuft im Browser, unterstützt React und Next.js und erledigt Setup, Debugging und Deployment automatisch.

Wenn Sie mehr Kontrolle und erweiterte Coding-Tools benötigen, wählen Sie Windsurf. Um schnell ein Projekt mit AI zu starten, wählen Sie Bolt.new.

Lesen Sie meine Windsurf-Bewertung oder besuchen Sie Windsurf!

Cursor

Die letzte Bolt.new-Alternative, die ich empfehlen würde, ist Cursor AI. Es ist ein Code-Editor, der das Codieren mit Autocomplete, Multi-Datei-Bearbeitung und einem klaren Verständnis Ihres gesamten Projekts erleichtert. Es ist großartig für Entwickler, die an großen Projekten arbeiten und genaue, kontextbewusste Hilfe und Debugging-Tools benötigen.

Im Gegensatz dazu konzentriert sich Bolt.new mehr auf die schnelle Erstellung von vollständigen Web-Anwendungen. Sie können schnell Apps erstellen und bereitstellen, ohne manuell zu coden. Seine AI erledigt Pakete, behebt Fehler und verwaltet das Deployment.

Für die schnelle Erstellung und Bereitstellung von Apps wählen Sie Bolt.new. Für größere Projekte, die ein tieferes Code-Verständnis erfordern, wählen Sie Cursor AI.

Lesen Sie meine Cursor AI-Bewertung oder besuchen Sie Cursor!

Bolt.new-Bewertung: Das richtige Tool für Sie?

Nachdem ich Bolt.new verwendet habe, kann ich ehrlich sagen, dass es sich weniger wie ein Coding-Tool und mehr wie ein kreativer Partner anfühlt. Es zu sehen, wie es eine Live-Seite aus nur einem Prompt startet, fühlte sich wie Magie an.

Aber mit all dem gesagt, versucht Bolt nicht, jedes Coding-Tool zu ersetzen. Es ist am besten, wenn Sie Ideen testen und AI die mühsamen Teile der Entwicklung erledigen lassen. Für mich war das genau das, was ich brauchte.

Aber wenn Sie sich fragen, wie Bolt im Vergleich zu anderen Plattformen abschneidet, hier ist meine Zusammenfassung:

• Replit ist am besten für diejenigen geeignet, die eine Cloud-IDE mit Multi-Sprachen-Unterstützung und Zusammenarbeit benötigen.
• Windsurf ist am besten für diejenigen geeignet, die mehr Kontrolle mit erweiterten Coding-Tools benötigen.
• Cursor ist am besten für diejenigen geeignet, die an größeren, komplexeren Projekten arbeiten und ein tieferes Code-Verständnis und Kontextbewusstsein benötigen.

Vielen Dank für das Lesen meiner Bolt.new-Bewertung! Ich hoffe, sie war hilfreich.

Bolt.new bietet einen kostenlosen Plan mit einer täglichen Token-Grenze von 150K und 1M Token pro Monat. Probieren Sie es aus und sehen Sie, wie Ihnen gefällt!

Häufig gestellte Fragen

Ist Bolt New kostenlos?

Ja, Bolt New bietet einen kostenlosen Plan mit einer täglichen Token-Grenze von 150K und 1M Token pro Monat. Bolt.new hilft Entwicklern, Ideen schnell zu testen, indem AI die komplexeren Teile der Entwicklung erledigt.

Wer ist der CEO von Bolt New?

Der CEO von Bolt.new ist Eric Simons.

Ist Bolt New-Abonnement wert?

Das Bolt.new-Abonnement ist wert, wenn Sie häufig MVPs oder vollständige Apps erstellen. Es kann jedoch nicht die beste Wahl sein, wenn Sie nur grundlegende Code-Vorschläge benötigen oder bevorzugen, lokal zu arbeiten. Dies liegt daran, dass die tokenbasierte Preisgestaltung für größere Projekte teuer werden kann.

Ist Bolt New besser als Cursor?

Bolt.new ist besser für schnelles Prototyping und Ideen-Testen, da es AI die komplexen Teile der Entwicklung erledigen lässt. Cursor AI ist jedoch besser für erfahrene Entwickler, die an großen Projekten arbeiten und mehr Kontextbewusstsein und Debugging-Tools benötigen.

Was sind die Einschränkungen von Bolt New?

Die Bolt.new-Einschränkungen umfassen die Skalierung großer Projekte, da es möglicherweise langsam werden kann. Es ist am besten für schnelles Prototyping und nicht für die vollständige Entwicklung geeignet.