Web-Entwicklung beinhaltet schnelle Iterationen und enge Feedback-Schleifen zwischen Cursor und externen Tools wie Figma oder dem Browser. Bei Cursor haben wir Arbeitsabläufe gefunden, die diese Schleife verkürzen. Klare Aufgabenabgrenzung, die Wiederverwendung von Komponenten und die Nutzung von Design-Systemen helfen dabei, Dinge schnell und konsistent zu halten. Dieser Leitfaden behandelt, wie Sie Cursor einrichten, um Web-Entwicklung zu unterstützen und die Feedback-Schleife zu verkürzen.

​
Beginnen Sie mit der Orchestrierung in Cursor

Chat eignet sich hervorragend zum Bootstrapping von Änderungen. Sobald die wichtigsten Komponenten vorhanden sind, hilft der Wechsel zu Inline Edit und Tab dabei, Ihren Flow-Zustand aufrechtzuerhalten. Nach der Einrichtung von Cursor können Sie Workflows über verschiedene Tools hinweg orchestrieren. Unten finden Sie eine Demonstration der Möglichkeiten: ein Snake-Spiel, das durch die Kombination von Linear, Figma und Browser-Tools erstellt wurde. Während reale Projekte typischerweise komplexer sind, zeigt dieses Beispiel das Potenzial dieser integrierten Workflows auf.

​
Verbinden Sie sich mit Ihren Projektmanagement-Tools

Sie können Cursor in Ihre bestehende Projektmanagement-Software mit verschiedenen Tools integrieren. In diesem Leitfaden schauen wir uns die Integration von Linear mit ihrem MCP-Server an.

​
Installation

Oder fügen Sie den Linear MCP-Server manuell zu mcp.json hinzu: 
{
  "mcpServers": {
    "Linear": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.linear.app/sse"
      ]
    }
  }
}
Dann:
  1. Stellen Sie sicher, dass Sie Linear in den MCP-Einstellungen aktivieren
  2. Ein Webbrowser wird sich öffnen und Sie werden aufgefordert, sich bei Linear zu autorisieren
    Aufgrund des aktuellen Zustands von MCP kann die Einrichtung mehrere Versuche erfordern. Wenn die Integration nicht funktioniert, versuchen Sie, den Server in den Cursor-Einstellungen zu “Neuladen”.

​
Linear in Cursor verwenden

Linear MCP-Server stellen verschiedene Tools zur Verfügung, die Cursor verwenden kann, um Issues zu lesen und zu verwalten. Gehen Sie zu den MCP-Einstellungen und suchen Sie den Linear-Server, um eine Liste aller Tools zu sehen. Zur Überprüfung versuchen Sie diese Eingabeaufforderung im Chat: 
list all issues related to this project
linear.png
Es sollte eine Liste von Issues zurückgeben, wenn die Integration ordnungsgemäß eingerichtet ist.

​
Ihre Figma-Designs einbinden

Designs und Mockups sind zentral für die Webentwicklung. Mit dem offiziellen MCP-Server für Figma können Sie direkt auf Design-Dateien in Cursor zugreifen und mit ihnen arbeiten. Um zu beginnen, folgen Sie den Einrichtungsanweisungen unter Figma Dev Mode MCP Server.

​
Installation

Sie können auf die Schaltfläche unten klicken, um den MCP-Server zu installieren. Oder fügen Sie manuell zu Ihrer mcp.json hinzu: 
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

​
Verwendung

Der Server stellt mehrere Tools zur Verfügung, die Sie in Ihren Prompts verwenden können. Versuchen Sie beispielsweise, nach den Designs der aktuellen Auswahl in Figma zu fragen. Lesen Sie mehr in der Dokumentation.
figma.png

​
Halten Sie Ihr Code-Gerüst konsistent

Sie haben wahrscheinlich bereits vorhandenen Code, ein Design-System oder etablierte Konventionen, die Sie wiederverwenden möchten. Bei der Arbeit mit Modellen ist es hilfreich, auf Muster zu verweisen, die bereits in Ihrer Codebasis vorhanden sind, wie Dropdown-Menüs oder andere häufige Komponenten. Da wir selbst in einer großen webbasierten Codebasis arbeiten, haben wir festgestellt, dass deklarativer Code besonders gut funktioniert, insbesondere für React und JSX. Wenn Sie ein Design-System haben, können Sie dem Agenten dabei helfen, es zu entdecken, indem Sie eine Regel dafür bereitstellen. Hier ist eine ui-components.mdc-Datei, in der wir versuchen, die Wiederverwendung von Komponenten zu erzwingen, wenn möglich:
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 Ihre Komponentenbibliothek wächst, fügen Sie entsprechend neue Regeln hinzu. Wenn die Regeln zu zahlreich werden, erwägen Sie, sie in spezifischere Kategorien aufzuteilen, wie “nur anwenden bei der Arbeit mit Benutzereingaben.”
ui-components.png

​
Cursor Zugriff auf Browser gewähren

Um Cursors Funktionen zu erweitern, können Sie den Browser-Tools MCP-Server einrichten, der Zugriff auf Konsolenlogs und Netzwerkanfragen bietet. Nach der Konfiguration können Sie Ihre Änderungen überprüfen, indem Sie die Konsolenausgabe und Netzwerkaktivität überwachen. Diese Einrichtung hilft sicherzustellen, dass Ihre Implementierung Ihrer Absicht entspricht. Folgen Sie den Anweisungen hier, um den MCP-Server einzurichten: https://browsertools.agentdesk.ai/installation
browser.png
Wir arbeiten daran, dies nativ in Cursor einfacher zu integrieren.

​
Erkenntnisse

  • Enge Feedback-Schleifen sind in der Webentwicklung unerlässlich. Verwenden Sie Cursor zusammen mit Tools wie Figma, Linear und dem Browser, um schnell voranzukommen und im Flow zu bleiben.
  • MCP-Server ermöglichen es Ihnen, externe Systeme direkt in Cursor zu integrieren, wodurch Kontextwechsel reduziert und die Aufgabenausführung verbessert wird.
  • Die Wiederverwendung von Komponenten und Design-Systemen hilft dem Modell dabei, saubereren und konsistenteren Code und Ausgaben zu produzieren.
  • Klare, abgegrenzte Aufgaben führen zu besseren Ergebnissen. Seien Sie bewusst bei der Art, wie Sie prompten und was Sie verlangen.
  • Wenn Sie keine guten Ausgaben erhalten, versuchen Sie Folgendes anzupassen:
    • Anweisungen: Verwenden Sie Regeln, Prompts und geben Sie Zugang zu mehr Kontext mit z.B. MCP-Servern.
    • Systeme: Muster, Abstraktionen und Klarheit machen es für das Modell einfacher zu verstehen, zu helfen und autonomer zu arbeiten
  • Sie können den Kontext des Modells erweitern, indem Sie Laufzeitinformationen wie Konsolen-Logs, Netzwerkanfragen und UI-Element-Daten einbeziehen.
  • Nicht alles muss automatisiert werden. Wenn Ihr System zu komplex wird, greifen Sie auf chirurgischere Bearbeitungen mit Tab und Inline Edit zurück.
  • Cursor ist am mächtigsten, wenn es ein Co-Pilot ist, kein Autopilot. Verwenden Sie es, um Ihre eigene Entscheidungsfindung zu verbessern, nicht zu ersetzen.