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 contribuidores para ayudar a hacer de Onlook para Web una experiencia increíble de construcción mediante prompts. Consulta los problemas abiertos para ver una lista completa de las funciones propuestas (y problemas conocidos), y únete a nuestro Discord para colaborar con cientos de otros desarrolladores.

Lo que puedes hacer con Onlook:

Onlook-GitHub-Example

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

Estamos en una vista previa temprana para Onlook Web. Si buscas la aplicación de escritorio descargable en 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

Comenzando

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

Uso

Onlook funcionará en cualquier proyecto de Next.js + TailwindCSS, importa tu proyecto a 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 la ubicación exacta del elemento en el código.

Dibuja nuevos divs y reordénalos dentro de sus contenedores padres arrastrando y soltando.

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

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

Documentación

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

Para ver cómo contribuir, visita Contribuir a Onlook en nuestra documentación.

Cómo funciona

Cuando creas una aplicación, cargamos el código en un contenedor web
El contenedor ejecuta y sirve el código
Nuestro editor recibe el enlace de previsualización y lo muestra en un iFrame
Nuestro editor lee e indexa el código del contenedor
Instrumentamos el código para mapear elementos a su lugar en el código
Cuando se edita el elemento, lo editamos en nuestro iFrame y luego en el código
Nuestro chat de IA también tiene acceso al código y herramientas para entender y editar el código

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

Para un recorrido completo, revisa nuestra Documentación de Arquitectura.