Le développement web implique des itérations rapides et des boucles de rétroaction serrées entre Cursor et des outils externes comme Figma ou le navigateur. Chez Cursor, nous avons trouvé des flux de travail qui resserrent cette boucle. Une définition claire des tâches, la réutilisation de composants et l’exploitation des systèmes de design aident à maintenir les choses rapides et cohérentes. Ce guide couvre comment configurer Cursor pour soutenir le développement web et resserrer la boucle de rétroaction.

​
Commencer à orchestrer dans Cursor

Chat est excellent pour amorcer les changements. Une fois que les éléments principaux sont en place, passer à Inline Edit et Tab aide à maintenir votre état de flux. Après avoir configuré Cursor, vous pourrez orchestrer des flux de travail à travers différents outils. Ci-dessous se trouve une démonstration de ce qui est possible : un jeu de serpent créé en combinant les outils Linear, Figma et navigateur. Bien que les projets du monde réel soient généralement plus complexes, cet exemple illustre le potentiel de ces flux de travail intégrés.

​
Connectez-vous à vos outils de gestion de projet

Vous pouvez intégrer Cursor dans vos logiciels de gestion de projet existants en utilisant différents outils. Dans ce guide, nous examinerons l’intégration de Linear avec leur serveur MCP.

​
Installation

Ou ajoutez manuellement le serveur MCP Linear à mcp.json : 
{
  "mcpServers": {
    "Linear": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.linear.app/sse"
      ]
    }
  }
}
Ensuite :
  1. Assurez-vous d’activer Linear depuis les paramètres MCP
  2. Le navigateur web s’ouvrira et vous serez invité à autoriser avec Linear
    En raison de l’état actuel de MCP, la configuration peut nécessiter plusieurs tentatives. Si l’intégration ne fonctionne pas, essayez de “Recharger” le serveur depuis les paramètres de Cursor.

​
Utiliser Linear dans Cursor

Les serveurs MCP Linear exposent différents outils que Cursor peut utiliser pour lire et gérer les problèmes. Allez dans les paramètres MCP et localisez le serveur Linear pour voir une liste de tous les outils. Pour vérifier, essayez cette invite dans le Chat : 
list all issues related to this project
linear.png
Cela devrait retourner une liste de problèmes si l’intégration est configurée correctement.

​
Intégrez vos designs Figma

Les designs et maquettes sont essentiels au développement web. En utilisant le serveur MCP officiel pour Figma, vous pouvez accéder directement aux fichiers de design et travailler avec eux dans Cursor. Pour commencer, suivez les instructions de configuration sur Figma Dev Mode MCP Server.

​
Installation

Vous pouvez cliquer sur le bouton ci-dessous pour installer le serveur MCP. Ou ajoutez manuellement à votre mcp.json : 
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

​
Utilisation

Le serveur expose plusieurs outils que vous pouvez utiliser dans vos prompts. Par exemple, essayez de demander les designs de la sélection actuelle dans Figma. Lisez plus d’informations dans la documentation.
figma.png

​
Gardez votre structure de code cohérente

Vous avez probablement du code existant, un système de design, ou des conventions établies que vous souhaitez réutiliser. Lorsque vous travaillez avec des modèles, il est utile de référencer des modèles déjà présents dans votre base de code, tels que des menus déroulants ou d’autres composants communs. Travaillant nous-mêmes dans une grande base de code web, nous avons constaté que le code déclaratif fonctionne particulièrement bien, notamment pour React et JSX. Si vous avez un système de design, vous pouvez aider l’agent à le découvrir en fournissant une règle pour celui-ci. Voici un fichier ui-components.mdc où nous essayons d’imposer la réutilisation de composants quand c’est possible :
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
À mesure que votre bibliothèque de composants grandit, ajoutez de nouvelles règles en conséquence. Lorsque les règles deviennent trop nombreuses, envisagez de les diviser en catégories plus spécifiques, telles que “s’applique uniquement lors du travail avec les entrées utilisateur.”
ui-components.png

​
Donner à Cursor l’accès au navigateur

Pour étendre les capacités de Cursor, vous pouvez configurer le serveur MCP des outils de navigateur, qui fournit l’accès aux journaux de console et aux requêtes réseau. Une fois configuré, vous pouvez vérifier vos modifications en surveillant la sortie de la console et l’activité réseau. Cette configuration aide à s’assurer que votre implémentation correspond à votre intention. Suivez les instructions ici pour configurer le serveur MCP : https://browsertools.agentdesk.ai/installation
browser.png
Nous travaillons à rendre cette intégration plus facile nativement dans Cursor.

​
Points clés

  • Les boucles de rétroaction rapides sont essentielles dans le développement web. Utilisez Cursor avec des outils comme Figma, Linear et le navigateur pour avancer rapidement et rester dans le flux.
  • Les serveurs MCP vous permettent d’intégrer des systèmes externes directement dans Cursor, réduisant les changements de contexte et améliorant l’exécution des tâches.
  • La réutilisation de composants et de systèmes de design aide le modèle à produire un code plus propre et des sorties plus cohérentes.
  • Des tâches claires et bien délimitées donnent de meilleurs résultats. Soyez intentionnel dans la façon dont vous formulez vos demandes et ce que vous demandez.
  • Si vous n’obtenez pas de bons résultats, essayez d’ajuster :
    • Instructions : Utilisez des règles, des prompts, et donnez accès à plus de contexte avec par exemple des serveurs MCP.
    • Systèmes : Les modèles, abstractions et la clarté facilitent la compréhension du modèle, l’aide et un travail plus autonome
  • Vous pouvez étendre le contexte du modèle en incluant des informations d’exécution comme les logs de console, les requêtes réseau et les données d’éléments d’interface utilisateur.
  • Tout n’a pas besoin d’être automatisé. Si votre système devient trop complexe, revenez à des modifications plus chirurgicales avec Tab et Inline Edit.
  • Cursor est plus puissant quand c’est un co-pilote, pas un pilote automatique. Utilisez-le pour améliorer, pas remplacer, votre propre prise de décision.