Développement web

Comment configurer Cursor pour le développement web

Le développement web repose sur des itérations rapides et des boucles de feedback serrées entre Cursor et des outils externes comme Figma ou le navigateur. Chez Cursor, on a mis en place des workflows qui resserrent encore cette boucle. Une définition claire des tâches, la réutilisation des composants et l’exploitation de design systems aident à rester rapide et cohérent.

Ce guide explique comment configurer Cursor pour le développement web et resserrer la boucle de feedback.

Commence à orchestrer dans Cursor

Le Chat est parfait pour amorcer des changements. Une fois les principaux éléments en place, passer à Inline Edit et Tab t’aide à garder le flow.

Après avoir configuré Cursor, tu pourras orchestrer des workflows entre différents outils. Voici une démo de ce qui est possible : un jeu du serpent créé en combinant Linear, Figma et des outils de navigateur. Même si les projets réels sont généralement plus complexes, cet exemple met en avant le potentiel de ces workflows intégrés.

Connecte tes outils de gestion de projet

Tu peux intégrer Cursor à ton logiciel de gestion de projet existant en utilisant différents outils. Dans ce guide, on va voir comment intégrer Linear avec son serveur MCP.

Installation

Ou ajoute manuellement le serveur MCP Linear à mcp.json :

{
  "mcpServers": {
    "Linear": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.linear.app/sse"
      ]
    }
  }
}

Ensuite :

1. Assure-toi d’activer Linear dans les paramètres MCP
2. Le navigateur web va s’ouvrir et on te demandera d’autoriser Linear
   Vu l’état actuel de MCP, la configuration peut nécessiter plusieurs tentatives. Si l’intégration ne fonctionne pas, essaie de « Reload » 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 tickets. Va dans les paramètres MCP et repère le serveur Linear pour voir la liste de tous les outils. Pour vérifier, essaie cette invite dans Chat :

list all issues related to this project

Tu devrais voir une liste de tickets si l’intégration est correctement configurée.

Importe tes designs Figma

Les designs et maquettes sont au cœur du développement web. Avec le serveur MCP officiel pour Figma, tu peux accéder directement aux fichiers de design et travailler dessus dans Cursor. Pour démarrer, suis les instructions de configuration sur Figma Dev Mode MCP Server.

Installation

Tu peux cliquer sur le bouton ci-dessous pour installer le serveur MCP.

Ou ajoute-le manuellement à ton mcp.json :

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Utilisation

Le serveur expose plusieurs outils que tu peux utiliser dans tes prompts. Par exemple, essaie de récupérer les designs de la sélection actuelle dans Figma. Pour en savoir plus, consulte la documentation.

Garde ton scaffolding de code cohérent

Tu as probablement déjà du code, un design system ou des conventions établies que tu veux réutiliser. Quand tu travailles avec des modèles, c’est utile de faire référence à des patterns déjà présents dans ta codebase, comme des menus déroulants ou d’autres composants courants.

En bossant nous-mêmes sur une large codebase web, on a constaté que le code déclaratif marche particulièrement bien, surtout pour React et JSX.

Si tu as un design system, tu peux aider l’agent à le découvrir en fournissant une règle à son sujet. Voici un fichier ui-components.mdc où on essaie d’imposer la réutilisation des 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 ta bibliothèque de composants grandit, ajoute de nouvelles règles en conséquence. Quand les règles deviennent trop nombreuses, envisage de les scinder en catégories plus spécifiques, par exemple « à appliquer uniquement lors du travail avec des entrées utilisateur ».

Donner à Cursor l’accès au navigateur

Pour étendre les capacités de Cursor, tu peux configurer le serveur MCP des Browser Tools, qui donne accès aux logs de console et aux requêtes réseau. Une fois configuré, tu peux vérifier tes modifications en surveillant la sortie de la console et l’activité réseau. Cette configuration permet de t’assurer que ton implémentation correspond à ce que tu veux. Suis les instructions ici pour configurer le serveur MCP : https://browsertools.agentdesk.ai/installation

On travaille à rendre ça plus simple à intégrer nativement dans Cursor.

Points clés

• Des boucles de feedback rapides sont essentielles en développement web. Utilise Cursor avec des outils comme Figma, Linear et le navigateur pour avancer vite et rester dans le flow.
• Les serveurs MCP te permettent d’intégrer des systèmes externes directement dans Cursor, ce qui réduit le switch de contexte et améliore l’exécution des tâches.
• Réutiliser des composants et des design systems aide le modèle à produire un code et des résultats plus propres et plus cohérents.
• Des tâches claires et bien cadrées donnent de meilleurs résultats. Sois intentionnel·le dans tes prompts et dans ce que tu demandes.
• Si tu n’obtiens pas de bons résultats, essaie d’ajuster :
  • Instructions : Utilise des règles, des prompts, et donne accès à plus de contexte, p. ex. avec des serveurs MCP.
  • Systèmes : Des patterns, des abstractions et de la clarté facilitent la compréhension du modèle, son aide et son autonomie.
• Tu peux étendre le contexte du modèle en incluant des infos runtime comme des logs console, des requêtes réseau et des données d’éléments UI.
• Tout n’a pas besoin d’être automatisé. Si ton système devient trop complexe, reviens à des modifications plus chirurgicales avec Tab et Inline Edit.
• Cursor est le plus puissant quand c’est un copilote, pas un pilote automatique. Utilise-le pour améliorer, pas pour remplacer, ta propre prise de décision.