Onlook

Разработка интерфейсов обычно означает вечную беготню между дизайнером и кодом: то в Figma покликать, то в редакторе свёрстать, то снова в макет вернуться. Onlook решает эту проблему радикально - собирает React-проекты локально прямо в визуальном редакторе, а код генерирует по ходу дела.

Визуальная сборка с живым кодом

Инструмент работает как гибрид между дизайн-редактором и средой разработки. Можно кликать, таскать элементы, менять стили - и сразу получать готовый код компонентов. Это особенно удобно для тех, кто умеет программировать, но не хочет каждый раз вручную прописывать отступы и размеры. Собрал макет визуально, получил структуру проекта - дальше допиливаешь логику в привычном редакторе.

Экспорт в редактор кода или Figma

Результат можно выгрузить в два направления: либо сразу в VSCode и продолжить разработку, либо обратно в Figma, если нужно показать команде или заказчику. Такая двусторонняя интеграция закрывает проблему потерянных правок: дизайнеры видят актуальную версию, разработчики не переделывают вёрстку с нуля после каждого изменения в макете.

Бесплатный и открытый код

Проект распространяется бесплатно и выложен на GitHub с открытым исходником. Можно развернуть локально, подкрутить под свои задачи или просто использовать как есть. Для небольших команд и сольных разработчиков это возможность не платить за коммерческие решения и при этом получить рабочий инструмент для прототипирования.

Сервис подойдёт тем, кто устал переключаться между Figma и редактором кода, хочет ускорить вёрстку интерфейсов и не терять время на синхронизацию макетов с реальным приложением. Особенно полезен для React-разработчиков, которым нужен быстрый способ визуально собрать компонент и сразу получить его код.