Inicio / Tutorial · ✦ Oficial

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

Cursor Team · Cursor Blog ·

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.

Resumen del editor

The visual editor brings web app, codebase, and visual editing into one window — edit your live app directly, then let the agent persist the changes as real, reviewable code.

En este artículo

  • Drag-and-drop layout editing across the DOM tree
  • Visual style controls: spacing, color, typography, shadows, radius
  • Design tokens and design-system integration
  • React component state testing (loading, error, disabled)
  • Point and prompt: describe a change in natural language
  • The Apply step: client-side overrides become real code

Source: Cursor Blog

Leer original El contenido reside en el sitio del editor original.
Seleccionado para la comunidad de Cursor-Design como referencia de primera mano sobre diseñar con Cursor.