Кнопка в карточке выходит за край экрана. Исправим её с помощью Claude Code в VS Code: подключим официальный инструмент, передадим нужные файлы и проверим предложенную правку по коду и в браузере.
Подготовьте отдельный учебный проект
Для упражнения нужны основы HTML и CSS, VS Code и доступ к Claude Code. Все файлы ниже учебные. Используйте пустую папку claude-button-demo, чтобы изменение было видно целиком и случайная правка не затронула ваш рабочий проект.
В официальной документации расширения указаны VS Code версии 1.94.0 или новее и аккаунт, который даёт доступ к Claude Code: подходящая платная подписка Claude либо аккаунт Claude Console. При входе через аккаунт отдельный API-ключ не нужен. Возможности и лимиты зависят от вашего способа доступа. Проверьте их в аккаунте перед началом; стоимость в упражнении не рассчитываем. Требования к расширению.
Сначала создайте в папке два файла. В index.html поместите законченную страницу:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Учебная карточка</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<article class="card">
<h1>Лампа для рабочего стола</h1>
<p>Учебный товар. Доставка согласуется отдельно.</p>
<button class="card__button" type="button">
Добавить в корзину с доставкой
</button>
</article>
</main>
</body>
</html>В styles.css добавьте исходные стили. Фиксированная ширина кнопки намеренно создаёт ошибку на узком экране.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 16px;
font: 18px/1.5 system-ui, sans-serif;
}
.card {
max-width: 420px;
padding: 20px;
border: 1px solid #888;
}
.card__button {
width: 340px;
padding: 12px 20px;
font: inherit;
border: 2px solid #222;
color: #fff;
background: #222;
}Откройте HTML в браузере. Сузьте окно до 320 пикселей или задайте эту ширину в режиме проверки устройств. У карточки остаётся меньше места, чем требует кнопка. Зафиксируйте исходный результат: справа появляется переполнение, длинная подпись не помещается в доступную ширину.
Это точка отсчёта. В дальнейшей проверке будет с чем сравнить изменение. Если вы уже работаете с Git, сохраните исходные файлы отдельным коммитом; порядок основных команд есть в руководстве по работе с консолью Git. Для упражнения достаточно и копии двух файлов.
Установите расширение и войдите в аккаунт
Откройте раздел Extensions сочетанием Ctrl+Shift+X в Windows или Linux, Cmd+Shift+X в macOS. Найдите Claude Code и проверьте издателя Anthropic. Установите официальное расширение. Надёжнее начинать с ссылки на установку из инструкции Anthropic для VS Code, чтобы не выбрать одноимённый сторонний инструмент.
Откройте созданную папку через File → Open Folder. Затем найдите команды Claude Code в палитре команд VS Code и откройте панель, например командой Open in New Tab. При первом открытии нажмите Sign in и завершите авторизацию в браузере. После входа вернитесь в редактор.
Расширение поставляется со своей копией командного инструмента для работы панели. Отдельная установка команды claude нужна, если вы собираетесь запускать её в терминале. Для этого упражнения панель достаточна; способ отдельной установки описан в руководстве по настройке Claude Code.
Если панель не появилась, вызовите Developer: Reload Window. При повторном запросе входа проверьте, что авторизация завершилась в том аккаунте, которым вы пользуетесь. Установка расширения и доступ к сервису — разные условия: запись в списке Extensions подтверждает только установку.
Покажите файлы и сначала попросите объяснение
Откройте styles.css и выделите правило .card__button. В панели Claude Code добавьте ссылки на оба файла через @: начните вводить имя и выберите файл из подсказки. По официальной документации расширение умеет читать упомянутые файлы и учитывает выделенный в редакторе текст. Контекст файлов и выделения.
Напишите первый запрос:
Изучи @index.html и @styles.css.
На ширине окна 320 px кнопка выходит за границы карточки.
Объясни причину и предложи минимальное изменение CSS.
Сохрани полный текст кнопки и видимую рамку фокуса.
Пока не редактируй файлы и не устанавливай зависимости.Выделение экономит время на поиске нужного участка, но упоминание файла не создаёт границу разрешений. Агент может обращаться и к другим доступным инструментам и файлам. Поэтому начинайте с учебной папки, не добавляйте секреты в запрос и смотрите на запрашиваемые действия.
Для первой правки мы рекомендуем Manual. Найдите индикатор режима внизу поля запроса и выберите ручное подтверждение. В текущей инструкции Anthropic этот режим запрашивает разрешение перед редактированием файлов и большинством команд оболочки. Plan подходит для предварительного плана, а автоматические режимы меняют порядок подтверждений. Названия и доступность режимов проверяйте в установленной версии. Модель разрешений Claude Code.
Ответ должен связать дефект с фиксированной шириной 340px и доступной шириной карточки. Если объяснение ушло в настройку сервера, миграцию сборщика или замену всей разметки, уточните границы задачи. Здесь это лишние изменения.
Разрешите одну правку и прочитайте сравнение
После объяснения отправьте отдельный запрос:
Исправь только styles.css по предложенному плану.
Кнопка должна помещаться в карточке при ширине окна 320 px.
Текст разрешено переносить, обрезать его нельзя.
Сохрани размер шрифта и проверь стиль фокуса.
Покажи, какие строки изменились и как мне проверить результат.
Не запускай команды и не создавай коммит.Запрет команды в запросе задаёт намерение. Читайте, что именно агент собирается сделать, прежде чем подтверждать действие. Если появляется установка пакета для двух статических файлов, отклоните её и попросите обойтись изменением CSS.
В Manual расширение показывает исходный и предложенный вариант рядом и запрашивает подтверждение. Прочитайте каждое изменение. Хороший результат можно получить, например, такой заменой правила:
.card__button {
max-width: 100%;
padding: 12px 20px;
font: inherit;
white-space: normal;
overflow-wrap: anywhere;
border: 2px solid #222;
color: #fff;
background: #222;
}
.card__button:focus-visible {
outline: 3px solid #2456d8;
outline-offset: 3px;
}Здесь удалена фиксированная ширина. max-width: 100% ограничивает кнопку доступной шириной, а перенос защищает длинную подпись. Правило фокуса позволяет увидеть кнопку при переходе клавишей Tab. Агент может предложить другое решение; сравнивайте его с критериями, а не с совпадением строк.
Особенно внимательно смотрите на overflow: hidden, уменьшение шрифта и замену текста. Эти изменения способны скрыть симптом за счёт потери содержимого. Сохраняем всю подпись.
Проверьте результат за пределами ответа агента
После принятия изменения сохраните файл и обновите страницу. Первую проверку выполняйте на тех же 320 пикселях. Затем увеличьте ширину до 768 пикселей: кнопка должна оставаться внутри карточки и при этом не требовать горизонтальной прокрутки.
Таблица ниже связывает действие с видимым результатом. Пройдите её сами, даже если агент написал, что задача завершена.
| Проверка | Ожидаемый результат |
|---|---|
| Окно 320 пикселей | Карточка и кнопка помещаются в ширину страницы. |
| Подпись в два раза длиннее | Полный текст переносится, конец подписи виден. |
| Переход клавишей Tab | Фокус кнопки заметен, рамка не обрезана. |
| Окно 768 пикселей | Карточка остаётся ограниченной по ширине, кнопка не выходит из неё. |
| Список изменённых файлов | Изменён только styles.css. |
| Сравнение исходного и нового кода | Нет установки зависимостей, удаления разметки или скрытого переполнения. |
В панели Source Control VS Code откройте изменение styles.css. Если папка под Git, сравнение покажет полный накопленный результат, включая ваши ручные правки. Для папки без Git сравните файл с исходной копией. Итоговый ответ модели полезен как указатель, но именно файл и страница показывают, что получилось.
Повторите задачу с другим содержимым
Замените название товара на длинное, добавьте к кнопке ещё несколько слов и повторите проверку узкой ширины. Если дефект вернулся, передайте агенту конкретную новую подпись и снимите предположение, которое оказалось неверным. Например: кнопка должна выдерживать длинное слово без пробелов.
Так вы проверите и CSS, и собственную постановку задачи. Ограничение «не выходить за край» становится наблюдаемым условием, когда рядом есть ширина окна, конкретные файлы и полный текст элемента.
В руководстве по Qwen Code можно посмотреть рабочий цикл другого инструмента. Для сравнения агентов берите одинаковую задачу и заранее фиксируйте одинаковые условия, включая ширину окна и длину подписи.
Продолжите работу с агентами после первой принятой правки
Сначала завершите чек-лист и сохраните исходную и исправленную версии. Затем откройте бесплатный первый раздел курса «Разработка с AI-агентами: инженерный подход». Теперь вы можете показать задачу, принятое изменение и результат своей проверки.