Landingpage mit Cursor prototypen

Vom leeren Ordner zu einem funktionierenden, responsiven Landingpage-Prototyp in rund einer Stunde — eine HTML-Datei, gebaut durch Beschreiben und Iterieren am Ergebnis.

Was Sie brauchen.

Cursor installiert mit den kostenlosen Design-Helfern aus dem Setup-Guide, einen leeren Ordner und eine klare Vorstellung, für wen die Seite ist. Der kostenlose Hobby-Tarif reicht für einen ersten Prototyp.

Den Brief vor dem Prompt schreiben.

Ein Absatz, einmal geschrieben, schlägt zwanzig spätere Korrekturen. Nennen Sie die Zielgruppe, den einen Call-to-Action und die Abschnitte in Reihenfolge — zum Beispiel: Hero mit Headline und CTA, drei Feature-Blöcke, ein Testimonial, Footer. Grenzen Sie auch das Ergebnis ein: eine HTML-Datei, Styles inline, keine Frameworks, Systemschriften.

In sechs Schritten bauen.

  1. Öffnen Sie den leeren Ordner in Cursor und fügen Sie Ihren Brief in den Chat ein.
  2. Bitten Sie um eine einzelne index.html mit inline CSS — eine Datei hält die Iteration schnell.
  3. Öffnen Sie die Datei im Browser und lesen Sie sie wie ein Besucher, nicht wie ein Ersteller.
  4. Sagen Sie dem Agenten in Design-Begriffen, was zu ändern ist — Abstand, Hierarchie, Kontrast — ein bis zwei Änderungen pro Nachricht.
  5. Führen Sie den /responsive-preview-Command aus, um Mobil-, Tablet- und Desktop-Breite zu prüfen.
  6. Beheben Sie, was das Audit meldet, dann stoppen Sie — ein Prototyp soll beurteilt, nicht poliert werden.

Wie ein Designer prüfen.

Das kostenlose Browser-Tool Responsive Preview zeigt die Seite bei drei Breiten nebeneinander mit synchronem Scrollen — schneller als das Fenster in der Größe zu ändern. Achten Sie auf horizontalen Overflow auf Mobilgeräten, Zeilenlängen über etwa 80 Zeichen und Tap-Ziele unter 44 Pixel.

Vom Prototyp zur Live-Seite.

Bestätigt sich der Prototyp, veröffentlichen Sie das HTML auf einem beliebigen kostenlosen statischen Host, oder verzichten Sie auf Code-Pflege und bauen ihn auf einem Carrd-Template mit eigener Domain für 19 $ im Jahr neu. Führen Sie vor beiden Wegen das Launch Checklist Prompt-Audit aus.

Was das kostet.

Der Prototyp selbst: nichts, im kostenlosen Cursor-Hobby-Tarif. Prototypen Sie regelmäßig, entfernt Pro für 20 $ im Monat die Agent-Limits — Sie können diesen Cursor-Empfehlungslink für 50 Prozent Rabatt im ersten Monat nutzen.