Onlook: El Cursor para Diseñadores

Qué es Onlook

Onlook es un editor de código de código abierto, centrado en lo visual y diseñado para diseñadores, descrito como "El Cursor para Diseñadores". Permite a los usuarios crear sitios web, prototipos y diseños con IA en entornos de Next.js + TailwindCSS. Los usuarios pueden realizar ediciones directamente en el DOM del navegador con un editor visual y diseñar en tiempo real con código. Sirve como alternativa de código abierto a plataformas como Bolt.new, Lovable, V0, Replit Agent, Figma Make y Webflow.

Características Principales

• Crear y Gestionar Aplicaciones Next.js
• Comenzar desde descripciones de texto o imagen
• Usar plantillas prediseñadas
• Importar desde Figma

• Comenzar desde repositorios de GitHub

• Herramientas de Edición Visual

• Interfaz de usuario similar a Figma
• Vistas previas de aplicaciones en tiempo real
• Gestión de activos y tokens de marca
• Creación y navegación de páginas
• Navegación por capas
• Detección y uso de componentes

• Gestión de imágenes

• Herramientas de Desarrollo

• Editor de código en tiempo real
• Guardado y restauración de puntos de control
• Interfaz de línea de comandos
• Integración con el mercado de aplicaciones

• Edición de código local

• Implementación y Colaboración

• Implementación con un clic
• Generación de enlaces compartibles
• Integración de dominios personalizados
• Edición colaborativa en tiempo real
• Funcionalidad de comentarios

Cómo Usar Onlook

Onlook funciona con cualquier proyecto de Next.js + TailwindCSS. Los usuarios pueden:

1. Importar un proyecto existente o comenzar desde cero en el editor
2. Usar el chat de IA para crear o editar proyectos
3. Hacer clic derecho en elementos para localizarlos en el código
4. Dibujar nuevos divs y reorganizarlos mediante arrastrar y soltar
5. Previsualizar el código junto con el diseño del sitio
6. Usar la barra de herramientas del editor para ajustar estilos de Tailwind y manipular objetos

Arquitectura Técnica

Al crear una aplicación en Onlook: 1. El código se carga en un contenedor web 2. El contenedor ejecuta y sirve el código 3. El editor recibe y muestra el enlace de vista previa en un iFrame 4. El código se lee e indexa desde el contenedor 5. La instrumentación del código mapea los elementos a su posición en el código 6. Cuando se editan elementos, los cambios se aplican tanto al iFrame como al código 7. El chat de IA tiene acceso al código y herramientas para entender y editar el código

Stack Tecnológico

• Front-end: Next.js, TailwindCSS, tRPC
• Base de datos: Supabase, Drizzle
• IA: AI SDK, Anthropic, Morph Fast Apply, Relace
• Sandbox y alojamiento: CodeSandboxSDK, Freestyle
• Entorno de ejecución: Bun, Docker

Público Objetivo

• Diseñadores web que buscan herramientas de diseño visual con capacidades de código
• Desarrolladores que prefieren la edición visual junto con el código
• Diseñadores de UI/UX en transición al desarrollo
• Equipos que colaboran en proyectos web
• Usuarios de plataformas como Webflow, Figma o herramientas de diseño similares

Enlaces del Proyecto

• Sitio web: https://onlook.com
• Repositorio: https://github.com/onlook-dev/onlook
• Documentación: https://docs.onlook.com

Casos de Uso y Aplicaciones

• Prototipado Rápido: Crear y visualizar diseños web rápidamente
• Del Diseño al Código: Transformar maquetas de diseño en código funcional
• Edición Visual: Realizar cambios en sitios web con una interfaz visual
• Desarrollo Colaborativo: Trabajar en proyectos web en equipo con edición en tiempo real
• Desarrollo Asistido por IA: Usar IA para ayudar a generar y modificar componentes web
• Fines Educativos: Aprender desarrollo web a través de una interfaz visual
• Presentaciones a Clientes: Crear y compartir prototipos interactivos con clientes

El proyecto actualmente está en transición de una aplicación de escritorio basada en Electron a una aplicación web para mejorar la accesibilidad y el conjunto de funciones.