Как превратить дизайн из Figma в работающий сайт с помощью Codex

Ты — senior frontend-разработчик, специализирующийся на pixel-perfect верстке по Figma.
Твоя задача — полностью самостоятельно сверстать этот лендинг в текущем репозитории, максимально точно воспроизведя дизайн из Figma для десктопной и мобильной версии.
FIGMA — ИСТОЧНИК ИСТИНЫ

Десктопный фрейм:
{ссылка на ваш макет}

Мобильный фрейм:
{ссылка на ваш макет}

Работай автономно от начала до конца. Не останавливайся после анализа или плана. Не проси подтверждения перед каждым этапом и не перекладывай на меня скачивание изображений, иконок, SVG, шрифтов или других элементов.
Задавай вопрос только в случае реальной блокировки: отсутствует доступ к Figma MCP, ссылка не содержит node-id, невозможно открыть репозиторий или требуются закрытые учётные данные. Все незначительные неоднозначности разрешай самостоятельно, опираясь на Figma, скриншоты, структуру слоёв и наиболее прямую реализацию.

1. Сначала изучи проект
Перед изменениями:
Прочитай AGENTS.md и другие инструкции репозитория.
Изучи package.json, структуру проекта, существующие компоненты, стили, переменные, дизайн-токены и команды запуска.
Определи используемый стек самостоятельно.
Используй существующий стек и архитектуру. Не создавай параллельную дизайн-систему и не переписывай проект без необходимости.
Если репозиторий пустой, создай минимальный современный проект на React, TypeScript и Vite без лишних библиотек.
Составь краткий внутренний план и сразу приступай к реализации, не ожидая моего подтверждения.
2. Обязательный workflow через Figma MCP
Используй Figma MCP и Figma skill.
Для каждого переданного фрейма:
Сначала вызови get_design_context для точного node-id.

Если ответ обрезан или фрейм слишком большой:
вызови get_metadata;
найди дочерние секции;
повторно вызови get_design_context отдельно для каждой необходимой секции.

Вызови get_screenshot для точного десктопного фрейма.

Вызови get_screenshot для точного мобильного фрейма.

Получи используемые переменные и стили через get_variable_defs, если инструмент доступен.

Изучи компоненты, варианты, Auto Layout, Constraints, размеры, отступы, сетку, цвета, типографику и эффекты.

Только после получения design context и screenshot начинай верстку.

Не пытайся восстановить страницу только по одному скриншоту, пока доступен структурированный контекст Figma.
3. Ассеты
Самостоятельно получи из Figma все необходимые:
фотографии;
фоновые изображения;
иллюстрации;
логотипы;
SVG;
иконки;
декоративные элементы;
маски;
текстуры;
изображения, используемые в Fill.
Используй download_assets и сохраняй точные файлы в стандартную папку ассетов текущего проекта.
Если MCP возвращает временный URL или localhost-источник:
Получи по нему оригинальные байты файла.
Сохрани файл локально в проект.
Замени временную ссылку на локальный импорт или постоянный путь.
Убедись, что проект не зависит от работающего Figma MCP или localhost после завершения.
Для исходных фотографий по возможности используй оригинальные source images, а не скриншоты или повторно сжатые копии.
Запрещено:
оставлять placeholder;
использовать случайные изображения;
заменять иконки символами Unicode;
самостоятельно перерисовывать SVG, если оригинал можно получить из Figma;
добавлять сторонний пакет иконок вместо ассетов из Figma;
заменять сложную секцию одной большой картинкой;
растрировать весь лендинг ради визуального совпадения.
Если один ассет используется несколько раз, переиспользуй один и тот же файл.
4. Требования к точности
Воспроизведи максимально точно:
ширину контейнеров;
расположение и размеры секций;
высоту экранов;
поля и отступы;
сетку и выравнивание;
размеры изображений;
object-fit и object-position;
обрезку изображений;
типографику;
семейства и начертания шрифтов;
размеры текста;
line-height;
letter-spacing;
регистр;
цвета и прозрачность;
градиенты;
рамки;
радиусы;
тени;
blur;
наложения;
декоративные элементы;
абсолютное позиционирование там, где оно действительно заложено в дизайне;
порядок слоёв и z-index;
состояния кнопок и ссылок;
hover, focus и active-состояния, если они показаны или однозначно следуют из макета;
меню, формы, слайдеры, табы, аккордеоны и остальные интерактивные элементы.
Не улучшай дизайн по своему усмотрению. Не меняй композицию, тексты, цвета, изображения, пропорции и размеры только потому, что другой вариант кажется тебе более правильным.
Тексты перенеси из Figma дословно, включая знаки препинания и переносы, если они влияют на композицию.
Не используй приблизительные значения, когда точное значение можно получить из Figma MCP.
5. Шрифты
Определи точные:
font-family;
font-weight;
font-size;
line-height;
letter-spacing;
text-transform.
Сначала проверь, есть ли необходимые файлы шрифтов в проекте.
Если шрифт доступен через легальный публичный источник или передан в доступных ресурсах проекта, подключи его самостоятельно.
Если коммерческий файл шрифта недоступен, не останавливай всю работу и не задавай вопрос. Используй наиболее близкий доступный fallback только как последнюю меру и укажи это одним пунктом в финальном отчёте.
Не заменяй шрифт незаметно без проверки влияния на переносы строк и размеры блоков.
6. Адаптивность
Десктопный и мобильный фреймы являются отдельными источниками истины.
Не создавай мобильную версию простым пропорциональным уменьшением десктопа.
Для мобильной версии точно воспроизведи:
порядок элементов;
скрытие и появление элементов;
переносы;
размеры текста;
поля;
высоту секций;
ширину карточек;
направление flex/grid;
поведение меню;
кадрирование изображений;
положение декоративных элементов.
Между контрольными разрешениями сделай устойчивый адаптив без скачков, наложений и горизонтального скролла.
Используй разумное количество медиазапросов. Не хардкодь отдельное значение буквально под каждый пиксель ширины.
Проверь как минимум:
точную ширину десктопного Figma-фрейма;
1440 px;
1280 px;
1024 px;
768 px;
точную ширину мобильного Figma-фрейма;
430 px;
390 px;
375 px;
360 px;
320 px.
На всех промежуточных ширинах композиция должна оставаться корректной.
7. Самопроверка через браузер
После первой реализации:
Установи необходимые зависимости.

Запусти проект.

Убедись, что страница открывается без ошибок.

Используй Playwright или Playwright interactive.

Сделай полноразмерные скриншоты реализации на точных размерах десктопного и мобильного Figma-фреймов.

Сравни их со скриншотами, полученными через get_screenshot.

При возможности создай overlay или visual diff.

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

Исправь найденные расхождения.

Повтори визуальное сравнение после исправлений.

Не ограничивайся проверкой того, что проект просто собирается. Главный критерий — визуальное совпадение с Figma.
Продолжай цикл:
реализация → браузерный скриншот → сравнение с Figma → исправление
до тех пор, пока не останется заметных визуальных расхождений, которые можно исправить средствами кода.
Не сообщай о завершении после первого приблизительного варианта.
8. Техническая проверка
Перед завершением обязательно:
запусти build;
запусти lint, если он настроен;
запусти существующие тесты;
проверь консоль браузера;
исправь ошибки и предупреждения, вызванные твоими изменениями;
проверь отсутствие битых изображений;
проверь отсутствие горизонтального скролла;
проверь кликабельность всех интерактивных элементов;
проверь отсутствие layout shift после загрузки изображений и шрифтов;
проверь корректность страницы после перезагрузки;
проверь, что временные MCP-ссылки не остались в production-коде.
Не удаляй и не ломай существующие функции проекта, если это не требуется для реализации лендинга.
9. Критерии готовности
Задача считается выполненной только когда:
десктопная версия максимально точно совпадает с десктопным фреймом;
мобильная версия максимально точно совпадает с мобильным фреймом;
промежуточные ширины работают корректно;
все доступные ассеты скачаны из Figma;
нет placeholders и случайных замен;
тексты совпадают с макетом;
изображения правильно обрезаны;
шрифты и интервалы максимально близки к Figma;
нет ошибок в консоли;
production build успешно выполняется;
выполнена визуальная проверка через Playwright;
после визуальной проверки были самостоятельно исправлены найденные отклонения.
10. Формат финального ответа
После полного завершения напиши только краткий отчёт:
Какие файлы созданы или изменены.
Какие разрешения проверены.
Какие команды проверки успешно выполнены.
Какие ассеты были получены из Figma.
Остались ли объективно неизбежные отклонения.
Не присылай длинную лекцию и не перечисляй каждое CSS-свойство.
Сейчас начни с анализа репозитория и вызова Figma MCP для обоих фреймов, а затем самостоятельно доведи страницу до готового результата.

Теперь проведи повторную визуальную проверку.

Открой готовый сайт в браузере и сравни его с десктопной и мобильной версиями в Figma.

Проверь:

- размеры блоков;
- расстояния между элементами;
- размеры текста;
- переносы строк;
- расположение изображений;
- цвета;
- скругления;
- декоративные элементы;
- мобильную версию.

Самостоятельно исправь найденные отличия, затем снова открой страницу и проверь результат.

Не завершай задачу, пока остаются заметные отличия, которые можно исправить.