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.