Onlook — Design & Création

Qu'est-ce qu'Onlook ?

Onlook est un éditeur visuel pour le code, souvent décrit comme « Cursor pour les designers ». Il permet aux équipes de concevoir ensemble directement dans leur codebase réel, faisant du code la source de vérité. Au lieu de travailler dans un outil de conception séparé, vous pouvez prototyper, idéer et créer des sites Web à partir de zéro tout en modifiant le code frontend réel.

Quel problème résout-il ?

Traditionnellement, la conception et le développement se font en silos—les designers créent des maquettes dans Figma, les développeurs reconstruisent en code. Onlook comble ce fossé en permettant aux deux rôles de travailler sur le même fichier, éliminant les frictions de transfert et garantissant que le système de conception est toujours en phase avec l'implémentation.

À qui s'adresse-t-il ?

Il convient le mieux aux équipes produit, en particulier celles qui travaillent sur des applications Web React, où designers et développeurs collaborent étroitement. Si vous souhaitez itérer rapidement sur l'interface utilisateur sans quitter votre codebase, ou si vous êtes un développeur qui souhaite éditer visuellement sans écrire chaque classe, Onlook est fait pour vous. Il n'est pas destiné aux utilisateurs non techniques qui ont besoin d'un outil de conception entièrement hébergé sans aucune programmation.

Cas d'utilisation réels

Les équipes utilisent Onlook pour corriger les problèmes de mise en page réactive (comme l'exemple de la maçonnerie dans la démo), créer et gérer des jetons de conception, thème l'ensemble d'un projet, et même créer de nouvelles fonctionnalités à partir de zéro. Il est également utilisé pour le prototypage et les maquettes, avec la possibilité d'exporter le code vers votre machine locale ou de publier sur GitHub.

• Édition visuelle en code réel — Manipulez directement votre arbre de composants React et vos styles, avec des modifications reflétées dans votre codebase réel.
• Assistance IA — Utilisez des invites en langage naturel pour modifier l'interface utilisateur, comme corriger les points de rupture réactifs ou ajouter de nouvelles fonctionnalités.
• Modèles de projet — Enregistrez et réutilisez des projets entiers comme modèles dans votre équipe pour des points de départ cohérents.
• Branches et contrôle de version — Créez et gérez des branches pour vos projets avec un historique de versions complet, intégré à Git.
• Thème et image de marque — Centralisez les jetons de conception, les palettes de couleurs et la gestion de la typographie pour une image de marque cohérente.
• Conçu comme un outil de conception — Naviguez dans votre arbre de composants avec un contrôle précis sur chaque élément, comme dans une application de conception.
• Sécurité avancée (pour les équipes) — SSO (SAML/OAuth), contrôles de sécurité avancés, journaux d'audit et contrôles d'administration pour les besoins de l'entreprise.

Tarifs de Onlook : Gratuit (auto-hébergé) | Sur mesure pour les équipes. Modèle de facturation : Free.

À titre de comparaison : le prix de départ médian dans Design & Création est de $12/mois, mesuré sur 274 outils que nous suivons. Voir le SaaS Pricing Index complet →

Gratuit (auto-hébergé)

Onlook est open-source et peut être auto-hébergé gratuitement via GitHub. Cela vous donne un contrôle total et est idéal pour les individus ou les équipes à l'aise avec la gestion de leur propre déploiement.

Pour les équipes

Tarification personnalisée adaptée aux besoins de votre équipe. Inclut les modèles de projet, les branches et le contrôle de version, le thème et l'image de marque, la sécurité avancée (SSO, journaux d'audit), et plus encore. Contactez-nous pour une démo.

Onlook est actuellement en bêta fermée—réservez une démo pour obtenir un accès anticipé.

Trouvez l’outil qu’il vous faut avec notre conseiller IA →