Установка Lizard Studio

Lizard Studio — бесплатное расширение для Chrome, которое подключает Claude Code или ChatGPT к странице, которую вы создаёте. Откройте чат рядом со страницей, выберите элемент и попросите агента отредактировать файлы в вашем локальном проекте. Расширение включает инспекцию страницы, аннотации, линейки, пипетку и инструменты отладки браузера.

Это руководство проведёт вас от установки до одного редактирования исходного кода, которое сохранится после обновления страницы. Для примера, который можно скачать, см. руководство по визуальному редактированию в Claude Code.

Что понадобится

Google Chrome на macOS, Windows или Linux.
Node.js и npm. Локальный хост требует Node.js 18 или новее; выбранный вами агент может иметь более высокие требования. Используйте версию Node.js, которую поддерживают оба.
Локальный CLI для Claude Code или ChatGPT, выполненный вход под вашей учётной записью.
Папка локального проекта. Чтобы увидеть правки исходного кода в браузере, запустите сервер разработки этого проекта и откройте его URL.

Расширение и хост бесплатны и распространяются под лицензией MIT. Использование модели подчиняется требованиям, лимитам и тарифам вашего провайдера. Учётная запись Lizard для использования Lizard Studio не требуется.

1. Добавьте расширение для Chrome

Откройте Lizard Studio в Chrome Web Store и нажмите Установить в Chrome. Закрепите расширение, если хотите иметь доступ к нему из панели инструментов.

Панель инструментов предоставляет инструменты дизайна; боковая панель Chrome содержит ваши чаты. Установка из магазина не требует режима разработчика.

2. Установите ваш агент

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

Для Claude Code следуйте официальному руководству по установке. Проверьте установку в терминале:

claude --version

Для ChatGPT в Lizard Studio установите Codex CLI:

npm install -g @openai/codex
codex --version

В интерфейсе Lizard Studio этот агент называется ChatGPT. Пакет и терминальная команда используют название Codex. Это локальный агент программирования, подключённый к вашему проекту; он не встраивает веб-сайт chatgpt.com.

Откройте выбранный агент и завершите процесс входа перед тем, как продолжить. Поддерживаемые пути подключения описаны в README Lizard Studio.

3. Установите локальный хост

Выполните эту команду один раз в терминале:

npx @lizard-build/lizard-studio-host install

Хост связывает расширение Chrome с агентом на вашем компьютере. Установщик копирует хост в ~/.lizard-studio/host и регистрирует его в браузере. Держите Node.js установленным: браузер использует его для запуска хоста.

Повторно откройте боковую панель расширения после установки. Если вы обновили существующий хост, откройте панель снова перед запуском нового чата.

4. Подключите страницу к её проекту

Запустите сервер разработки проекта обычной командой. Откройте выводимый им URL в Chrome, затем откройте Lizard Studio на этой вкладке.

Начните чат, выберите Claude Code или ChatGPT и укажите папку, содержащую исходный код этого проекта. Каждый чат хранит свою папку проекта и разрешения. Вкладка с правильной страницей сама по себе не сообщает агенту, какой локальный репозиторий нужно менять.

Перед запросом правки проверьте связь запросом только на чтение:

Read this page's title and inspect its main heading. Tell me which
local project folder you are using. Do not change any files yet.

Если агент указывает не ту папку, исправьте выбор перед продолжением.

5. Выберите элемент и сделайте одно редактирование

Выберите Селектор на панели инструментов страницы и кликните по элементу, который хотите изменить. Выбор добавляет контекст в чат. Для визуальной проблемы, затрагивающей несколько элементов, используйте Аннотация, чтобы отметить область и добавить скриншот в чат.

Попробуйте запрос с измеримым результатом:

Find the source for the selected card's action row. Set the gap
between its buttons to 24px in the project files. Keep the button
labels and colors unchanged. Show the diff, then inspect the
rendered row to check its computed gap.

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

Когда сервер разработки перезагрузит страницу, проверьте результат. Если перезагрузки не происходит автоматически, обновите Chrome.

6. Проверьте, что правка сохраняется

Временное изменение DOM может выглядеть верно до обновления. Правка исходного кода меняет файлы, которые обслуживает ваш сервер разработки.

Посмотрите дифф файлов в редакторе или выполните git diff из папки проекта. Обновите страницу и снова проверьте тот же элемент. Для приведённого выше примера вычисленный gap всё ещё должен быть 24px. Проверьте и настольную, и узкую вёрстку перед тем, как оставить изменение.

Редактирование локального проекта не обновляет развёрнутый сайт. Разверните отдельно, когда захотите вывести изменения в продакшн.

Если соединение не работает

Что вы видите	Что проверить
Боковая панель не может связаться с хостом	Запустите установщик хоста, убедитесь, что Node.js доступен, затем снова откройте панель.
Агент не может запуститься	Проверьте `claude --version` или `codex --version` в терминале и завершите вход в этот агент.
Агент видит страницу, но не находит её код	Выберите правильную локальную папку и убедитесь, что вкладка использует сервер разработки этого проекта.
Правка пропадает при обновлении	Проверьте дифф. Попросите внести изменение в исходный код, если агент поменял только живой DOM.
Панель инструментов не появляется на странице настроек Chrome	Chrome блокирует контент-скрипты на страницах `chrome://`, на странице новой вкладке и в Chrome Web Store. Откройте обычный веб-сайт.

На macOS размещение хоста в ~/.lizard-studio/host также обходит ограничения, с которыми Chrome может столкнуться при запуске хоста из Desktop, Documents или Downloads. Подробнее см. в примечаниях к хосту в README.

Куда отправляются ваши данные

Расширение и хост работают на вашем компьютере. Выбранный провайдер модели получает запросы, которые вы отправляете через его агент. Lizard Studio не использует чат-сервер Lizard и не собирает телеметрию. Локальная установка не означает, что облачная модель обрабатывает ваши промпты локально. Прочитайте политику конфиденциальности Lizard Studio перед использованием с проектом, имеющим ограничения по данным.

Связанные руководства

Настройка проверена на исходном коде Lizard Studio 14 сентября 2026 года.

Быстрый старт приложения Обзор

Обновлено 17 сентября 2026 г.