Onlook — Diseño y Creatividad

¿Qué es Onlook?

Onlook es un editor visual para código, a menudo descrito como 'Cursor para diseñadores'. Permite a los equipos diseñar juntos directamente en su código real, haciendo que el código sea la fuente de verdad. En lugar de trabajar en una herramienta de diseño independiente, puedes prototipar, idear y crear sitios web desde cero mientras editas el código frontend real.

¿Qué problema resuelve?

Tradicionalmente, el diseño y el desarrollo ocurren en silos: los diseñadores crean maquetas en Figma y los desarrolladores reconstruyen en código. Onlook une esa brecha permitiendo que ambos roles trabajen en el mismo archivo, eliminando la fricción en la entrega y asegurando que el sistema de diseño esté siempre sincronizado con la implementación.

¿Para quién es?

Es ideal para equipos de producto, especialmente aquellos con aplicaciones web en React, donde diseñadores y desarrolladores colaboran estrechamente. Si quieres iterar rápidamente en la interfaz sin salir de tu código, o si eres desarrollador y quieres editar visualmente sin escribir cada clase, Onlook es para ti. No es para usuarios no técnicos que necesiten una herramienta de diseño totalmente alojada sin nada de código.

Casos de uso reales

Los equipos usan Onlook para corregir problemas de diseño responsivo (como el ejemplo de masonry en la demo), crear y gestionar tokens de diseño, tematizar un proyecto completo e incluso crear nuevas funciones desde cero. También se usa para prototipado y maquetas, con la capacidad de exportar código a tu máquina local o publicar en GitHub.

• Edición visual en código real — Manipula directamente tu árbol de componentes y estilos de React, con cambios reflejados en tu código real.
• Asistencia de IA — Usa indicaciones en lenguaje natural para modificar la interfaz, como corregir puntos de interrupción responsivos o añadir nuevas funciones.
• Plantillas de proyecto — Guarda y reutiliza proyectos completos como plantillas en tu equipo para puntos de partida consistentes.
• Ramas y control de versiones — Crea y gestiona ramas para tus proyectos con historial de versiones completo, integrado con Git.
• Tematización y marca — Centraliza tokens de diseño, paletas de colores y gestión de tipografías para una marca coherente.
• Diseñado como una herramienta de diseño — Navega por tu árbol de componentes con control preciso sobre cada elemento, igual que en una aplicación de diseño.
• Seguridad avanzada (para equipos) — SSO (SAML/OAuth), controles de seguridad avanzados, registros de auditoría y controles de administración para necesidades empresariales.

Precios de Onlook: Gratis (autoalojado) | Personalizado para equipos. Modelo de facturación: Free.

Gratis (autoalojado)

Onlook es de código abierto y se puede autoalojar de forma gratuita a través de GitHub. Esto te da control total y es ideal para individuos o equipos que se sienten cómodos gestionando su propio despliegue.

Para equipos

Precio personalizado adaptado a las necesidades de tu equipo. Incluye plantillas de proyecto, ramas y control de versiones, tematización y marca, seguridad avanzada (SSO, registros de auditoría) y más. Contáctanos para una demo.

Onlook está actualmente en beta cerrada: reserva una demo para obtener acceso anticipado.

Encuentra la herramienta ideal para ti con nuestro asesor de IA →