Визуальный редактор для Claude Code: выберите элемент и исправьте его CSS

Chrome с Lizard Studio: страница, инспектор и чат остаются в одном окне. На скриншоте показано подключение к ChatGPT.

Визуальный редактор для Claude Code должен помочь вам определить часть страницы, которую нужно изменить, и проверить результат в исходном коде. В Lizard Studio вы выделяете элемент в Chrome, прикрепляете его к чату и просите Claude Code отредактировать ваш локальный проект. Браузер остаётся рядом с диалогом, чтобы вы могли инспектировать результат.

В этом руководстве используется небольшое упражнение по отступам с измеримым результатом: изменить расстояние между двумя кнопками с 4px на 24px. Вы проверите дифф исходников, обновите страницу и снова измерите отступ. Это воспроизводимое упражнение, а не бенчмарк производительности или заявление о скорости работы агента над вашим проектом.

Мы создаём Lizard Studio. Его расширение и хост бесплатны и распространяются под лицензией MIT; требования аккаунта и плата за использование вашего AI-провайдера всё равно применяются. Пройдите руководство по настройке перед тем, как пробовать шаги с агентом ниже.

Что здесь означает визуальное редактирование

Lizard Studio использует селектор элементов и инструменты дизайна, чтобы дать агенту контекст. Вы описываете изменение в исходном коде; Claude Code вносит правку в файл. Этот рабочий процесс отличается от ручного перетаскивания элемента с ожиданием, что редактор сразу напишет соответствующий CSS.

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

Если вашим главным требованием является прямое редактирование перетаскиванием, сравните возможности управления перед выбором инструмента. Это упражнение проверяет выбор элемента, запрос изменения и просмотр исходного кода.

Скачайте пример

Вам понадобятся Python 3 для небольшого статического сервера, используемого здесь, Chrome, Lizard Studio и установленный и авторизованный Claude Code. Для существующего приложения используйте его обычный сервер разработки.

Создайте пустую папку для упражнения. Скачайте spacing.html в неё через команду браузера Сохранить страницу как, или выполните в папке:

curl -fsS https://lizard.build/studio-examples/spacing.html -o spacing.html
python3 -m http.server 4175 --bind 127.0.0.1

Откройте http://127.0.0.1:4175/spacing.html в Chrome. Оставьте сервер запущенным, пока вы работаете. Если порт 4175 занят, выберите другой и используйте его номер в URL.

На странице есть две примерные кнопки без действий. Их ряд намеренно использует такой CSS:

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 24px;
}

Выберите эту папку в Lizard Studio, чтобы агент мог редактировать spacing.html. Открытие примера на lizard.build покажет только опубликованное упражнение; изменение вашей скачанной копии требует локального URL.

Выберите ряд, который хотите изменить

Начните чат с Claude Code в боковой панели. Используйте Селектор и прикрепите ряд .actions, содержащий обе кнопки. Если вы случайно выбрали одну кнопку, выберите её родительский ряд или уточните, что целью является gap ряда.

Можно попросить-agentа проверить только для чтения перед правкой:

Inspect the selected action row. Report its computed gap and the
local file that defines it. Do not change any files yet.

Начальный gap должен быть 4px. Исходником является таблица стилей внутри вашего скачанного spacing.html. Если агент указывает на другой файл или страницу, исправьте папку проекта или вкладку браузера перед запросом правки.

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

Попросите небольшую правку исходника

Отправьте выбранный ряд с запросом, в котором указаны ожидаемый результат и область:

Set the selected action row's gap to 24px in spacing.html.
Keep the button labels, colors and card margin unchanged.
Show the source diff. Refresh the page and check that the
computed gap is 24px.

Проверьте предложенную агентом правку. Соответствующее изменение должно быть эквивалентно:

- .actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 24px; }
+ .actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }

Агент может переформатировать таблицу стилей. Проверяйте фактические объявления, а не требуйте того же расположения строк, что в этом примере. Для этой задачи нет причин менять подписи кнопок или правило .card.

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

Настоящее поле запроса показывает прикреплённый элемент как «1 selection». На этом скриншоте используется ChatGPT и запрос яркости; для этого упражнения выберите Claude Code и используйте приведённый выше запрос про отступ.

Проверьте страницу после обновления

Python-сервер не обеспечивает горячую перезагрузку. Обновите Chrome после изменения файла, затем попросите агента снова инспектировать .actions.

Также можно проверить вычисленное значение в Chrome DevTools:

getComputedStyle(document.querySelector('.actions')).gap
// Expected: "24px"

Проверьте как на десктопе, так и на узком вьюпорте. Примерный ряд использует flex-wrap: wrap, поэтому кнопки могут перенестись на другую линию при нехватке места. При каждой ширине убедитесь, что на странице нет горизонтальной прокрутки и обе подписи остаются видимыми.

Используйте этот чек-лист приёмки:

• Локальный исходник содержит gap: 24px для .actions.
• Обновление страницы сохраняет новый gap.
• Текст кнопок и цвета остаются неизменными.
• Отступ .card остаётся 32px.
• Страница остаётся работоспособной при узкой ширине.

Если проект использует Git, прочитайте git diff. Для этого отдельного файла представление сравнения в вашем редакторе может показать то же изменение. Упражнение завершено, когда файл и браузер согласны.

Почему изменение может исчезнуть

Инструмент браузера может изменить живой DOM или добавить инлайн-стиль без изменения файлов проекта. Это помогает предварительно оценить идею, но при обновлении браузер снова загрузит исходный код.

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

Для React или другого фреймворка исходником может быть компонент, CSS-модуль или утилитарный класс, а не отдельная таблица стилей. Попросите агента найти правило, отвечающее за отступ. Избегайте глобального правила для кнопки, когда нужно изменить только один активный ряд.

Используйте тот же метод для реальной UI-проблемы

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

Для бага поведения попросите агента воспроизвести действие и проинспектировать вывод консоли и сети. Скриншот не может показать, сработал ли обработчик события или упал запрос. Lizard Studio включает эти браузерные инструменты; сравнение с Claude в Chrome объясняет разные настройки.

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

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

Нужен ли Claude Code скриншот для редактирования CSS?

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

Можно ли постоянно редактировать любой сайт?

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

Это замена моему редактору?

Вы можете продолжать использовать свой редактор для кода и диффов. Lizard Studio предоставляет боковую панель браузера и инструменты страницы. Сравните другие варианты интерфейса в руководстве по GUI для Claude Code.

С чего начать, если панель не подключается?

Следуйте руководству по установке и устранению неполадок. Проверьте локальный хост, вход в агент и выбранную папку проекта перед тестированием правки исходника.