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

Qu'est-ce qu'Onlook ?

Onlook est un outil destiné aux designers, le Cursor des designers, qui prend en charge l'édition visuelle des sites React et l'écriture des modifications dans le code en temps réel. Ses fonctionnalités incluent la construction de sites web, l'ajustement de la mise en page, des couleurs, du texte et d'autres styles (comme la mise en page automatique, les polices, les marges, etc.), la gestion des calques et des variables de style (couleurs, styles de texte), la prise en charge de l'importation de projets existants ou la création de nouvelles applications React, en mettant l'accent sur la propriété du code qui appartient à l'utilisateur, une exécution locale garantissant la sécurité, la compatibilité avec les processus de construction existants et l'open source.

Fonctionnalités principales d'Onlook

• Édition visuelle : les designers peuvent éditer visuellement des projets React et TailwindCSS dans le navigateur, les modifications se reflétant en temps réel dans le code.

• Conception assistée : aide les utilisateurs à construire, concevoir et expérimenter des idées, rendant la conception frontale plus interactive.

• Synchronisation en temps réel : les modifications de conception sont synchronisées en temps réel avec le code, sans ajustement manuel.

• Édition locale : toutes les opérations sont effectuées sur la machine locale, garantissant la sécurité et la confidentialité du code.

• Compatibilité des processus : aucune nécessité d'ajouter de nouveaux composants ou de migrer, intégration transparente aux processus de développement existants.

Cas d'utilisation d'Onlook

• Prototypage rapide : concevoir et tester des interfaces dans un environnement React, créer rapidement des prototypes d'UI.

• Collaboration : les designers éditent dans le navigateur, les développeurs récupèrent le code et l'intègrent au projet.

• Maintenance du design system : les équipes mettent à jour et maintiennent le design system via Onlook.

Comment utiliser Onlook

1. Télécharger l'application : visiter le site officiel ou télécharger l'application de bureau, prise en charge d'Apple Silicon et de Windows.

2. Importer ou créer un nouveau projet : importer un projet React existant ou démarrer un nouveau projet depuis Onlook.

3. Ajuster la conception : ajuster la mise en page, les couleurs, la typographie, etc. dans l'interface visuelle, les modifications se reflétant en temps réel dans le code.

4. Sauvegarde et contrôle de version : prise en charge du contrôle de version, les utilisateurs peuvent revenir en arrière à tout moment et maintenir les versions du code.

Questions fréquemment posées

Q : Quelle est la principale différence entre Onlook et les outils de conception traditionnels (comme Figma) ?

Onlook n'est pas seulement un outil de conception, il peut également transformer les modifications visuelles en code React exécutable en temps réel, s'intégrant directement au processus de développement, alors que les outils traditionnels nécessitent une découpe manuelle et du codage. Ses fonctionnalités peuvent également aider à générer la logique d'interaction, réduisant ainsi la quantité de codage manuel.

Q : L'utilisateur a-t-il le contrôle total sur le code généré ?

Oui. Onlook souligne que la propriété du code appartient à l'utilisateur, prend en charge l'exécution locale, le contrôle de version (comme le retour en arrière avec Git), et la plateforme ne déploie jamais le code en environnement de production, l'utilisateur peut gérer le code de manière totalement autonome.

Q : Quelle est la compatibilité d'Onlook avec les projets existants ? Faut-il migrer des composants ?

Onlook peut importer directement des projets React existants (y compris les projets utilisant des styles Tailwind), sans qu'il soit nécessaire d'ajouter de nouveaux composants ou de modifier le processus de construction, compatible avec l'environnement de développement natif, réduisant ainsi les coûts d'apprentissage et de migration.

Projet open source :https://github.com/onlook-dev/onlook