Configura Cursor para trabajo de diseño

Instala Cursor, añade dos ayudantes de diseño gratuitos de esta tienda — un comando de vista previa responsive y una skill de wireframe fantasma — y tendrás un editor de IA afinado para trabajo de diseño en unos diez minutos.

Qué es Cursor, para un diseñador.

Cursor es un editor de código con un agente de IA integrado: describe lo que quieres en el chat y él escribe y edita los archivos ante ti. Para los diseñadores eso significa prototipos funcionales en lugar de mockups estáticos — HTML y CSS reales que puedes abrir en un navegador, redimensionar y entregar. El nivel Hobby es gratis; Pro cuesta $20 al mes.

Instala y abre un proyecto.

  1. Descarga Cursor desde cursor.com e instálalo — hay versiones para macOS, Windows y Linux.
  2. Inicia sesión o crea una cuenta; el nivel gratuito Hobby no necesita tarjeta de crédito.
  3. Abre una carpeta — un proyecto existente o una vacía para prototipos.
  4. Abre el panel de chat y pide algo pequeño para confirmar que el agente responde.

Añade los dos ayudantes de diseño gratuitos.

Ambos son descargas gratuitas de esta tienda y tardan un minuto cada uno en añadirse.

  • Comando Responsive Preview — un comando slash /responsive-preview que captura tu página en anchos móvil, tablet y escritorio, y devuelve una auditoría de layout de aprobado/aviso/fallo en el chat.
  • Skill Ghost Wireframe — genera wireframes de UI esqueleto con roles fantasma consistentes, para que puedas bosquejar un layout antes de darle estilo.

Ejecuta tu primera pasada de diseño.

  1. Abre una página de tu proyecto — o pide al agente que cree una sencilla.
  2. Ejecuta el comando /responsive-preview sobre ella.
  3. Lee la auditoría: el desbordamiento, los objetivos de toque apretados y los problemas de breakpoint aparecen como aviso o fallo.
  4. Pide al agente que arregle lo que falló y vuelve a ejecutar el comando.

Qué cuesta.

El nivel Hobby es gratis con solicitudes de agente limitadas — suficiente para aprender el editor. Pro a $20 al mes amplía los límites del agente y añade acceso a modelos de vanguardia y agentes en la nube, que es donde recae el trabajo de prototipado habitual. Si te decides por Pro, puedes usar este enlace de referido de Cursor para un 50 por ciento de descuento en tu primer mes. Más detalles en ¿Vale la pena Cursor para diseñadores?

Cuándo Cursor es la herramienta equivocada.

Si nunca quieres ver código — moodboards, exploración visual, mockups para clientes — una herramienta de diseño te sirve mejor que cualquier editor. Y si el objetivo es un sitio de una página en vivo en lugar de un prototipo, una plantilla de Carrd llega ahí sin abrir un editor en absoluto.