Из макета Figma — в работающий сайт: как сделать автовёрстку с помощью ИИ
Когда дизайн-макет в Figma готов, следующая задача — сделать по нему работающий сайт. Нужно сверстать страницы для разных размеров экрана, настроить навигацию и добавить контент.
На этапе вёрстки часть работы можно поручить ИИ — он соберёт блоки страницы и перенесёт оформление из макета. Расскажем, как загрузить результат в конструктор сайтов Taptop, проверить страницу и подготовить сайт к запуску.
Как из макета получить редактируемую страницу в конструкторе
Чтобы ускорить вёрстку по готовому дизайну, команда Taptop разработала систему автоматического переноса макетов из Figma в свой конструктор сайтов.
ИИ-ассистент с помощью скилла Taptop Bridge считывает из Figma структуру блоков, тексты и оформление и по этим данным собирает вёрстку. Расширение для Chrome загружает результат в визуальный редактор Taptop вместе с изображениями и версиями страницы для разных экранов, если они есть в макете.
Страницу можно редактировать после переноса. Заголовки, фотографии и кнопки появляются в редакторе как отдельные элементы. Например, на странице услуг можно заменить фото, отредактировать текст на кнопке или переставить элементы местами прямо в редакторе Taptop.
Общее оформление можно менять сразу в нескольких местах. Одинаковые кнопки используют один класс — общий набор настроек, — достаточно один раз поменять в нём цвет фона. Изменение применится ко всем кнопкам с этим классом, в том числе на других страницах проекта.
Формы и другие интерактивные элементы нужно настроить отдельно. Запланируйте время на настройку слайдеров, встроенных видео, карт и сторонних виджетов, если они предусмотрены в проекте.
Какой сайт можно перенести из Figma в конструктор
Для первого переноса подойдёт портфолио, страница услуги или лендинг мероприятия. Выберите страницу с разными по устройству секциями. На первом экране можно оценить типографику и кадрирование фотографии, а на сетке карточек — проверить отступы и порядок элементов на телефоне.
Многостраничный сайт удобнее переносить по одной странице. На первой вы увидите, нужно ли поправить общие стили или подключить шрифт. Когда оформление устроит, используйте те же настройки для остальных страниц.
Какой макет подготовить для автоматического импорта из Figma
Макет можно перенести и в текущем виде. Если хотите сократить число правок после сборки, проверьте, какие решения о вёрстке уже видны в Figma.
Добавьте версии для мобильных устройств. По широкому экрану не всегда понятно, в каком порядке должны идти элементы на узком. Например, фотография может оказаться перед текстом или после него — оба варианта возможны, но только один соответствует вашей задумке. Лучше показать это в макете.
Проверьте повторяющиеся блоки. Если карточки собраны через Auto Layout — функцию Figma, которая управляет расположением элементов и расстояниями между ними, — ИИ-ассистенту проще разобраться в их структуре. Особенно полезно проверить шапку, первый экран и сложные сетки.
Приведите в порядок шрифты и цвета. Одинаковые заголовки лучше оформлять одним текстовым стилем, а повторяющиеся цвета брать из общей палитры. Так меньше вероятность, что визуально одинаковые элементы получат разные настройки.
Как настроить систему автовёрстки Taptop Bridge
Для переноса понадобятся аккаунт Taptop, доступ к макету в Figma и три инструмента.
- Claude Code или Codex — ИИ-ассистент, которому вы будете ставить задачи обычными словами. В этой схеме ему нужен доступ к папке с проектом и возможность запускать инструменты переноса.
- Taptop Bridge — набор инструментов и инструкций для подготовки страницы. Ассистент использует его при сборке.
- Taptop Bridge Extension — расширение Chrome, которое добавляет готовую страницу в редактор Taptop.
Установите Bridge. Скачайте архив Taptop Bridge и распакуйте в постоянную папку. В ней будут храниться результаты переноса. Откройте папку в ИИ-ассистенте и напишите «Установи Bridge и проверь, что всё готово к работе». Для запуска понадобится Node.js версии 22 или новее. Если его нет, нейросеть подскажет, что установить.
Подключите Figma к ИИ-ассистенту. Подключение по MCP даёт нейросети доступ к структуре макета, оформлению и изображениям. Войдите под аккаунтом, у которого есть доступ к файлу. Количество обращений к Figma через MCP зависит от тарифа. Инструкция по подключению · Лимиты Figma MCP
Добавьте расширение в Chrome. Скачайте и распакуйте архив Taptop Bridge Extension. На странице chrome://extensions включите «Режим разработчика», нажмите «Загрузить распакованное расширение» и выберите папку src из распакованного архива. Обновите вкладку редактора Taptop и проверьте, появилась ли синяя кнопка в правом нижнем углу. Папку расширения сохраните на месте, чтобы Chrome мог загружать из неё файлы.
Как перенести страницу из Figma в Taptop
Подробные шаги установки и переноса со скриншотами есть в пошаговой инструкции Taptop.
1. Передайте ссылки на макет
В Figma выделите фрейм с макетом и скопируйте ссылку через Copy link to selection. Если версии для компьютера и телефона находятся в разных фреймах, передайте обе ссылки.
UI-кит в Figma — это набор стилей и компонентов, например цветов, заголовков и кнопок. Если он собран отдельно, передайте на него ссылку вместе с макетом. Если UI-кита нет, ИИ-ассистент сам соберёт общие стили по дизайну страницы.
Пример запроса для чата в рабочей папке Bridge:
Перенеси эту страницу из Figma в Taptop. Вот дизайн для компьютера и телефона: [ссылки]. Сначала покажи предпросмотр. Проверь порядок блоков, шрифты и отступы. Если в макете не хватает данных, перечисли, что нужно уточнить. Файлы сохрани в отдельную папку проекта и покажи, где они лежат.
2. Посмотрите результат до загрузки в конструктор
Предпросмотр Bridge можно открыть в браузере из файла index.html. Попросите ИИ-ассистента показать, где лежит этот файл. На этом этапе можно сверить вёрстку с Figma и исправить расхождения до импорта.
На широком экране сравните с макетом сетку, размеры текста и кадрирование фотографий. Затем сузьте окно браузера и проверьте, как меняется композиция. Например, на промежуточной ширине заголовок карточки может перейти на вторую строку, а кнопка — сместиться ниже соседних. На телефоне отдельно проверьте порядок секций и доступность основных кнопок.
Исправления можно описывать без технических терминов:
На телефоне фотография должна идти после описания. Сейчас она стоит перед ним. Исправь порядок по мобильному макету и покажи обновлённый вариант.
Файл шрифта понадобится, если нужной гарнитуры нет в библиотеке Taptop. Подготовьте файл для загрузки в проект и после подключения проверьте, как текст переносится в заголовках и кнопках.
Когда правки будут готовы, ИИ-ассистент укажет, какие файлы импортировать в Taptop.
3. Импортируйте стили и страницу
Файлы .json для импорта лежат в папке output/json внутри проекта Bridge. Файл с префиксом ui-kit содержит общие стили проекта, а файл с префиксом pages — содержимое страницы и подготовленные варианты для разных экранов.
- Загрузите UI-кит. Создайте в проекте Taptop отдельную страницу для стилей. Нажмите синюю кнопку расширения, выберите файл ui-kit…json и запустите импорт.
- Загрузите страницу. Откройте другую пустую страницу и выберите файл pages…json. В сводке расширения можно проверить, что загруженные с UI-китом стили уже есть в проекте.
- Сохраните результат. После каждого импорта дождитесь окончания загрузки и нажмите Ctrl+S на Windows или Cmd+S на Mac. Если импортируете несколько страниц, для каждой используйте отдельную пустую страницу. UI-кит загружается один раз на проект.
4. Проверьте сайт перед запуском
После импорта переключите холсты Taptop и посмотрите страницу на компьютере, планшете и в двух ориентациях смартфона. Предпросмотр помог проверить сборку в браузере, а здесь нужно убедиться, что оформление и порядок элементов сохранились в редакторе.
Перед публикацией проверьте настройки и действия посетителя.
- Ссылки и меню. Каждый пункт ведёт туда, куда нужно, включая переходы к секциям страницы.
- Формы. Настроен получатель заявки, а тестовое сообщение действительно приходит.
- Дополнительные элементы. Видео, карты, слайдеры и анимация работают, если вы добавили их на сайт.
- Настройки страницы. Заполнены заголовок и описание для поиска, добавлено изображение для превью в соцсетях.
После публикации протестируйте сайт на телефоне. Откройте меню, перейдите к нужной секции и отправьте тестовую заявку, если на странице есть форма.
Правки после импорта зависят от масштаба задачи. Заголовок или фото проще обновить прямо в редакторе. Если нужно заново собрать несколько секций по изменившемуся макету, импортируйте новую версию на отдельную пустую страницу. Так можно сверить её с предыдущей и перенести сделанные вручную правки перед заменой.
Попробуйте перенести свой макет из Figma в Taptop
Создайте проект и перенесите одну готовую страницу из своего макета. После импорта попробуйте внести правку, которая пригодится на вашем сайте, например обновить цену в карточке услуги или заменить фотографию.