Onlook
Onlook · Programación
Onlook es un editor visual de código abierto donde los diseñadores editan el código real de React y Next.js en un lienzo con ayuda de la IA, para que el código sea la fuente de verdad.
Acerca de Onlook
What Is Onlook
Onlook es un editor visual de código que funciona en el navegador. En lugar de exportar una maqueta a un archivo de diseño aparte, carga tu proyecto real de React y Next.js, muestra los componentes en un lienzo infinito y escribe cada cambio directamente en el repositorio. El código como fuente de verdad manda, así que lo que ves en el lienzo es el producto de verdad y no una foto de él.
La herramienta ataca la división que suele frenar a los equipos web. Como herramienta de diseño a código, elimina el salto entre diseño y desarrollo: los diseñadores trabajan en una interfaz visual y los ingenieros incorporan esos cambios al repositorio con el mismo flujo de git que ya usan. Onlook lee tus tokens de diseño, tu tipografía y tus componentes de Storybook, y los aplica para que lo que genera la IA encaje con lo que el equipo ya publica.
Que sea una herramienta de diseño de código abierto también pesa, porque los equipos pueden revisar cómo funciona el editor y adaptarlo a su montaje en vez de confiar en una caja negra.
El mayor límite es el stack. Onlook funciona con proyectos de React y Next.js con estilos de Tailwind CSS. Los equipos que usan Vue, Svelte o HTML a secas no pueden utilizarlo hoy. Además, el uso intensivo de la IA alojada choca con el límite de mensajes del plan gratuito, así que quien depende del asistente casi a diario acaba necesitando un plan de pago o su propio servidor.
Getting Started
- Regístrate en la app alojada en onlook.com, o clona el repositorio de código abierto y ejecútalo por tu cuenta.
- Conecta una cuenta de GitHub e importa un proyecto existente de Next.js y Tailwind CSS, o empieza uno nuevo dentro del editor.
- En el lienzo infinito, selecciona cualquier elemento y edítalo a mano, o describe el cambio en el chat y deja que la IA lo escriba.
- Revisa la vista previa en vivo y el código por debajo a la vez, y luego confirma o sube los cambios por git.
- Usa el historial de versiones para revertir un paso, o publica en un dominio propio cuando el trabajo esté listo.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Onlook.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Diseñadores que trabajan con un equipo de frontend
- Desarrolladores frontend
- Equipos de producto pequeños en startups
- Fundadores que prototipan una landing
Tareas
- Editar componentes de React en vivo sobre un lienzo
- Convertir un ajuste visual en un cambio de código
- Mantener la marca coherente en todas las páginas
- Importar un repositorio existente
- Prototipar e idear una página
Casos de uso
- Pulir un sitio de marketing antes de un lanzamiento
- Probar ideas de maquetación en un producto real
- Incorporar a un diseñador en un proyecto de React
Funciones clave
Edición visual sobre código real
El núcleo de Onlook es una herramienta de diseño Tailwind CSS y un editor visual de React en un mismo lienzo infinito que renderiza tus componentes reales, no una imagen fija. Seleccionas cualquier elemento y lo arrastras, lo redimensionas, lo reordenas o le cambias el estilo. Como las ediciones vuelven a los archivos fuente, lo que mueves en pantalla es lo que se publica. Los diseñadores conservan la libertad de una herramienta de diseño sin perder el vínculo con el repositorio.
IA que edita tus componentes
El asistente de Onlook es un asistente de diseño con IA que lee tus componentes, tus tokens de diseño y tu montaje de Storybook, y luego propone cambios que siguen los patrones del equipo. Puedes editar un elemento tú mismo o pasar la tarea al chat y dejar que escriba el código. A diferencia de los generadores que solo funcionan por chat, mantienes el control visual completo mientras la IA se ocupa de las partes repetitivas.
Importa tu repositorio
Puedes apuntar Onlook a un proyecto existente de Next.js y Tailwind CSS en GitHub y empezar a editarlo enseguida. No hay un formato de archivo propio de Onlook ni una segunda copia del sistema de diseño que mantener, así que el proyecto que traes es el proyecto que publicas.
Cumplimiento del sistema de diseño
El editor rastrea las fuentes, los colores, el espaciado y los patrones de componentes de tu marca, y los aplica al generar. Cada elemento nuevo hereda los mismos tokens, lo que mantiene las páginas dentro de la marca sin una pasada manual para corregir desvíos. Para equipos con un sistema de diseño estricto, esa coherencia importa más que la velocidad de generación.
Colaboración en vivo e historial de versiones
Los equipos pueden compartir un proyecto y trabajar en el mismo lienzo a la vez, igual que ya colaboran en Figma. Un historial de revisiones registra cada cambio para que cualquiera pueda volver a una versión anterior. Esa red de seguridad facilita probar una maqueta atrevida sin miedo a perder un buen trabajo.
Capas dibujables y atajos
Onlook deja trazar divs y texto directamente sobre el diseño para crear el código correspondiente en tiempo real. Los atajos habituales se mantienen desde otras herramientas de diseño, así que la memoria muscular se traslada. Las capas permiten seleccionar elementos anidados con precisión cuando una sección tiene un árbol de componentes denso.
Publicar y autoalojar
El trabajo terminado puede salir a GitHub, a un enlace o a un dominio propio. Como Onlook es de código abierto bajo la licencia Apache 2.0, los equipos también pueden autoalojarlo gratis y mantener cada diseño y cambio de código en su propia infraestructura. La versión alojada añade funciones de equipo como ramas, tematización y SSO con precio a medida.
Ventajas y desventajas
Ventajas
- El código sigue siendo la fuente de verdad, así que no hay un archivo de diseño aparte que mantener al día.
- Es de código abierto bajo Apache 2.0, con una opción autoalojada gratis que corre en tus propios servidores.
- La IA edita siguiendo tus componentes y tokens existentes, así que el resultado parece trabajo del propio equipo.
- La colaboración en vivo y el historial de versiones encajan con la forma en que ya trabajan diseño y desarrollo.
Desventajas
- Solo admite proyectos de React y Next.js con estilos de Tailwind CSS, así que otros frameworks quedan fuera hoy.
- El plan gratuito limita los mensajes de IA, lo que acota lo que puede hacer el asistente sin un plan de pago.
- El plan Teams alojado no tiene precio público, así que hay que contactar con ventas antes de comparar costes.
- Montar una instancia autoalojada pide cierta soltura técnica para desplegar una aplicación web.
Preguntas frecuentes
Onlook es un editor visual para editar código real de React y Next.js. Construyes, das estilo y prototipas interfaces web en un lienzo, y los cambios acaban en el repositorio y no en un archivo de diseño independiente.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con Onlook.
Alternativas a Onlook
GitGlow
GitGlow · Programación · ProductividadGitGlow es un cliente Git de escritorio que reúne tu código y los cambios de tus agentes de IA en una sola revisión, para que sepas qué va a salir de tu máquina antes de publicarlo.
Together Link
Together AI · ProgramaciónTogether Link es una herramienta gratuita y de código abierto de Together AI que conecta agentes de código como Claude Code y Codex con modelos abiertos, con enrutador automático y recibo de coste por sesión.
HeyPi
Proactive Intelligence Ltd. · Programación · Productividad · NegociosHeyPi es una plataforma de reuniones con IA en la que un asistente llamado Pi escucha la llamada, recuerda el contexto de sesiones anteriores, trabaja dentro de tus aplicaciones y crea páginas, presentaciones y vídeos al momento.