communauté · sélectionné · non officiel
Cursor Design
Cursor Design est le hub communautaire dédié à la conception avec Cursor — tutoriels, tweets, vidéos et modèles, le tout au même endroit.
Starter Next.js + Tailwind pour le prototypage avec Cursor
Un scaffold minimal Next.js App Router + Tailwind optimisé pour le prototypage rapide avec Cursor — défauts de tokens judicieux et une coque de mise en page propre pour vos prompts.
shadcn/ui — Composants prêts-à-copier pour les flux de travail Cursor
Composants React accessibles et sans style par défaut que vous possédez dans votre codebase — la bibliothèque de primitives incontournable pour demander à Cursor d'assembler des pages d'accueil et des tableaux de bord sur Tailwind.
Tutoriel complet Cursor AI pour débutants (2025)
awesome-cursorrules — Fichiers .cursorrules organisés pour chaque stack
La plus grande collection communautaire de fichiers .cursorrules, incluant des règles frontend et design-system qui maintiennent la cohérence de Cursor avec les conventions Tailwind, Next.js et les composants.
Comment créer un site web avec l'IA — Cursor 2025
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.
Conversion de designs Figma avec Cursor MCP
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.
Une publication de @volo_builds sur la conception avec Cursor. Lisez l’original sur X.
Comment créer de belles interfaces avec l'IA
Une publication de @shadcn sur la conception avec Cursor. Lisez l’original sur X.
Une publication de @jasonzhou1993 sur la conception avec Cursor. Lisez l’original sur X.
10x Meilleure Conception UI pour Vibe Coders — Utilisez v0 Directement dans Cursor
Magic UI — Composants Animés pour Pages d'Accueil Construites avec Cursor
Une bibliothèque de 150+ composants React + Tailwind + Motion animés qui s'associent parfaitement avec Cursor pour déployer des pages marketing avec des micro-interactions raffinées.
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.
Règles de système de design pour Cursor
Un pack de règles .cursor prêt à l'emploi qui encode l'échelle d'espacement, les tokens de couleur sémantiques, les rayons et la typographie pour que l'UI générée reste fidèle à la marque dès le premier prompt.
Une publication de @rauchg sur la conception avec Cursor. Lisez l’original sur X.
DESIGN in v0, FINISH in Cursor
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.
Une publication de @builderio sur la conception avec Cursor. Lisez l’original sur X.
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.
Une publication de @joelunger sur la conception avec Cursor. Lisez l’original sur X.
Guide du Designer pour l'IA : Pourquoi ce Designer a Basculé vers Cursor
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.
Une publication de @cursor_ai sur la conception avec Cursor. Lisez l’original sur X.
Une publication de @elizabethlin sur la conception avec Cursor. Lisez l’original sur X.
Cursor pour prototypes interactifs, design sonore et visualisation de données
Une publication de @patrickjs__ sur la conception avec Cursor. Lisez l’original sur X.
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.
Une publication de @cursor_ai sur la conception avec Cursor. Lisez l’original sur X.
Cursor pour les designers (Atelier complet)
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.
Une publication de @cursor_ai sur la conception avec Cursor. Lisez l’original sur X.
É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.
Une publication de @cursor_ai sur la conception avec Cursor. Lisez l’original sur X.
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.
Une publication de @cursor_ai sur la conception avec Cursor. Lisez l’original sur X.
Un nouvel éditeur visuel : concevoir directement dans votre base de 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.
Le nouvel éditeur visuel de Cursor est-il un tue-Figma ? Tutoriel