ChatGPT — редактор сайтов: исправление готового сайта в Chrome

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

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

Мы создаём Lizard Studio. В этом руководстве есть небольшая ошибка мобильной вёрстки, которую можно воспроизвести без фреймворка приложения. Мы проверили пример в браузере и в связанной документации продукта 14 сентября 2026 года. Пример проверяет CSS-исправление, а не скорость или успешность агента.

Выберите рабочий процесс редактирования для вашего проекта

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

Если у вас уже есть репозиторий, сервер разработки и процесс релизов, которые вы хотите сохранить, это руководство использует именно их. Lizard Studio соединяет браузер с выбранной локальной папкой. Базовый Codex CLI может просматривать файлы, редактировать код и запускать команды в проекте. Документация Codex CLI.

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

Подключите страницу и папку с исходниками

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

Запустите dev-сервер проекта и откройте его локальный URL в Chrome. Перед запросом правки уточните:

Report the current page URL and the project folder you can edit.
Find the source file for this page. Do not change it yet.

Проверьте эти ответы. Развёрнутая страница и локальная страница могут выглядеть одинаково, но загружать разный код. Если сессия ссылается на другую папку, исправьте это перед продолжением.

Для этого упражнения скачайте responsive-card.html в пустую локальную папку. Используйте команду браузера «Сохранить страницу как» и выберите «Только HTML», или сохраните связанный исходный файл. Разместите эту папку на локальном HTTP-сервере:

python3 -m http.server 8080

Откройте http://localhost:8080/responsive-card.html и выберите ту папку в Lizard Studio. В примере используются обычные HTML и CSS. Необязательный шрифт при самостоятельной загрузке заменяется на sans-serif. Кнопка Open — это нерабочий образец управления.

Воспроизведите мобильное переполнение перед запросом исправления

Установите ширину вьюпорта 390 CSS-пикселей через адаптивный предпросмотр или Chrome DevTools. Карточка содержит длинное имя файла и кнопку Open. Имя занимает больше места, чем доступно в строке, и страница прокручивается по горизонтали.

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

Инспектор и панель инструментов в существующей сессии Studio. Используйте эти элементы управления для инспекции собственной карточки; показанные здесь значения относятся к выбранному на скриншоте элементу.

Дайте агенту результат, который он может проверить:

At a viewport width of 390px, the selected file card makes the
page scroll horizontally. Find the cause in responsive-card.html
and fix the source CSS.

Keep the full file name readable and the Open button visible.
Keep the colors, labels and desktop layout. Do not hide overflow
on the page or shrink the font to make the content fit.

Show the diff. Reload and check the page at 390px and 1280px.
Report the viewport width and the document scroll width at each.

Последние строки важны: скрытие переполнения может убрать полосу прокрутки, оставив часть элемента управления недоступной. Цель — читаемый контент и работающая кнопка.

Проверьте изменение CSS

В этом примере .file-info — flex-элемент. Его размер по умолчанию и длинное имя файла не дают строке поместиться в узкую карточку. Небольшое исправление позволяет элементу сжиматься и имени переноситься там, где нужно:

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  margin: 0;
  color: #e9edf4;
  overflow-wrap: anywhere;
}

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

Изучите разницу в исходном коде. Она должна сохранять имя файла, подпись кнопки и цвета. Она не должна добавлять overflow-x: hidden на страницу, сокращать имя или менять общую типографику для прохождения этого упражнения.

Проверьте результат после перезагрузки

При 390px полное имя должно переноситься внутри своей части карточки. Кнопка Open должна оставаться внутри карточки. При 1280px проверьте, что строка на десктопе всё ещё выглядит правильно.

Можно выполнить эту проверку только для чтения в консоли браузера или попросить агента сообщить те же значения:

({
  viewportWidth: document.documentElement.clientWidth,
  scrollWidth: document.documentElement.scrollWidth,
  hasHorizontalOverflow:
    document.documentElement.scrollWidth >
    document.documentElement.clientWidth
})

Исправленный образец должен сообщать hasHorizontalOverflow: false при обеих ширинах. Также проверьте саму карточку: проверка только ширины документа не может доказать, что каждый элемент остаётся читаемым.

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

Мы проверили исходный и исправленный образец при 390px и 1280px, включая переполнение документа, границы кнопки и неизменённый текст. Вы можете повторить эту проверку со связанным стартовым файлом и приведённым выше CSS. Мы не проводили контролируемое сравнение между агентами.

Эти замеры сделаны в Chromium со шрифтом Geist сайта, загруженным. Скачанная копия может использовать запасной шрифт и дать другую исходную ширину; проверяйте те же критерии приёмки.

Перейдите от примера к своему сайту

Выберите одну проблему и укажите затронутый маршрут, вьюпорт и ожидаемый результат. Для React-приложения исправление может относиться к компоненту, CSS-модулю или утилитарному классу. Дайте сессии доступ к реальному проекту и попросите её найти этот исходник.

После локальной проверки запустите тесты, которые обычно нужны вашему проекту. Общая карточка может появляться на нескольких маршрутах; проверьте другое её использование перед коммитом. Опубликуйте через обычный процесс релиза, когда изменение готово. Редактирование локального файла само по себе не обновит развёрнутый сайт.

Если вы ещё выбираете браузерный инструмент, прочитайте Расширения ChatGPT для разработчиков для Chrome. Там сравнивается официальное расширение и Lizard Studio по документируемым рабочим процессам.

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

Может ли ChatGPT редактировать существующий сайт?

Да, когда у выбранного инструмента есть доступ к проекту или его редактору. Это руководство использует локальную папку с исходниками через подключение Codex CLI в Lizard Studio. Для ChatGPT Sites проверьте, подходит ли существующий проект под поддерживаемый рабочий процесс.

Может ли он исправить CSS по скриншоту?

Скриншот помогает объяснить видимую проблему. Дайте сессии исходники и способ инспектировать отображаемый результат. Для переполнения укажите ширину вьюпорта и какой контент должен оставаться читаемым.

Является ли Lizard Studio официальным расширением ChatGPT?

Нет. Lizard Studio — независимое расширение с открытым исходным кодом. У OpenAI есть отдельное официальное расширение; см. сравнение для разработчиков.

Изменит ли локальная правка живой сайт?

Только после публикации изменённых исходников через процесс релиза этого сайта. Проверьте локальный результат, изучите разницу и верифицируйте развёрнутый маршрут после релиза.