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
Template

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.

Vercel
shadcn/ui — Composants prêts-à-copier pour les flux de travail Cursor
Template

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.

shadcn
Tutoriel complet Cursor AI pour débutants (2025)
34:00
Video

Tutoriel complet Cursor AI pour débutants (2025)

T
Tech Tutorials ·
awesome-cursorrules — Fichiers .cursorrules organisés pour chaque stack
Template

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.

PatrickJS
Comment créer un site web avec l'IA — Cursor 2025
28:00
Video

Comment créer un site web avec l'IA — Cursor 2025

T
Tech Tutorials ·
Tutorial

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.

DEV Community
Conversion de designs Figma avec Cursor MCP
15:48
Video

Conversion de designs Figma avec Cursor MCP

C
CoderOne ·130.0K views ·
Tutorial

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.

DEV Community
V
@volo_builds
Tweet

Une publication de @volo_builds sur la conception avec Cursor. Lisez l’original sur X.

1.7K
Read on X
Comment créer de belles interfaces avec l'IA
6:38
Video

Comment créer de belles interfaces avec l'IA

V
Volo Builds ·49.7K views ·
S
@shadcn
Tweet

Une publication de @shadcn sur la conception avec Cursor. Lisez l’original sur X.

5.4K
Read on X
J
@jasonzhou1993
Tweet

Une publication de @jasonzhou1993 sur la conception avec Cursor. Lisez l’original sur X.

2.6K
Read on X
10x Meilleure Conception UI pour Vibe Coders — Utilisez v0 Directement dans Cursor
3:35
Video

10x Meilleure Conception UI pour Vibe Coders — Utilisez v0 Directement dans Cursor

A
AI Jason ·52.8K views ·
Magic UI — Composants Animés pour Pages d'Accueil Construites avec Cursor
Template

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.

Magic UI
Tutorial
Official

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.

Cursor Docs
Tutorial
Official

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.

Cursor Docs
Règles de système de design pour Cursor
Template

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.

Community
R
@rauchg
Tweet

Une publication de @rauchg sur la conception avec Cursor. Lisez l’original sur X.

3.3K
Read on X
DESIGN in v0, FINISH in Cursor
17:00
Video

DESIGN in v0, FINISH in Cursor

A
AI Coding ·
Tutorial

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.

Builder.io Blog
B
@builderio
Tweet

Une publication de @builderio sur la conception avec Cursor. Lisez l’original sur X.

980
Read on X
Tutorial

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.

Smashing Magazine
J
@joelunger
Tweet

Une publication de @joelunger sur la conception avec Cursor. Lisez l’original sur X.

1.9K
Read on X
Guide du Designer pour l'IA : Pourquoi ce Designer a Basculé vers Cursor
20:55
Video

Guide du Designer pour l'IA : Pourquoi ce Designer a Basculé vers Cursor

H
How I AI ·24.0K views ·
Tutorial
Official

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.

Cursor Docs
Tutorial
Official

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.

Cursor Docs
C
@cursor_ai
Tweet

Une publication de @cursor_ai sur la conception avec Cursor. Lisez l’original sur X.

4.6K
Read on X
E
@elizabethlin
Tweet

Une publication de @elizabethlin sur la conception avec Cursor. Lisez l’original sur X.

1.5K
Read on X
Cursor pour prototypes interactifs, design sonore et visualisation de données
35:07
Video

Cursor pour prototypes interactifs, design sonore et visualisation de données

H
How I AI ·19.0K views ·
P
@patrickjs__
Tweet

Une publication de @patrickjs__ sur la conception avec Cursor. Lisez l’original sur X.

2.1K
Read on X
Tutorial

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.

DEV Community
C
@cursor_ai
Tweet

Une publication de @cursor_ai sur la conception avec Cursor. Lisez l’original sur X.

3.1K
Read on X
Cursor pour les designers (Atelier complet)
41:42
Video
Official

Cursor pour les designers (Atelier complet)

C
Cursor ·
Tutorial
Official

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.

Cursor Blog
C
@cursor_ai
Tweet

Une publication de @cursor_ai sur la conception avec Cursor. Lisez l’original sur X.

12.4K
Read on X
Tutorial
Official

É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 Changelog
C
@cursor_ai
Tweet

Une publication de @cursor_ai sur la conception avec Cursor. Lisez l’original sur X.

4.2K
Read on X
Tutorial
Official

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.

Cursor Changelog
Tutorial
Official

É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.

Cursor Blog
C
@cursor_ai
Tweet

Une publication de @cursor_ai sur la conception avec Cursor. Lisez l’original sur X.

8.8K
Read on X
Un nouvel éditeur visuel : concevoir directement dans votre base de code
2:05
Video
Official

Un nouvel éditeur visuel : concevoir directement dans votre base de code

C
Cursor ·101.6K views ·
Tutorial

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.

Builder.io Blog
Tutorial

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.

Stork.AI
Le nouvel éditeur visuel de Cursor est-il un tue-Figma ? Tutoriel
10:00
Video

Le nouvel éditeur visuel de Cursor est-il un tue-Figma ? Tutoriel

A
AI Coding ·
L'éditeur visuel Cursor — Modifier les mises en page visuellement
9:41
Video

L'éditeur visuel Cursor — Modifier les mises en page visuellement

D
DesignCourse ·14.3K views ·
Open Design

Projet frère de nexu.io

Open Design — l’agent de design open source qui se branche sur Cursor

Votre agent de code existant — Cursor · Claude Code · Codex · Gemini · OpenCode · Qwen — devient le moteur de design, propulsé par 137 compétences composables et 150 systèmes DESIGN.md portables.

Open Design — design with the agent on your laptop