Используйте ChatGPT в Chrome для правок локального сайта

Lizard Studio добавляет ChatGPT на боковую панель Chrome с доступом к открытой странице и локальной папке проекта. Выделяйте элемент, просите изменить его и смотрите дифф исходников, не уходя со страницы. Связь работает через локальный Codex CLI, который в Lizard Studio отображается как ChatGPT.

Настоящая сессия Lizard Studio с подключением ChatGPT. Lizard Studio — независимое расширение; OpenAI также предлагает собственное расширение ChatGPT для браузера. Прочитайте сравнение для разработчиков, чтобы выбрать удобный процесс работы.

Расширение и хост бесплатны и открыты. Выбранный аккаунт ИИ даёт доступ к агенту и моделям; их лимиты и тарификация сохраняются. Установите Lizard Studio или следуйте полному руководству по настройке.

Что ChatGPT может делать со страницей?

Можете просить агента инспектировать DOM, читать вывод консоли и сети, делать скриншоты и взаимодействовать со страницей. Панель дизайна добавляет селектор элементов, аннотации, линейки, измерение отступов, пипетку и адаптивный превью. Чат может использовать этот контекст при редактировании файлов в выбранной папке.

Например, можно прикрепить кнопку и попросить агента найти её исходник, изменить отступы и проверить результат рендеринга. Также можно прикрепить размеченный скриншот, если проблема затрагивает несколько элементов. README Lizard Studio описывает браузерные инструменты и локальное подключение.

Это полезно, когда задача сочетает контекст страницы и доступ к коду. Вопрос вроде «Почему эта кнопка переносится?» требует и разметку, и правила, её создающие. Передайте агенту выбранный ряд и желаемый результат, а затем проверьте, что он изменит.

Почему в настройке упоминается Codex?

ChatGPT — имя в панели; Codex — локальный CLI, запускающий сессию кодирования. Установите CLI, войдите и подключите локальный хост. Имя пакета, терминальная команда и пути вроде ~/.codex/config.toml сохраняют названия Codex.

Lizard Studio не встраивает chatgpt.com в iframe и не предоставляет собственного доступа к моделям. Это различие важно при выборе боковой панели ChatGPT: чтобы редактировать локальный исходный файл, инструменту нужно подключение к этому файлу, а не только возможность обсуждать видимую страницу.

Подключите ChatGPT к локальному проекту

1. Добавьте Lizard Studio из Chrome Web Store.
2. Установите Codex CLI командой npm install -g @openai/codex и завершите вход.
3. Запустите npx @lizard-build/lizard-studio-host install для регистрации локального хоста.
4. Запустите дев-сервер вашего сайта и откройте его URL в Chrome.
5. Откройте Lizard Studio, начните чат, выберите ChatGPT и укажите папку с кодом этого сайта.

Хост работает на macOS, Windows и Linux. Нужен Node.js; проверьте руководство по настройке для предпосылок и решения проблем с подключением.

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

Попробуйте CSS-правку с проверяемым результатом

Используйте свою страницу или скачайте пример из руководства по визуальному редактированию. В примере есть ряд действий с отступом 4px. Задача — сделать его 24px, правя исходник. Для проблемы мобильной вёрстки следуйте руководству по редактированию сайтов с ChatGPT: исправьте карточку файла, уезжающую за пределы при 390 px, и проверьте исходник и страницу в двух ширинах.

Выделите ряд действий через Selector, затем отправьте:

Change the gap between the selected row's buttons to 24px.
Edit the local source file, show the diff and check the computed
gap after the page refreshes. Keep the labels, colors and the
space between other cards unchanged.

Проверьте дифф перед принятием. Хороший результат меняет правило, владеющее рядом действий, а не увеличивает отступы у всех кнопок сайта. Проверьте страницу в узкой ширине: кнопки всё ещё должны помещаться или переноситься как надо.

Обновите ещё раз. Если отступ вернётся к 4px, проверьте, какой файл изменился и какой URL обслуживает браузер. Попросите агента снова прочитать вычисленный стиль. Желаемый исход — небольшая правка файла плюс видимый устойчивый результат.

Временные правки страницы и правки исходников

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

Чем отличаются два агента?

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

Некоторые функции чата различаются: в README указаны Remote Control и редактирование прошлых сообщений для Claude Code, и сказано, что они недоступны в панели ChatGPT. Проверьте актуальные примечания по функциям перед выбором по конкретному контролю чата. Для более широкого выбора интерфейса читайте сравнение GUI для Claude Code.

Частые вопросы

Можно ли использовать свой аккаунт ChatGPT?

Подключение идёт через поддерживаемый Codex CLI флоу входа. Ваш аккаунт должен давать доступ к выбранному агенту; Lizard Studio не даёт подписку и не меняет лимиты провайдера.

Нужен ли аккаунт Lizard?

Нет. Вы подключаете своего агента и локальную папку. Аккаунт Lizard отделен от использования расширения.

Мой код остаётся на моём компьютере?

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

Это работает как drag-and-drop конструктор страниц?

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