comunidad · seleccionado · no oficial

Cursor Design

Cursor Design es el centro seleccionado por la comunidad para diseñar con Cursor: tutoriales, tweets, vídeos y plantillas, todo en un mismo lugar.

Iniciador Next.js + Tailwind para Prototipado con Cursor
Template

Iniciador Next.js + Tailwind para Prototipado con Cursor

Un andamiaje minimalista de Next.js App Router + Tailwind optimizado para prototipado rápido con Cursor — configuración sensata de tokens y estructura limpia para trabajar con prompts.

Vercel
shadcn/ui — Componentes de copia-pega para flujos de trabajo en Cursor
Template

shadcn/ui — Componentes de copia-pega para flujos de trabajo en Cursor

Componentes React accesibles y sin estilos por defecto que posees en tu base de código — la librería de primitivos de referencia al solicitar a Cursor que arme landing pages y dashboards con Tailwind.

shadcn
Tutorial COMPLETO de Cursor AI para Principiantes (2025)
34:00
Video

Tutorial COMPLETO de Cursor AI para Principiantes (2025)

T
Tech Tutorials ·
awesome-cursorrules — Reglas .cursorrules curadas para cada stack
Template

awesome-cursorrules — Reglas .cursorrules curadas para cada stack

La colección más grande de la comunidad de archivos .cursorrules, incluyendo conjuntos de reglas de frontend y design-system que mantienen el output de Cursor consistente con convenciones de Tailwind, Next.js y componentes.

PatrickJS
Cómo hacer un sitio web con IA — Cursor 2025
28:00
Video

Cómo hacer un sitio web con IA — Cursor 2025

T
Tech Tutorials ·
Tutorial

Generación de Activos de Marca y Conjuntos de Iconos con Cursor

Uso de Cursor para producir sistemas de iconos SVG, favicons e identidad visual coherente en código — definiendo una paleta y reglas de trazo una sola vez, luego generando marcas coincidentes y exportando activos listos para la producción.

DEV Community
Conversión de diseños de Figma con Cursor MCP
15:48
Video

Conversión de diseños de Figma con Cursor MCP

C
CoderOne ·130.0K views ·
Tutorial

Construir una página de inicio con Cursor, shadcn/ui y Tailwind

De una app Next.js vacía a una landing page en producción: scaffolding con shadcn/ui, prompts en Cursor para layouts sección por sección, y uso de design tokens para mantener consistencia visual en hero, pricing y footer.

DEV Community
V
@volo_builds
Tweet

Una publicación de @volo_builds sobre diseñar con Cursor. Lee el original en X.

1.7K
Read on X
Cómo crear UIs hermosas con IA
6:38
Video

Cómo crear UIs hermosas con IA

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

Una publicación de @shadcn sobre diseñar con Cursor. Lee el original en X.

5.4K
Read on X
J
@jasonzhou1993
Tweet

Una publicación de @jasonzhou1993 sobre diseñar con Cursor. Lee el original en X.

2.6K
Read on X
10x Mejor Diseño UI para Vibe Coders — Usa v0 Directamente en Cursor
3:35
Video

10x Mejor Diseño UI para Vibe Coders — Usa v0 Directamente en Cursor

A
AI Jason ·52.8K views ·
Magic UI — Componentes Animados para Landing Pages Construidas en Cursor
Template

Magic UI — Componentes Animados para Landing Pages Construidas en Cursor

Una librería de 150+ componentes React + Tailwind + Motion animados que funcionan perfectamente con Cursor para crear páginas de marketing con micro-interacciones pulidas.

Magic UI
Tutorial
Official

Aplicar un Sistema de Diseño con .cursor/rules

Escribe un archivo de reglas design-system.mdc que fije la escala de espaciado, tokens de color, radio y tipografía para que cada componente que Cursor genere mantenga la identidad de marca — con ejemplos de reglas con scope y targeting con glob.

Cursor Docs
Tutorial
Official

Reglas de proyecto para consistencia de diseño (.cursor/rules)

El sistema oficial de Reglas de Cursor te permite fijar instrucciones reutilizables y con alcance definido — incluyendo una regla de sistema de diseño que codifica tokens, espaciado y convenciones de componentes — para que cada generación mantenga coherencia de marca. Cubre formato MDC, globs, y reglas auto-adjuntas versus siempre activas.

Cursor Docs
Iniciador de Reglas del Sistema de Diseño para Cursor
Template

Iniciador de Reglas del Sistema de Diseño para Cursor

Un paquete de reglas .cursor listo para usar que codifica escala de espaciado, tokens de color semántico, radio y tipografía para que la interfaz generada se mantenga coherente con la marca desde el primer prompt.

Community
R
@rauchg
Tweet

Una publicación de @rauchg sobre diseñar con Cursor. Lee el original en X.

3.3K
Read on X
DESIGN en v0, FINALIZA en Cursor
17:00
Video

DESIGN en v0, FINALIZA en Cursor

A
AI Coding ·
Tutorial

Diseñar UI en Cursor desde Capturas de Pantalla — Sin Figma

Un flujo práctico de Design Mode: pega referencias de Dribbble, Mobbin o Pinterest directamente en el chat del Agent, fija un archivo de reglas de sistema de diseño e itera hacia un componente pulido sin abrir Figma.

Builder.io Blog
B
@builderio
Tweet

Una publicación de @builderio sobre diseñar con Cursor. Lee el original en X.

980
Read on X
Tutorial

Flujo de Trabajo Diario de un Design Engineer en Cursor

Cómo los diseñadores que programan estructuran su setup en Cursor — reglas para tokens y accesibilidad, Playwright MCP para validaciones visuales, y un ciclo cerrado de prompt, revisar el diff y refinar los píxeles.

Smashing Magazine
J
@joelunger
Tweet

Una publicación de @joelunger sobre diseñar con Cursor. Lee el original en X.

1.9K
Read on X
Guía del Diseñador para IA: Por Qué Este Diseñador Cambió a Cursor
20:55
Video

Guía del Diseñador para IA: Por Qué Este Diseñador Cambió a Cursor

H
How I AI ·24.0K views ·
Tutorial
Official

De Figma a Código en Cursor con el Servidor MCP Dev Mode

Cómo integrar el servidor MCP Dev Mode de Figma en Cursor para que el agente lea marcos, variables y Auto Layout directamente — convirtiendo diseños seleccionados en componentes React y Tailwind limpios y conscientes de tokens.

Cursor Docs
Tutorial
Official

Configura el Servidor Figma MCP en Cursor

La configuración oficial para conectar el servidor Figma Dev Mode MCP a Cursor, permitiendo que el agente lea marcos seleccionados, variables y Auto Layout directamente — luego genera código que respeta tus tokens de diseño. Incluye el flujo de instalación MCP de Cursor y consejos de prompting.

Cursor Docs
C
@cursor_ai
Tweet

Una publicación de @cursor_ai sobre diseñar con Cursor. Lee el original en X.

4.6K
Read on X
E
@elizabethlin
Tweet

Una publicación de @elizabethlin sobre diseñar con Cursor. Lee el original en X.

1.5K
Read on X
Cursor para Prototipos Interactivos, Diseño de Sonido y Visualización de Datos
35:07
Video

Cursor para Prototipos Interactivos, Diseño de Sonido y Visualización de Datos

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

Una publicación de @patrickjs__ sobre diseñar con Cursor. Lee el original en X.

2.1K
Read on X
Tutorial

Prompting Cursor para Dashboards de Datos que No Se Vean Genéricos

Patrones para solicitar diseños de dashboards en Cursor — describiendo jerarquía de información, densidad de gráficos y estados vacíos desde el inicio, luego refinando con imágenes de referencia para que el resultado se sienta diseñado en lugar de templado.

DEV Community
C
@cursor_ai
Tweet

Una publicación de @cursor_ai sobre diseñar con Cursor. Lee el original en X.

3.1K
Read on X
Cursor para Diseñadores (Taller Completo)
41:42
Video
Official

Cursor para Diseñadores (Taller Completo)

C
Cursor ·
Tutorial
Official

Cursor 2.0 — Interfaz Multi-Agente y Navegador Nativo

Cursor 2.0 reorganiza el IDE alrededor de agentes en lugar de archivos e incluye una herramienta de navegador nativo que el agente puede controlar para probar e iterar sobre la UI. La base sobre la que se construye el flujo de trabajo del Editor Visual, más Composer, el modelo de codificación de baja latencia desarrollado internamente por Cursor.

Cursor Blog
C
@cursor_ai
Tweet

Una publicación de @cursor_ai sobre diseñar con Cursor. Lee el original en X.

12.4K
Read on X
Tutorial
Official

Editor Visual de Cursor: Señala, Indica y Aplica

Un recorrido por el Editor Visual en navegador de Cursor — ediciones de diseño con arrastrar y soltar, un inspector estilo Figma para espaciado y tipografía, y el paso Aplicar que convierte ajustes visuales en JSX y Tailwind reales.

Cursor Changelog
C
@cursor_ai
Tweet

Una publicación de @cursor_ai sobre diseñar con Cursor. Lee el original en X.

4.2K
Read on X
Tutorial
Official

Cursor 2.2 — Editor Visual, Modo Debug y Evaluación Multi-Agente

Changelog oficial de Cursor 2.2. Destacando el Editor Visual en navegador (Design Mode), Modo Debug, Evaluación Multi-Agente, diagramas Mermaid en Plan Mode y Chats Fijados — la versión que integró el diseño visual en el flujo del agente.

Cursor Changelog
Tutorial
Official

Editor Visual de Cursor — Modo Diseño para tu Aplicación en Vivo

El Editor Visual oficial de Cursor convierte la vista previa en navegador en una superficie de diseño: edición de layouts mediante arrastrar y soltar en el DOM, inspector estilo Figma para espaciado, color, tipografía y design tokens, controles de estado React, y un flujo de señalización y prompt que un agente confirma directamente en código real.

Cursor Blog
C
@cursor_ai
Tweet

Una publicación de @cursor_ai sobre diseñar con Cursor. Lee el original en X.

8.8K
Read on X
Un Nuevo Editor Visual: Diseña Directamente en tu Codebase
2:05
Video
Official

Un Nuevo Editor Visual: Diseña Directamente en tu Codebase

C
Cursor ·101.6K views ·
Tutorial

Modo de Diseño de Cursor (Edición Visual) Explicado

Análisis profundo de Builder.io sobre el Modo de Diseño de Cursor — qué hace bien la barra lateral al estilo Figma para editar tu aplicación React en vivo, y las limitaciones honestas (sin selección múltiple, sin deshacer fácil, ediciones limitadas por LLM) versus una herramienta de diseño real.

Builder.io Blog
Tutorial

Cursor Acaba de Eliminar la Entrega de Diseño

Un análisis detallado de cómo el Editor Visual de Cursor colapsa la entrega de diseño al desarrollador — editando la aplicación en vivo visualmente y persistiendo código real y revisable, de modo que no hay especificación separada que traducir.

Stork.AI
¿Es el nuevo Visual Editor de Cursor un asesino de Figma? Tutorial
10:00
Video

¿Es el nuevo Visual Editor de Cursor un asesino de Figma? Tutorial

A
AI Coding ·
El Editor Visual de Cursor — Modifica Layouts Visualmente
9:41
Video

El Editor Visual de Cursor — Modifica Layouts Visualmente

D
DesignCourse ·14.3K views ·
Open Design

Proyecto hermano de nexu.io

Open Design — el agente de diseño de código abierto que se integra con Cursor

Tu agente de programación actual — Cursor · Claude Code · Codex · Gemini · OpenCode · Qwen — se convierte en el motor de diseño, impulsado por 137 skills combinables y 150 sistemas portables DESIGN.md.

Open Design — design with the agent on your laptop