--- title: "Установка Lizard Studio для Claude Code и ChatGPT" description: "Установите Lizard Studio в Chrome, подключите Claude Code или ChatGPT к локальному проекту и сделайте первое редактирование сайта. Следуйте руководству по настройке." url: https://lizard.build/ru/docs/studio/getting-started/ updated: 2026-09-18 --- # Установка Lizard Studio Lizard Studio — бесплатное расширение для Chrome, которое подключает Claude Code или ChatGPT к странице, которую вы создаёте. Откройте чат рядом со страницей, выберите элемент и попросите агента отредактировать файлы в вашем локальном проекте. Расширение включает инспекцию страницы, аннотации, линейки, пипетку и инструменты отладки браузера. Это руководство проведёт вас от установки до одного редактирования исходного кода, которое сохранится после обновления страницы. Для примера, который можно скачать, см. [руководство по визуальному редактированию в Claude Code](https://lizard.build/blog/claude-code-visual-editor). ## Что понадобится - 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](https://chromewebstore.google.com/detail/kgbaeoalmkabpoglpjcdmppdmcipfdeh) и нажмите **Установить в Chrome**. Закрепите расширение, если хотите иметь доступ к нему из панели инструментов. Панель инструментов предоставляет инструменты дизайна; боковая панель Chrome содержит ваши чаты. Установка из магазина не требует режима разработчика. ## 2. Установите ваш агент Выберите агент, которым хотите пользоваться. Другой можно добавить позже. Для Claude Code следуйте [официальному руководству по установке](https://code.claude.com/docs/en/setup). Проверьте установку в терминале: ```bash claude --version ``` Для ChatGPT в Lizard Studio установите Codex CLI: ```bash npm install -g @openai/codex codex --version ``` В интерфейсе Lizard Studio этот агент называется **ChatGPT**. Пакет и терминальная команда используют название **Codex**. Это локальный агент программирования, подключённый к вашему проекту; он не встраивает веб-сайт chatgpt.com. Откройте выбранный агент и завершите процесс входа перед тем, как продолжить. Поддерживаемые пути подключения описаны в [README Lizard Studio](https://github.com/lizard-build/lizard-studio#setup). ## 3. Установите локальный хост Выполните эту команду один раз в терминале: ```bash npx @lizard-build/lizard-studio-host install ``` Хост связывает расширение Chrome с агентом на вашем компьютере. Установщик копирует хост в `~/.lizard-studio/host` и регистрирует его в браузере. Держите Node.js установленным: браузер использует его для запуска хоста. Повторно откройте боковую панель расширения после установки. Если вы обновили существующий хост, откройте панель снова перед запуском нового чата. ## 4. Подключите страницу к её проекту Запустите сервер разработки проекта обычной командой. Откройте выводимый им URL в Chrome, затем откройте Lizard Studio на этой вкладке. Начните чат, выберите **Claude Code** или **ChatGPT** и укажите папку, содержащую исходный код этого проекта. Каждый чат хранит свою папку проекта и разрешения. Вкладка с правильной страницей сама по себе не сообщает агенту, какой локальный репозиторий нужно менять. Перед запросом правки проверьте связь запросом только на чтение: ```text 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. Выберите элемент и сделайте одно редактирование Выберите **Селектор** на панели инструментов страницы и кликните по элементу, который хотите изменить. Выбор добавляет контекст в чат. Для визуальной проблемы, затрагивающей несколько элементов, используйте **Аннотация**, чтобы отметить область и добавить скриншот в чат. Попробуйте запрос с измеримым результатом: ```text 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](https://github.com/lizard-build/lizard-studio#2-the-local-host-one-time). ## Куда отправляются ваши данные Расширение и хост работают на вашем компьютере. Выбранный провайдер модели получает запросы, которые вы отправляете через его агент. Lizard Studio не использует чат-сервер Lizard и не собирает телеметрию. Локальная установка не означает, что облачная модель обрабатывает ваши промпты локально. Прочитайте [политику конфиденциальности Lizard Studio](https://github.com/lizard-build/lizard-studio/blob/main/PRIVACY.md) перед использованием с проектом, имеющим ограничения по данным. ## Связанные руководства - [Выберите элемент и исправьте его CSS](https://lizard.build/blog/claude-code-visual-editor) - [Используйте ChatGPT для редактирования локального сайта](https://lizard.build/studio/chatgpt) - [Сравните Lizard Studio и Claude в Chrome](https://lizard.build/studio/compare/claude-in-chrome) - [Выберите GUI для Claude Code](https://lizard.build/blog/claude-code-gui) Настройка проверена на исходном коде Lizard Studio 14 сентября 2026 года.