Onlook — Design & Kreatives

Was ist Onlook?

Onlook ist ein visueller Editor für Code, oft als „Cursor für Designer" beschrieben. Er ermöglicht es Teams, direkt in ihrem echten Codebase gemeinsam zu designen und macht den Code zur Quelle der Wahrheit. Statt in einem separaten Designtool zu arbeiten, können Sie Prototypen erstellen, Ideen entwickeln und Websites von Grund auf bauen – während Sie den tatsächlichen Frontend-Code bearbeiten.

Welches Problem löst es?

Traditionell arbeiten Design und Entwicklung getrennt – Designer erstellen Mockups in Figma, Entwickler bauen den Code neu auf. Onlook überbrückt diese Kluft, indem beide Rollen an derselben Datei arbeiten können. Das eliminiert Reibungsverluste bei der Übergabe und stellt sicher, dass das Designsystem immer mit der Implementierung synchron ist.

Für wen ist es geeignet?

Es ist ideal für Produktteams, insbesondere solche mit React-Web-Apps, in denen Designer und Entwickler eng zusammenarbeiten. Wenn Sie die UI schnell iterieren möchten, ohne Ihre Codebasis zu verlassen, oder ein Entwickler sind, der visuell bearbeiten möchte, ohne jede Klasse zu schreiben, ist Onlook genau richtig. Es ist nicht für nicht-technische Nutzer gedacht, die ein vollständig gehostetes Designtool ohne Code benötigen.

Praktische Anwendungsfälle

Teams nutzen Onlook, um responsive Layout-Probleme zu beheben (wie das Masonry-Beispiel in der Demo), Design-Tokens zu erstellen und zu verwalten, ein komplettes Projekt zu themen und sogar neue Features von Grund auf zu bauen. Es wird auch für Prototyping und Mockups verwendet, mit der Möglichkeit, Code auf den lokalen Rechner zu exportieren oder auf GitHub zu veröffentlichen.

• Visuelles Bearbeiten im echten Code – Manipulieren Sie direkt Ihren React-Komponentenbaum und Ihre Styles; Änderungen werden in Ihrem tatsächlichen Codebase reflektiert.
• KI-Unterstützung – Nutzen Sie natürliche Sprachbefehle, um die UI zu ändern, z. B. responsive Breakpoints zu fixen oder neue Features hinzuzufügen.
• Projektvorlagen – Speichern und wiederverwenden Sie ganze Projekte als Vorlagen für Ihr Team für konsistente Ausgangspunkte.
• Branching & Versionskontrolle – Erstellen und verwalten Sie Branches für Ihre Projekte mit vollständiger Versionshistorie, integriert mit Git.
• Theming & Branding – Zentralisieren Sie Design-Tokens, Farbpaletten und Typografie-Management für konsistentes Branding.
• Wie ein Designtool aufgebaut – Navigieren Sie durch Ihren Komponentenbaum mit präziser Kontrolle über jedes Element, genau wie in einer Design-App.
• Erweiterte Sicherheit (für Teams) – SSO (SAML/OAuth), erweiterte Sicherheitskontrollen, Audit-Logs und Admin-Kontrollen für Enterprise-Anforderungen.

Preise von Onlook: Kostenlos (Self-Hosted) | Individuell für Teams. Abrechnungsmodell: Free.

Zum Vergleich: Der mediane Einstiegspreis in Design & Kreatives liegt bei $12/Monat, gemessen an 274 Tools, die wir erfassen. Den vollständigen SaaS Pricing Index ansehen →

Kostenlos (Self-Hosted)

Onlook ist Open Source und kann über GitHub kostenlos selbst gehostet werden. Das gibt Ihnen volle Kontrolle und ist ideal für Einzelpersonen oder Teams, die ihr eigenes Deployment verwalten möchten.

Für Teams

Individuelle Preise, zugeschnitten auf die Bedürfnisse Ihres Teams. Enthält Projektvorlagen, Branching & Versionskontrolle, Theming & Branding, erweiterte Sicherheit (SSO, Audit-Logs) und mehr. Kontaktieren Sie uns für eine Demo.

Onlook befindet sich derzeit in der geschlossenen Beta – buchen Sie eine Demo, um frühen Zugang zu erhalten.

Finde das richtige Tool für dich mit unserem KI-Berater →