Cursor para Diseñadores – Un Editor de Código Visual y de Código Abierto

Crea sitios web, prototipos y diseños con IA en Next.js + TailwindCSS. Realiza ediciones directamente en el DOM del navegador con un editor visual. Diseña en tiempo real con código. Una alternativa de código abierto a Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow, etc.

🚧 🚧 🚧 Onlook para Web aún está en desarrollo 🚧 🚧 🚧

Estamos buscando activamente colaboradores para ayudar a hacer de Onlook para Web una experiencia increíble de construcción mediante prompts. Consulta los issues abiertos para ver una lista completa de las funciones propuestas (y problemas conocidos), y únete a nuestro Discord para colaborar con cientos de otros creadores.

Lo que puedes hacer con Onlook:

Onlook-GitHub-Example

Onlook para Escritorio (también conocido como Onlook Alpha)

Estamos en vista previa temprana de Onlook Web. Si buscas la aplicación de escritorio descargable (electron), se ha trasladado a Onlook Desktop.

¿Por qué nos estamos moviendo a la web? Lee sobre nuestra decisión: Migración de Electron a Web

Primeros Pasos

Próximamente disponible con una aplicación alojada o ejecutando localmente.

Uso

Onlook funciona con cualquier proyecto Next.js + TailwindCSS. Importa tu proyecto en Onlook o comienza desde cero dentro del editor.

Usa el chat de IA para crear o editar un proyecto en el que estés trabajando. En cualquier momento, puedes hacer clic derecho en un elemento para abrir su ubicación exacta en el código.

Dibuja nuevos divs y reorganízalos dentro de sus contenedores padres arrastrando y soltando.

Visualiza el código junto al diseño de tu sitio.

Utiliza la barra de herramientas del editor de Onlook para ajustar estilos Tailwind, manipular objetos directamente y experimentar con diseños.

Documentación

Para la documentación completa, visita docs.onlook.com.

Para saber cómo contribuir, consulta Contributing to Onlook en nuestra documentación.

Cómo funciona

Cuando creas una aplicación, cargamos el código en un contenedor web.
El contenedor se ejecuta y sirve el código.
Nuestro editor recibe el enlace de vista previa y lo muestra en un iFrame.
El editor lee e indexa el código del contenedor.
Instrumentamos el código para mapear elementos con su ubicación en el código.
Al editar un elemento, lo modificamos en el iFrame y luego en el código.
Nuestro chat de IA también tiene acceso al código y herramientas para entenderlo y editarlo.

Esta arquitectura puede escalar teóricamente a cualquier lenguaje o framework que muestre elementos DOM de forma declarativa (ej. jsx/tsx/html). Por ahora, nos enfocamos en optimizarlo para Next.js y TailwindCSS.

Para un recorrido detallado, consulta nuestra Documentación de Arquitectura.