Qué

Onlook es un lienzo de diseño visual que se conecta directamente a una base de código frontend existente. Está creado para diseñadores y equipos de producto que quieren trabajar con componentes de UI reales en lugar de maquetas estáticas, y luego convertir los cambios visuales en pull requests que los ingenieros puedan revisar y fusionar.

El producto parece estar posicionado entre las herramientas de diseño y las herramientas para desarrolladores. Su flujo de trabajo principal permite a los usuarios diseñar en un lienzo infinito, inspeccionar capas y componentes, usar IA con contexto del proyecto y realizar cambios sobre aplicaciones reales basadas en React, Next.js o CSS sin reconstruir pantallas por separado en una herramienta de diseño tradicional.

Funcionalidades

Edición visual en un lienzo infinito — Los usuarios pueden arrastrar, redimensionar y organizar elementos de la interfaz visualmente mientras ven cómo el código subyacente se actualiza en paralelo.
Funciona con componentes reales — Los diseñadores usan los mismos botones, tarjetas, diseños y elementos del sistema de diseño que ya existen en la base de código, lo que reduce la traducción entre diseño e implementación.
IA con contexto del proyecto — El chat puede hacer referencia a imágenes, maquetas y documentación para que las sugerencias de la IA se basen en lo que el usuario está viendo y no en prompts genéricos.
Restricciones del sistema de diseño — La IA está limitada por los colores, tipografías y tokens existentes para ayudar a que los cambios generados se mantengan alineados con el sistema de marca actual.
Conexión con la base de código y flujo de PR — Onlook se conecta a aplicaciones React, Next.js y apps con CSS ya existentes, y permite enviar cambios a GitHub como pull requests en lugar de exportar especificaciones de handoff.
Herramientas de colaboración en equipo — Los lienzos compartidos, los comentarios espaciales y el historial de revisiones permiten el trabajo de diseño colaborativo sobre superficies reales del producto.

Consejos útiles

Evalúa Onlook principalmente en equipos que ya cuentan con una biblioteca de componentes definida, ya que su valor depende de trabajar con UI real existente en lugar de generar un sistema de diseño completamente nuevo.
Confirma qué tan bien está estructurada la base de código actual antes de implementarlo; los componentes inconsistentes o un uso débil de tokens de diseño pueden limitar la calidad de la edición visual y la guía de la IA.
Úsalo para acortar los ciclos de handoff entre diseño e ingeniería, pero mantén la revisión de ingeniería, porque el producto está diseñado para enviar PR, no para omitir la revisión de código.
Prueba primero su encaje en un flujo de trabajo acotado, como páginas de marketing, dashboards o herramientas internas, donde la reutilización de componentes sea alta y la iteración visual sea frecuente.
La página indica compatibilidad con React, Next.js y “cualquier app con CSS”, por lo que los equipos con otros stacks frontend deberían validar cuidadosamente la compatibilidad antes de una adopción más amplia.