Cursor для дизайнеров – визуально-ориентированный редактор кода с открытым исходным кодом

Создавайте веб-сайты, прототипы и дизайны с помощью ИИ в Next.js + TailwindCSS. Вносите правки напрямую в DOM браузера через визуальный редактор. Дизайньте в реальном времени с помощью кода. Открытая альтернатива Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow и другим.

🚧 🚧 🚧 Onlook для Web всё ещё в разработке 🚧 🚧 🚧

Мы активно ищем участников, которые помогут сделать Onlook для Web потрясающим инструментом для создания проектов по запросу. Полный список предлагаемых функций (и известных проблем) можно найти в открытых issues, а также присоединяйтесь к нашему Discord, чтобы сотрудничать с сотнями других разработчиков.

Что можно делать с Onlook:

Onlook-GitHub-Example

Onlook для Desktop (также известный как Onlook Alpha)

Мы находимся на ранней стадии предварительного просмотра для Onlook Web. Если вы ищете загружаемое desktop-приложение на Electron, оно перемещено в Onlook Desktop.

Почему мы переходим на веб? Читайте о нашем решении: Миграция с Electron на Web

Начало работы

Скоро будет доступно через хостинг-приложение или локальный запуск.

Использование

Onlook работает с любым проектом на Next.js + TailwindCSS. Импортируйте свой проект в Onlook или начните с нуля прямо в редакторе.

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

Рисуйте новые div-элементы и перетаскивайте их внутри родительских контейнеров.

Просматривайте код бок о бок с дизайном сайта.

Используйте панель инструментов редактора Onlook для настройки стилей Tailwind, прямого управления объектами и экспериментов с макетами.

Документация

Полная документация доступна на docs.onlook.com

Инструкции по внесению вклада смотрите в разделе Contributing to Onlook нашей документации.

Как это работает

При создании приложения код загружается в веб-контейнер
Контейнер запускает и обслуживает код
Наш редактор получает ссылку на превью и отображает её в iFrame
Редактор читает и индексирует код из контейнера
Мы инструментируем код, чтобы сопоставить элементы с их местоположением в коде
При редактировании элемента изменения сначала применяются в iFrame, затем в коде
Чат с ИИ также имеет доступ к коду и инструментам для его понимания и редактирования

Эта архитектура теоретически масштабируется на любой язык или фреймворк, который декларативно отображает DOM-элементы (например, jsx/tsx/html). Сейчас мы сосредоточены на Next.js и TailwindCSS.

Подробное описание смотрите в Architecture Docs.