Подключите Figma и передайте один фрейм
Запустите команду из каталога тестового сайта. Затем откройте Claude Code, вызовите /mcp, выберите figma и подтвердите доступ в браузере. В меню MCP повторно проверьте подключение. Если работа идёт в команде, уточните, кому доступен исходный файл. Ссылка на закрытый макет сама по себе не даст агенту дополнительных прав. Для первого прогона достаточно отдельной копии макета с одним фреймом.
claude mcp add --transport http figma https://mcp.figma.com/mcpВ Figma выделите именно фрейм первого экрана и скопируйте ссылку на него. Проверьте, что в ссылке указан узел, а в самом фрейме находятся заголовок, абзац и кнопка. Попросите Claude сначала описать размеры, варианты текста, интервалы и поведение узких экранов. Сверьте этот ответ с макетом. Если в макете только десктопная версия, отдельно укажите порядок блоков на телефоне. Так вы отделите дизайнерское решение от догадки по одному снимку.
Передайте правила вёрстки и приёмки
Для примера возьмите первый экран сервиса «Тихий хостинг». Десктопный фрейм 1440 px, внутренний контейнер до 1120 px, две колонки с промежутком 32 px. Мобильный фрейм 390 px, поля по 20 px, блоки стоят друг под другом. Заголовок «Хостинг для небольших сайтов», ссылка «Смотреть тарифы» ведёт на существующий якорь tariffs. Декоративную карточку поставьте после текста в HTML, чтобы порядок чтения совпадал с мобильным макетом.
Прочитай фрейм Figma по этой ссылке. Назови размеры и отступы.
Сверь их с описанием задачи. Если есть расхождение, остановись.
Сверстай один первый экран в index.html и styles.css.
Используй существующие стили проекта. Остальные страницы не трогай.Не просите сразу собрать весь файл Figma. Если заголовок переполнит колонку, исправление будет проще увидеть на одном блоке. Когда сервер возвращает картинку и структурный контекст, сравнивайте оба источника. Например, граница панели видна на картинке, а внутренний отступ легче сверить по узлам. Если контекст недоступен, перечислите измерения вручную и обозначьте этот режим в задаче.
Проверьте результат на двух ширинах
Для этого примера расчёт десктопа даёт две колонки по 544 px при промежутке 32 px. На телефоне контент занимает 350 px, если поля действительно по 20 px. Откройте итоговую страницу на 1440 и 390 px, сравните координаты контейнера и убедитесь, что нижняя карточка помещается без горизонтальной прокрутки. Проверьте ссылку мышью и клавишей Tab. Если переход по якорю не работает, найдите целевой элемент и сравните его id с href.
В локальном контрольном HTML замер показал 1120 px и две колонки по 544 px на широком экране, 350 px и одну колонку на телефоне. Ширина документа совпала с шириной окна в обоих случаях, а ссылка нашла целевой элемент. Этот прогон проверяет вёрстку на контрольных размерах. Подключение к закрытому файлу Figma проверьте отдельно в своей учётной записи.
При расхождении попросите Claude назвать причину до правки. Типичный пример — ширина 350 px плюс внутренние отступы, которые CSS добавляет снаружи при стандартной модели размера. Исправьте способ расчёта ширины и повторите проверку. Сохраните снимки двух размеров и отдельно отметьте неперенесённые детали макета. Эти снимки нужны для приёмки следующего изменения, например замены шрифта или перевода заголовка.
Официальная документация: шаги и условия работы инструмента.
Как принять секцию по токенам и с клавиатуры
Передайте Claude Code ссылку на конкретный фрейм и приложите пару значений из проекта. Для учебной карточки лампы берём цвет текста #17324D, боковой отступ 24 px и промежуток между колонками 32 px. Попросите сначала найти существующие токены, показать их соответствие значениям Figma и перечислить файлы, которые агент собирается менять. Если проект использует другие имена, названия из макета можно сопоставить через короткую таблицу. Попросите использовать уже объявленные значения, когда они совпадают.
На контрольном HTML проверили сетку в Chromium. При ширине окна 1440 px контейнер занял 1120 px, две колонки — по 544 px. При 390 px контейнер занял 342 px и сложился в одну колонку. Документ остался в границах окна. Ссылка «Смотреть характеристики» получила фокус по Tab. Её высота составляла 44 px. Это результаты локального макета с заданными параметрами. Исходный фрейм Figma и правила вашего проекта нужно сверить отдельно.
Перед слиянием проверьте, что фокус видно на контрастном фоне, название кнопки ясно без изображения, а ссылка ведёт к существующему разделу. Откройте страницу на узком экране и с длинным заголовком. Проверьте, что визуальный порядок блоков соответствует порядку при обходе клавишей Tab. Документация Figma объясняет, какой контекст MCP передаёт агенту и какие решения остаются у него. Figma MCP и кодовый агент.