Onlook

Le cœur d'Onlook, c'est un outil de design Tailwind CSS et un éditeur visuel React réunis sur un même canevas infini qui affiche vos vrais composants, pas une image figée. Vous sélectionnez un élément et vous le déplacez, le redimensionnez, le réorganisez ou le restylez. Comme les modifications repartent dans les fichiers source, ce que vous bougez à l'écran est ce qui est publié. Les designers gardent la liberté d'un outil de design sans perdre le lien avec le dépôt.

L'assistant d'Onlook est un assistant de design IA qui lit vos composants, vos tokens de design et votre configuration Storybook, puis propose des changements alignés sur les habitudes de l'équipe. Vous pouvez modifier un élément vous-même ou confier la tâche au chat et le laisser écrire le code. Contrairement aux générateurs qui passent uniquement par le chat, vous gardez le contrôle visuel complet pendant que l'IA gère les parties répétitives.

Vous pouvez pointer Onlook vers un projet Next.js et Tailwind CSS existant sur GitHub et commencer à l'éditer aussitôt. Il n'y a pas de format de fichier propre à Onlook ni de seconde copie du design system à maintenir: le projet que vous amenez est celui que vous publiez.

L'éditeur suit les polices, les couleurs, les espacements et les motifs de composants de votre marque, puis les applique à la génération. Chaque nouvel élément hérite des mêmes tokens, ce qui garde les pages dans la charte sans passe manuelle pour corriger les dérives. Pour les équipes dotées d'un design system strict, cette cohérence compte plus que la vitesse de génération.

Les équipes peuvent partager un projet et travailler sur le même canevas en temps réel, comme elles le font déjà dans Figma. Un historique des révisions enregistre chaque changement, donc n'importe qui peut revenir à une version antérieure. Ce filet de sécurité encourage à tester une mise en page audacieuse sans craindre de perdre un bon travail.

Onlook permet de tracer des divs et du texte directement sur le design pour créer le code correspondant en temps réel. Les raccourcis habituels viennent des autres outils de design, la mémoire musculaire se transfère donc. Les calques permettent de sélectionner des éléments imbriqués avec précision quand une section a un arbre de composants dense.

Le travail terminé peut partir vers GitHub, un lien ou un domaine personnalisé. Onlook étant open source sous licence Apache 2.0, les équipes peuvent aussi l'auto-héberger gratuitement et garder chaque design et changement de code sur leur propre infrastructure. La version hébergée ajoute des fonctions d'équipe comme les branches, le thème et le SSO, à un tarif sur devis.