Onlook：一款设计师的Cursor，网站可视化编辑与代码实时同步的工具 166

¿Qué es Onlook?

Onlook es una herramienta orientada a diseñadores, el Cursor de los diseñadores, que admite la edición visual de sitios web en React y escribe las modificaciones en el código en tiempo real. Entre sus funciones se incluyen la construcción de sitios web, el ajuste de estilos como diseño, colores y texto (por ejemplo, diseño automático, fuentes, márgenes, etc.), la gestión de capas y variables de estilo (colores / estilos de texto), soporte para importar proyectos existentes o crear nuevas aplicaciones React. Enfatiza que la propiedad del código pertenece al usuario, la ejecución local para garantizar la seguridad, la compatibilidad con los flujos de trabajo de desarrollo existentes y es de código abierto.

Funciones principales de Onlook

• Edición visual: los diseñadores pueden editar visualmente proyectos de React y TailwindCSS en el navegador, y los cambios se reflejan en el código en tiempo real.

• Diseño asistido: ayuda a los usuarios a construir, diseñar y experimentar ideas, haciendo que el diseño frontend sea más interactivo.

• Sincronización en tiempo real: los cambios de diseño se sincronizan en tiempo real con el código, sin necesidad de ajustes manuales.

• Edición local: todas las operaciones se realizan en la máquina local, garantizando la seguridad y privacidad del código.

• Compatibilidad con flujos de trabajo: no es necesario añadir nuevos componentes ni migrar, se integra perfectamente en los procesos de desarrollo existentes.

Casos de uso de Onlook

• Prototipado rápido: diseñar y probar interfaces en un entorno React, creando rápidamente prototipos de UI.

• Colaboración: los diseñadores editan en el navegador y los desarrolladores obtienen el código y lo integran en el proyecto.

• Mantenimiento del sistema de diseño: los equipos actualizan y mantienen el sistema de diseño a través de Onlook.

Cómo usar Onlook

1. Descargar la aplicación: visita el sitio web oficial o descarga la aplicación de escritorio, compatible con Apple Silicon y Windows.

2. Importar o crear un proyecto: importa un proyecto React existente o comienza uno nuevo desde Onlook.

3. Ajustar el diseño: ajusta el diseño, los colores, la tipografía, etc. en la interfaz visual; las modificaciones se reflejan en el código en tiempo real.

4. Guardar y control de versiones: admite control de versiones, lo que permite a los usuarios revertir cambios en cualquier momento y mantener las versiones del código.

Preguntas frecuentes

Pregunta: ¿Cuál es la diferencia esencial entre Onlook y las herramientas de diseño tradicionales (como Figma)?

Onlook no es solo una herramienta de diseño, sino que también transforma las modificaciones visuales en código React ejecutable en tiempo real, conectando directamente con el flujo de desarrollo, mientras que las herramientas tradicionales requieren recorte manual y codificación. Además, sus funciones pueden ayudar a generar lógica de interacción, reduciendo la cantidad de codificación manual.

Pregunta: ¿El usuario tiene control total sobre el código generado?

Sí. Onlook enfatiza que la propiedad del código pertenece al usuario, soporta ejecución local y control de versiones (como rollback con Git), y la plataforma nunca despliega el código en entornos de producción, por lo que el usuario puede gestionar el código de forma totalmente autónoma.

Pregunta: ¿Qué tan compatible es Onlook con proyectos existentes? ¿Es necesario migrar componentes?

Onlook puede importar directamente proyectos React existentes (incluidos proyectos que usan estilos de Tailwind), sin necesidad de añadir nuevos componentes ni modificar el flujo de trabajo de desarrollo, siendo compatible con entornos de desarrollo nativos y reduciendo los costes de aprendizaje y migración.

Proyecto de código abierto:https://github.com/onlook-dev/onlook