
Onlook
Cursor for Designers
Explore the docs »
👨💻👩💻👨💻 We're hiring engineers in SF! 👩💻👨💻👩💻
View Demo · Report Bug · Request Feature
中文 | Español | Deutsch | français | Português | Русский | 日本語 | 한국어
Cursor для дизайнеров – визуально-ориентированный редактор кода с открытым исходным кодом
Создавайте сайты, прототипы и дизайны с помощью ИИ в Next.js + TailwindCSS. Вносите правки напрямую в DOM браузера через визуальный редактор. Дизайньте в реальном времени с помощью кода. Открытая альтернатива таким сервисам, как Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow и другим.
🚧 🚧 🚧 Onlook для веба всё ещё в разработке 🚧 🚧 🚧
Мы активно ищем участников, которые помогут сделать Onlook для веба потрясающим инструментом для создания проектов по промптам. Ознакомьтесь со списком открытых задач, чтобы увидеть все предлагаемые функции (и известные проблемы), и присоединяйтесь к нашему Discord, чтобы сотрудничать с сотнями других разработчиков.
Что можно делать с Onlook:
- Создавайте Next.js приложение за секунды
- Начните с текста или изображения
- Используйте готовые шаблоны
- Импортируйте из Figma
- Начните с GitHub репозитория
- Визуальное редактирование приложения
- Интерфейс, похожий на Figma
- Превью приложения в реальном времени
- Управление бренд-ассетами и токенами
- Создание и навигация по страницам
- Просмотр слоёв – Ранее доступно в Onlook Desktop
- Обнаружение и использование компонентов – Ранее доступно в Onlook Desktop
- Управление изображениями проекта – Ранее доступно в Onlook Desktop
- Инструменты разработки
- Редактор кода в реальном времени
- Сохранение и восстановление из контрольных точек
- Выполнение команд через CLI
- Интеграция с маркетплейсом приложений
- Локальное редактирование кода – Ранее доступно в Onlook Desktop
- Развертывание приложения за секунды
- Генерация ссылок для общего доступа
- Подключение собственного домена
- Совместная работа в команде
- Редактирование в реальном времени
- Оставление комментариев
Onlook для Desktop (также известный как Onlook Alpha)
Мы находимся на ранней стадии предпросмотра Onlook Web. Если вы ищете загружаемое десктопное приложение на Electron, оно перемещено в Onlook Desktop.
Почему мы переходим на веб? Читайте о нашем решении: Миграция с Electron на Web
Начало работы
Скоро будет доступно через хостинг приложения или локальный запуск.
Использование
Onlook работает с любым проектом на Next.js + TailwindCSS. Импортируйте свой проект в Onlook или начните с нуля прямо в редакторе.
Используйте AI-чат для создания или редактирования вашего проекта. В любой момент вы можете кликнуть правой кнопкой на элемент, чтобы открыть его точное расположение в коде.
Рисуйте новые div-элементы и перетаскивайте их внутри родительских контейнеров.

Просматривайте код параллельно с дизайном вашего сайта.

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

Документация
Полную документацию можно найти на docs.onlook.com
Чтобы узнать, как внести свой вклад, посетите раздел Contributing to Onlook в нашей документации.
Как это работает

- Когда вы создаете приложение, мы загружаем код в веб-контейнер.
- Контейнер запускается и обслуживает код.
- Наш редактор получает ссылку на превью и отображает его в iFrame.
- Редактор читает и индексирует код из контейнера.
- Мы инструментируем код, чтобы сопоставить элементы с их местом в коде.
- При редактировании элемента мы сначала изменяем его в iFrame, а затем в коде.
- Наш AI-чат также имеет доступ к коду и инструменты для его понимания и редактирования.
Эта архитектура теоретически может масштабироваться на любой язык или фреймворк, который декларативно отображает DOM-элементы (например, jsx/tsx/html). Сейчас мы сосредоточены на оптимальной работе с Next.js и TailwindCSS.
Для полного ознакомления с архитектурой изучите наши Architecture Docs.
Наш технологический стек
Фронтенд
- Next.js - Full stack
- TailwindCSS - Стилизация
- tRPC - Интерфейс сервера
База данных
Искусственный интеллект
- AI SDK - LLM-клиент
- Anthropic - Провайдер LLM-моделей
- Morph Fast Apply - Провайдер моделей быстрого применения
- Relace - Провайдер моделей быстрого применения
Песочница и хостинг
- CodeSandboxSDK - Песочница для разработки
- Freestyle - Хостинг
Среда выполнения
Вклад в проект
Если у вас есть предложение по улучшению, пожалуйста, сделайте форк репозитория и создайте pull request. Вы также можете открыть issue.
Инструкции и кодекс поведения см. в файле CONTRIBUTING.md.
Участники проекта
Контакты
- Команда: Discord - Twitter - LinkedIn - Email
- Проект: https://github.com/onlook-dev/onlook
- Веб-сайт: https://onlook.com
Лицензия
Распространяется под лицензией Apache 2.0. Подробнее см. в файле LICENSE.md.