Webentwicklung lebt von schnellen Iterationen und kurzen Feedback-Loops zwischen Cursor und externen Tools wie Figma oder dem Browser. Bei Cursor haben wir Workflows entwickelt, die diesen Loop weiter verkürzen. Klare Aufgabenabgrenzung, das Wiederverwenden von Komponenten und der Einsatz von Designsystemen halten alles schnell und konsistent. Dieser Guide zeigt, wie du Cursor für die Webentwicklung einrichtest und den Feedback-Loop weiter verkürzt.

​
Starte mit dem Orchestrieren in Cursor

Chat ist super, um Änderungen schnell zu starten. Sobald die wichtigsten Bausteine stehen, hilft der Wechsel zu Inline Edit und Tab, im Flow zu bleiben. Nachdem du Cursor eingerichtet hast, kannst du Workflows über verschiedene Tools hinweg orchestrieren. Unten siehst du eine Demo dessen, was möglich ist: ein Snake-Spiel, erstellt durch die Kombination von Linear, Figma und Browser-Tools. Auch wenn echte Projekte in der Regel komplexer sind, zeigt dieses Beispiel das Potenzial dieser integrierten Workflows.

​
Verbinde Cursor mit deinen Projektmanagement-Tools

Du kannst Cursor in deine bestehende Projektmanagement-Software über verschiedene Tools integrieren. In diesem Guide schauen wir uns die Integration von Linear mit dessen MCP-Server an.

​
Installation

Oder füge den Linear-MCP-Server manuell zu mcp.json hinzu: 
{
  "mcpServers": {
    "Linear": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.linear.app/sse"
      ]
    }
  }
}
Dann:
  1. Stell sicher, dass Linear in den MCP-Einstellungen aktiviert ist
  2. Dein Browser öffnet sich und du wirst aufgefordert, Linear zu autorisieren
    Aufgrund des aktuellen Stands von MCP kann die Einrichtung mehrere Versuche erfordern. Wenn die Integration nicht funktioniert, versuch, den Server in den Cursor-Einstellungen neu zu laden.

​
Linear in Cursor verwenden

Linear-MCP-Server stellen verschiedene Tools bereit, die Cursor nutzen kann, um Issues zu lesen und zu verwalten. Geh zu den MCP-Einstellungen und suche den Linear-Server, um eine Liste aller Tools zu sehen. Zum Überprüfen, probier diesen Prompt im Chat: 
list all issues related to this project
linear.png
Wenn die Integration korrekt eingerichtet ist, solltest du eine Liste von Issues zurückbekommen.

​
Bring deine Figma-Designs rein

Designs und Mockups sind zentral für die Webentwicklung. Mit dem offiziellen MCP-Server für Figma kannst du direkt in Cursor auf Design-Dateien zugreifen und mit ihnen arbeiten. Um loszulegen, folge den Setup-Anweisungen unter Figma Dev Mode MCP Server.

​
Installation

Du kannst unten auf den Button klicken, um den MCP-Server zu installieren. Oder manuell zu deiner mcp.json hinzufügen: 
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

​
Verwendung

Der Server stellt mehrere Tools bereit, die du in deinen Prompts nutzen kannst. Zum Beispiel: Versuch, nach den Designs der aktuellen Auswahl in Figma zu fragen. Mehr dazu in der Dokumentation.
figma.png

​
Halte dein Code-Scaffolding konsistent

Du hast wahrscheinlich schon bestehenden Code, ein Designsystem oder etablierte Konventionen, die du wiederverwenden willst. Beim Arbeiten mit Modellen ist es hilfreich, auf Muster zu verweisen, die bereits in deiner Codebase existieren, etwa Dropdown-Menüs oder andere gängige Komponenten. Wir arbeiten selbst in einer großen webbasierten Codebase und haben festgestellt, dass deklarativer Code besonders gut funktioniert, insbesondere für React und JSX. Wenn du ein Designsystem hast, kannst du dem Agent helfen, es zu entdecken, indem du eine Regel dafür bereitstellst. Hier ist eine ui-components.mdc-Datei, in der wir versuchen, die Wiederverwendung von Komponenten nach Möglichkeit durchzusetzen:
components.mdc
---
description: Implementing designs and building UI
---
- reuse existing UI components from `/src/components/ui`. these are the primitives we can build with
- create new components by orchestrating ui components if you can't find any existing that solves the problem
- ask the human how they want to proceed when there are missing components and designs
Während deine Komponentenbibliothek wächst, füge entsprechend neue Regeln hinzu. Wenn die Regeln zu zahlreich werden, überlege, sie in spezifischere Kategorien aufzuteilen, zum Beispiel „nur anwenden, wenn mit Benutzereingaben gearbeitet wird“.
ui-components.png

​
Gib Cursor Zugriff auf den Browser

Um Cursors Fähigkeiten zu erweitern, kannst du den Browser-Tools-MCP-Server einrichten, der Zugriff auf Konsolen-Logs und Netzwerk-Requests bereitstellt. Sobald alles konfiguriert ist, kannst du deine Änderungen überprüfen, indem du die Konsolen-Ausgabe und die Netzwerkaktivität überwachst. Dieses Setup hilft sicherzustellen, dass deine Implementierung deiner Absicht entspricht. Folge den Anweisungen hier, um den MCP-Server einzurichten: https://browsertools.agentdesk.ai/installation
browser.png
Wir arbeiten daran, das künftig nativ in Cursor einfacher zu integrieren.

​
Erkenntnisse

  • Enge Feedback-Loops sind im Web-Development essenziell. Nutze Cursor zusammen mit Tools wie Figma, Linear und dem Browser, um schnell voranzukommen und im Flow zu bleiben.
  • MCP-Server ermöglichen dir, externe Systeme direkt in Cursor zu integrieren, reduzieren Kontextwechsel und verbessern die Aufgabenausführung.
  • Das Wiederverwenden von Komponenten und Designsystemen hilft dem Modell, saubereren, konsistenteren Code und Outputs zu erzeugen.
  • Klar definierte, abgegrenzte Tasks führen zu besseren Ergebnissen. Sei bewusst damit, wie du promptest und worum du bittest.
  • Wenn du keine guten Outputs bekommst, versuch Folgendes anzupassen:
    • Instructions: Nutze Regeln, Prompts und gib Zugriff auf mehr Kontext, z. B. über MCP-Server.
    • Systems: Muster, Abstraktionen und Klarheit machen es dem Modell leichter, zu verstehen, zu helfen und autonomer zu arbeiten.
  • Du kannst den Kontext des Modells erweitern, indem du Runtime-Infos wie Console-Logs, Network-Requests und UI-Elementdaten einbeziehst.
  • Nicht alles muss automatisiert sein. Wenn dein System zu komplex wird, greif auf präzisere Edits mit Tab und Inline Edit zurück.
  • Cursor ist am stärksten als Co-Pilot, nicht als Autopilot. Nutze es, um deine eigene Entscheidungsfindung zu verbessern, nicht zu ersetzen.