Zurück zur Sharing-Liste

[Cursor-Guide]Web-Entwicklung

Autor:Cursor
Plattform:Lokale Datei
Datum:2025-05-31

Erfahren Sie, wie Sie Web-Entwicklungsworkflows mit Cursor optimieren können, indem Sie Tools wie Figma und Linear integrieren, um schnellere Iterationen und engere Feedback-Schleifen zu ermöglichen.

Web-EntwicklungCursorFigmaLinearWorkflow-Optimierung

[Cursor-Guide]Web-Entwicklung

Original-Link: Original-Link

Web-Entwicklung beinhaltet oft schnelle Iterationen und enge Feedback-Schleifen zwischen Cursor und externen Tools wie Figma oder dem Browser. Bei Cursor haben wir Workflows gefunden, die diese Schleife enger gestalten. Klare Aufgabenabgrenzung, die Wiederverwendung von Komponenten und die Nutzung von Design-Systemen helfen dabei, Dinge schnell und konsistent zu halten.

Diese Anleitung zeigt, wie Sie Cursor für die Web-Entwicklung einrichten und die Feedback-Schleife optimieren können.

webDevelopment-1

Beginnen Sie mit der Orchestrierung in Cursor

Chat eignet sich hervorragend für das Bootstrapping von Änderungen. Sobald die Hauptkomponenten vorhanden sind, hilft der Wechsel zu CMD K und Tab, Ihren Flow-Zustand aufrechtzuerhalten.

Nach der Einrichtung von Cursor können Sie Workflows über verschiedene Tools hinweg orchestrieren. Unten sehen 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.

Verbinden Sie Ihre Projektmanagement-Tools

Sie können Cursor in Ihre bestehende Projektmanagement-Software integrieren, indem Sie verschiedene Tools verwenden. In dieser Anleitung betrachten wir die Integration von Linear mit ihrem MCP-Server.

Installation

  1. Fügen Sie den Linear-MCP-Server zu mcp.json hinzu
{

  "mcpServers": {

    "linear": {

      "command": "npx",

      "args": [

        "-y",

        "mcp-remote",

        "https://mcp.linear.app/sse"

      ]

    }

  }

}
  1. Stellen Sie sicher, dass Linear in den MCP-Einstellungen aktiviert ist
  2. Ein Webbrowser öffnet sich 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 über die Cursor-Einstellungen "Neu zu laden".

Verwendung von Linear in Cursor

Linear-MCP-Server stellen verschiedene Tools bereit, die Cursor zum Lesen und Verwalten von Issues verwenden kann. Gehen Sie zu den MCP-Einstellungen und suchen Sie den Linear-Server, um eine Liste aller Tools anzuzeigen. Um die Integration zu überprüfen, versuchen Sie diesen Prompt im Chat:

list all issues related to this project

Linear

Es sollte eine Liste von Issues zurückgeben, wenn die Integration korrekt eingerichtet ist.

Integrieren Sie Ihre Figma-Designs

Designs und Mockups sind zentral für die Web-Entwicklung. Mit einem community-basierten MCP-Server für Figma können Sie direkt auf Design-Dateien in Cursor zugreifen und mit ihnen arbeiten. Folgen Sie den Einrichtungsanweisungen unter https://www.framelink.ai/docs/quickstart, um zu beginnen.

Installation

{

  "mcpServers": {

	  ...,

    "figma": {

	    "command": "npx",

	    "args": [

	      "-y",

	      "figma-developer-mcp",

	      "--figma-api-key=YOUR-KEY",

	      "--stdio"

	    ]

	  }

  },

}

Verwendung

Dieser MCP-Server erfordert, dass Sie einen Link zu der Figma-Ebene oder dem Frame angeben, auf den Sie zugreifen möchten. Lesen Sie mehr in der Dokumentation.

Halten Sie Ihr Code-Scaffolding konsistent

Sie haben wahrscheinlich bestehenden Code, ein Design-System oder etablierte Konventionen, die Sie wiederverwenden möchten. Bei der Arbeit mit Modellen ist es hilfreich, auf bereits vorhandene Muster in Ihrem Codebase zu verweisen, wie z.B. Dropdown-Menüs oder andere gängige Komponenten.

Da wir selbst in einem großen web-basierten Codebase 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 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 fördern:

components.mdc

---

description: Implementierung von Designs und Aufbau der UI

---
- Verwenden Sie vorhandene UI-Komponenten aus `/src/components/ui`. Dies sind die Grundbausteine, mit denen wir arbeiten können.
- Erstellen Sie neue Komponenten durch die Orchestrierung von UI-Komponenten, wenn Sie keine vorhandene finden, die das Problem löst.
- Fragen Sie den Menschen, wie er vorgehen möchte, wenn Komponenten oder Designs fehlen.

Wenn Ihre Komponentenbibliothek wächst, fügen Sie entsprechend neue Regeln hinzu. Wenn die Regeln zu zahlreich werden, sollten Sie sie in spezifischere Kategorien aufteilen, wie z.B. "nur bei der Arbeit mit Benutzereingaben anwenden".

Components

Geben Sie Cursor Zugriff auf den Browser

Um die Fähigkeiten von Cursor zu erweitern, können Sie den Browser-Tools-MCP-Server einrichten, der Zugriff auf Konsolenprotokolle 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 Tools

Wir arbeiten daran, dies nativ in Cursor einfacher integrierbar zu machen.

Wichtige Erkenntnisse

  • Enge Feedback-Schleifen sind im Webentwicklung unerlässlich. Nutzen Sie Cursor zusammen mit Tools wie Figma, Linear und dem Browser, um schnell zu arbeiten und im Flow zu bleiben.
  • MCP-Server (MCP-Server) ermöglichen die direkte Integration externer Systeme in Cursor, was Kontextwechsel reduziert und die Aufgabenausführung verbessert.
  • Die Wiederverwendung von Komponenten und Design-Systemen hilft dem Modell, saubereren und konsistenteren Code sowie Ergebnisse zu liefern.
  • Klare, abgegrenzte Aufgaben führen zu besseren Ergebnissen. Seien Sie gezielt in Ihrer Formulierung und was Sie anfragen.
  • Wenn Sie keine guten Ergebnisse erhalten, versuchen Sie Folgendes anzupassen:
    • Anweisungen: Nutzen Sie Regeln, Prompts und geben Sie Zugriff auf mehr Kontext, z.B. durch MCP-Server.
    • Systeme: Muster, Abstraktionen und Klarheit erleichtern es dem Modell, zu verstehen, zu helfen und autonomer zu arbeiten.
  • Sie können den Kontext des Modells erweitern, indem Sie Laufzeitinformationen wie Konsolenprotokolle, Netzwerkanfragen und UI-Element-Daten einbeziehen.
  • Nicht alles muss automatisiert werden. Wenn Ihr System zu komplex wird, greifen Sie auf präzisere Bearbeitungen mit Tab und CMD K zurück.
  • Cursor ist am leistungsfähigsten, wenn es ein Copilot ist und kein Autopilot. Nutzen Sie es, um Ihre eigene Entscheidungsfindung zu verbessern, nicht zu ersetzen.

Artikelreihenindex