# Onlook Editor visual de código web para diseñadores y equipos de producto que trabajan directamente con bases de código reales, con edición de React en vivo, cambios asistidos por IA y alojamiento propio de código abierto. - Findings24: - Sitio web: - Precios: Freemium - Categorías: Asistente de Código IA ## ¿Qué es Onlook? Onlook es un editor visual de código para diseñadores y equipos de producto que quieren trabajar directamente en una base de código real. Combina una experiencia de edición basada en un lienzo con resultados centrados en el código, de modo que el código del proyecto siga siendo la fuente de verdad mientras los equipos diseñan, crean prototipos e iteran. El sitio presenta Onlook en torno a componentes de React en vivo, un lienzo infinito y edición asistida por IA. También destaca el uso en equipo, sistemas de diseño reales como Storybook y la disponibilidad de código abierto, con una opción alojada disponible a través del proceso comercial de la empresa. ## ¿Qué puede hacer Onlook? ### Edición visual en un lienzo infinito Trabaja en un lienzo infinito mientras editas componentes de React en vivo, manteniendo la base de código como fuente de verdad. ### Cambios asistidos por IA Usa el chat para modificar elementos seleccionados y generar asistencia de código directamente en el flujo de edición. ### Colaboración en equipo Colabora con tus compañeros en tiempo real y mantén el trabajo alineado con el mismo código subyacente del producto. ### Alineación con el sistema de diseño Incorpora el sistema de diseño real de tu equipo, incluidos los componentes basados en Storybook, para que el trabajo nuevo coincida con los patrones existentes. ### Ramificaciones y control de versiones Administra ramas y el historial de versiones para que los equipos puedan organizar el trabajo y revisar cambios en distintos proyectos. ### Propiedad del código y opciones de exportación Exporta el trabajo localmente, publícalo en GitHub o alójalo en un enlace, con acceso al código abierto para los equipos que quieran personalizar la herramienta. ## Casos de uso ### Creación de sitios web y prototipos Crea sitios web y prototipos directamente en una base de código real cuando el diseño debe reflejar un trabajo de producto implementable en lugar de maquetas desconectadas. ### Iteración a nivel de componente Usa el lienzo y el flujo de trabajo mediante chat para iterar sobre componentes de React en vivo mientras mantienes visibles los detalles de implementación. ### Colaboración basada en el sistema de diseño Incorpora un sistema de diseño compartido al editor para que los equipos puedan reutilizar componentes establecidos y mantener el trabajo nuevo coherente con los patrones de interfaz existentes. ### Flujo de equipo y edición con versiones Usa las ramas, el historial de versiones y las funciones de colaboración para revisar cambios con tus compañeros y gestionar el trabajo en paralelo en el mismo proyecto. ### Entrega con alojamiento propio y control del código Aloja el producto de código abierto por tu cuenta o exporta el trabajo a una máquina local, GitHub o un enlace alojado cuando necesites tener la propiedad del código. ## Preguntas frecuentes ### ¿Qué es Onlook? Onlook es un editor visual de código abierto para sitios web. La fuente lo describe como una forma para que los equipos creen y diseñen prototipos y sitios web sin necesidad de conocimientos de programación, mientras siguen trabajando con el código como fuente de verdad. ### ¿Para qué puedo usar Onlook? La fuente indica que puedes usar Onlook para crear sitios web, prototipos, interfaces de usuario y otros trabajos visuales, como presentaciones y maquetas. Se presenta como una herramienta para diseñar directamente en bases de código reales. ### ¿Existe una versión gratuita de Onlook? Sí. Onlook puede alojarse por cuenta propia de forma gratuita en GitHub. Para la versión en la nube alojada, el sitio pide a los usuarios que se pongan en contacto con el equipo o reserven una demostración. ### ¿Cómo uso Onlook? Onlook indica que puedes diseñar en un lienzo infinito, seleccionar elementos individuales y usar el chat para modificarlos. El producto destaca que el código sigue siendo la fuente de verdad durante todo el flujo de trabajo. ### ¿Qué opciones de precios ofrece Onlook? La página de precios incluye un nivel Starter gratuito para particulares y equipos pequeños, y una opción Teams con precios personalizados. También indica que los usuarios con planes de pago existentes pueden seguir usando Onlook. ## Datos rápidos - **Categoría**: Editor visual de código - **Usuarios principales**: Diseñadores, equipos de producto y desarrolladores - **Plataforma**: Web - **Dominio de origen**: onlook.com - **Precios**: Opción gratuita con alojamiento propio; Teams usa precios personalizados - **Flujo de trabajo**: Lienzo infinito, selección de elementos y ediciones mediante chat