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

Was ist Onlook?

Onlook ist ein Tool für Designer, der Cursor für Designer, das die visuelle Bearbeitung von React-Websites unterstützt und Änderungen in Echtzeit in den Code zurückschreibt. Zu den Funktionen gehören das Erstellen von Websites, das Anpassen von Stilen wie Layout / Farben / Text (z. B. Auto-Layout, Schriftarten, Abstände usw.), das Verwalten von Ebenen und Stilvariablen (Farb- / Textstile), der Import bestehender Projekte oder die Erstellung neuer React-Anwendungen, mit Betonung darauf, dass der Code dem Benutzer gehört, lokal ausgeführt wird, um Sicherheit zu gewährleisten, kompatibel mit bestehenden Build-Prozessen ist und Open Source ist.

Kernfunktionen von Onlook

• Visuelle Bearbeitung: Designer können React- und TailwindCSS-Projekte visuell im Browser bearbeiten, wobei Änderungen sofort im Code widergespiegelt werden.

• Designunterstützung: Hilft Benutzern beim Erstellen, Gestalten und Experimentieren mit Ideen und macht Frontend-Design interaktiver.

• Echtzeit-Synchronisierung: Designänderungen werden in Echtzeit mit dem Code synchronisiert, ohne manuelles Anpassen.

• Lokale Bearbeitung: Alle Vorgänge werden auf dem lokalen Rechner ausgeführt, um Code-Sicherheit und Datenschutz zu gewährleisten.

• Prozesskompatibilität: Es müssen keine neuen Komponenten hinzugefügt oder Migrationen durchgeführt werden, wodurch eine nahtlose Integration in bestehende Entwicklungsprozesse möglich ist.

Anwendungsfälle von Onlook

• Schnelles Prototyping: UI-Prototypen in einer React-Umgebung entwerfen und testen.

• Zusammenarbeit: Designer bearbeiten im Browser, Entwickler übernehmen den Code und integrieren ihn in das Projekt.

• Wartung von Designsystemen: Teams können mit Onlook Designsysteme aktualisieren und pflegen.

Verwendung von Onlook

1. Anwendung herunterladen: Besuchen Sie die offizielle Website oder laden Sie die Desktop-Anwendung herunter, unterstützt Apple Silicon und Windows.

2. Projekt importieren oder neu erstellen: Importieren Sie ein bestehendes React-Projekt oder starten Sie ein neues Projekt mit Onlook.

3. Design anpassen: Passen Sie Layout, Farben, Typografie usw. in der visuellen Oberfläche an; Änderungen werden sofort im Code widergespiegelt.

4. Speichern und Versionskontrolle: Unterstützt Versionskontrolle, sodass Benutzer jederzeit ein Rollback durchführen und Code-Versionen verwalten können.

Häufig gestellte Fragen

Frage: Was ist der zentrale Unterschied zwischen Onlook und herkömmlichen Designtools (wie Figma)?

Onlook ist nicht nur ein Designtool, sondern kann visuelle Änderungen auch in Echtzeit in lauffähigen React-Code umwandeln und so direkt an den Entwicklungsprozess anknüpfen, während herkömmliche Tools manuelles Ausschneiden und Codieren erfordern. Darüber hinaus kann es bei der Erzeugung von Interaktionslogik helfen und reduziert so den manuellen Codierungsaufwand.

Frage: Hat der Benutzer die vollständige Kontrolle über den generierten Code?

Ja. Onlook betont, dass der Code dem Benutzer gehört, unterstützt lokale Ausführung und Versionskontrolle (z. B. Git-Rollback), und die Plattform stellt den Code niemals in einer Produktionsumgebung bereit, sodass Benutzer den Code vollständig selbst verwalten können.

Frage: Wie gut ist Onlook mit bestehenden Projekten kompatibel? Müssen Komponenten migriert werden?

Onlook kann bestehende React-Projekte (einschließlich Projekten mit Tailwind-Styling) direkt importieren, ohne dass neue Komponenten hinzugefügt oder der Build-Prozess geändert werden müssen. Es ist mit nativen Entwicklungsumgebungen kompatibel und reduziert so den Lern- und Migrationsaufwand.

Open-Source-Projekt:https://github.com/onlook-dev/onlook