Tutoriales
Guías paso a paso sobre diseñar y prototipar con Cursor, seleccionadas de toda la web.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.