Tutoriels
Des guides pas à pas pour concevoir et prototyper avec Cursor, sélectionnés à travers le web.
Générer des ressources de marque et des jeux d'icônes avec Cursor
Utiliser Cursor pour produire des systèmes d'icônes SVG, des favicons et une identité visuelle cohérente en code — définir une palette et des règles de trait une fois, puis générer des marques correspondantes et exporter des ressources prêtes pour la production.
Construire une page d'accueil avec Cursor, shadcn/ui et Tailwind
D'une app Next.js vide à une landing page en production : scaffolding avec shadcn/ui, prompting Cursor section par section, et utilisation de design tokens pour maintenir la cohérence visuelle du hero, pricing et footer.
Appliquer un système de design avec .cursor/rules
Écrivez un fichier de règle design-system.mdc qui fixe l'échelle d'espacement, les jetons de couleur, le rayon et la typographie afin que chaque composant généré par Cursor reste conforme à la marque — avec des exemples de règles ciblées et de ciblage glob.
Règles de projet pour la cohérence du design (.cursor/rules)
Le système officiel Rules de Cursor vous permet d'épingler des instructions réutilisables et délimitées — y compris une règle de système de design qui encode les tokens, l'espacement et les conventions de composants — afin que chaque génération reste conforme à la marque. Couvre le format MDC, les globs, et les règles auto-attachées par rapport aux règles toujours actives.
Concevoir l'interface utilisateur dans Cursor à partir de captures d'écran — Sans Figma
Un flux de travail pratique en Design Mode : collez des références de Dribbble, Mobbin ou Pinterest directement dans le chat Agent, épinglez un fichier de règles de système de conception, et itérez vers un composant peaufiné sans jamais ouvrir Figma.
Le flux de travail quotidien d'un Design Engineer dans Cursor
Comment les designers qui codent structurent leur configuration Cursor — règles pour les tokens et l'accessibilité, Playwright MCP pour les vérifications visuelles, et une boucle serrée de prompt, révision du diff, et affinage des pixels.
Figma vers Code dans Cursor avec le serveur MCP Dev Mode
Comment intégrer le serveur MCP Dev Mode de Figma dans Cursor pour que l'agent lise directement les frames, variables et Auto Layout — transformant les designs sélectionnés en composants React et Tailwind propres et token-aware.
Configurer le serveur MCP Figma dans Cursor
Guide officiel pour connecter le serveur MCP Dev Mode de Figma à Cursor afin que l'agent lise directement les frames sélectionnés, les variables et Auto Layout — puis génère du code conforme à vos design tokens. Inclut le flux d'installation MCP de Cursor et des conseils de prompt.
Prompts Cursor pour des tableaux de bord de données non génériques
Patterns de prompting pour les mises en page de tableaux de bord dans Cursor — décrire d'emblée la hiérarchie de l'information, la densité des graphiques et les états vides, puis affiner avec des images de référence pour un résultat conçu plutôt que basé sur un modèle.
Cursor 2.0 — Interface multi-agents et navigateur natif
Cursor 2.0 réorganise l'IDE autour des agents au lieu des fichiers et intègre un outil de navigateur natif que l'agent peut contrôler pour tester et itérer l'interface utilisateur. La base du workflow de conception Visual Editor, ainsi que Composer, le modèle de codage à faible latence propriétaire de Cursor.
Éditeur visuel de Cursor : pointer, inviter et appliquer
Un guide complet de l'éditeur visuel en navigateur de Cursor — éditions de mise en page par glisser-déposer, inspecteur de style Figma pour l'espacement et la typographie, et l'étape Apply qui convertit les ajustements visuels en JSX et Tailwind réels.
Cursor 2.2 — Éditeur visuel, mode débogage et jugement multi-agents
Le changelog officiel de Cursor 2.2. En vedette l'éditeur visuel du navigateur (mode Design), le mode débogage, le jugement multi-agents, les diagrammes Mermaid du mode Plan et les chats épinglés — la version qui a intégré la conception visuelle dans la boucle de l'agent.
Éditeur visuel Cursor — Mode de conception pour votre application en direct
L'éditeur visuel officiel de Cursor transforme l'aperçu en navigateur en surface de conception : édition de mise en page par glisser-déposer dans le DOM, inspecteur de style Figma pour l'espacement, les couleurs, la typographie et les tokens de conception, bascules d'état React, et un flux pointer-et-inviter qu'un agent valide directement dans le code.
Le mode Design de Cursor (édition visuelle) expliqué
L'analyse approfondie de Builder.io sur le mode Design de Cursor — ce que fait bien la barre latérale de style Figma pour éditer votre application React en direct, et les véritables limitations (pas de sélection multiple, pas d'annulation facile, éditions contrôlées par LLM) par rapport à un véritable outil de conception.
Cursor vient de tuer le Design Handoff
Une analyse approfondie de la façon dont l'éditeur visuel de Cursor supprime le processus de handoff designer-développeur — en éditant l'application en direct visuellement et en générant du code réel, révisable et persistant, sans spécification distincte à traduire.