Нейросети уже помогают создавать сайты: собирать страницы по описанию, писать код и менять интерфейсы. Когда у вас есть готовый макет Figma, работа становится конкретнее. Нужно перенести принятый дизайн в Tilda, сохранить возможность редактирования и довести страницу до рабочего состояния.
Одного запроса «сверстай этот макет» для этого мало. Агенту нужны доступ к исходнику, инструменты для изменения Tilda и понятный результат каждого этапа. Сначала проверяем эти условия, затем собираем одну страницу, сравниваем её с макетом и только после этого переносим решение на остальные.
В этой инструкции Omny Studio показывает, как сверстать сайт на Тильде через нейросеть по готовому макету Figma: подключить AI-агента к MCP-серверу Тильды, передать исходник, собрать страницу и проверить результат.
1. Выберите формат сайта: Zero Block или HTML
Сразу договоритесь о формате результата. Если вы хотите самостоятельно менять заголовки, фотографии и кнопки в редакторе, попросите собрать страницу из редактируемых элементов Tilda. Для индивидуального макета это могут быть тексты, изображения, кнопки, группы и формы Zero Block.
Сгенерированный HTML сам по себе остаётся кодом. Если вставить целую страницу в HTML-блок, её части не станут отдельными элементами Zero Block. Такой вариант может быть уместен для специального виджета, но для последующего редактирования обычных блоков нужен другой результат.
Есть два рабочих пути: агент собирает элементы через доступные инструменты Tilda или помогает подготовить дизайн для поддерживаемого импорта. Tilda описывает импорт HTML, браузерное расширение и плагин Figma. После импорта также проверяют слои, адаптив и действия.
Поэтому первая договорённость звучит предметно: «Нужна страница в проекте Tilda с редактируемыми элементами, компьютерной и мобильной версиями, рабочими ссылками и формой». Это даёт критерий, по которому можно принять работу.
2. Подготовьте макет Figma, шрифты и адаптивы
Для начала выберите конкретный фрейм Figma. В большом файле могут лежать старые варианты, эксперименты и несколько версий одного экрана. Укажите ссылку на нужный фрейм и поясните, какие страницы входят в задачу. Так агент будет переносить согласованный дизайн.
- Исходник. Актуальные фреймы, компоненты, стили и состояния меню, кнопок, форм.
- Адаптив. Макет для телефона или описание того, как меняются порядок элементов, колонки и размеры.
- Контент. Полные тексты, логотипы, фотографии, иллюстрации и ссылки. Для изображений — исходники нужного качества.
- Шрифты. Названия, начертания и файлы или разрешённый способ подключения.
- Проект. Нужный сайт в Tilda, страницы для изменения и правила публикации.
Один скриншот удобен для визуального сравнения, но не заменяет структуру макета. По картинке труднее точно определить отступ, начертание, поведение компонента и правило изменения ширины. Если часть решений отсутствует, лучше записать вопросы до начала сборки.
Например, три карточки на компьютере могут становиться одной колонкой на телефоне. У обложки может быть важное кадрирование. У длинного заголовка может меняться размер. Эти решения нужно либо взять из мобильного макета, либо согласовать отдельно, а затем использовать на всех похожих страницах.
Если макет ещё не готов, сначала нужен UX/UI-дизайн: структура, состояния и адаптивные экраны. Нейросеть не должна придумывать эти решения во время переноса без согласования.
3. Как подключить MCP Tilda к AI-агенту
Нейросеть работает с Tilda через инструменты подключения. MCP передаёт агенту доступные операции и результаты их выполнения. Само упоминание Tilda в переписке такого доступа не создаёт: сначала нужно настроить соединение и проверить чтение проекта.
Для описанного здесь пути используйте совместимый настольный агент, например Codex. В официальной инструкции Tilda MCP указан именно настольный способ подключения; обычный облачный чат в браузере не получает это подключение автоматически.
По официальной справке на 19 октября 2026 года MCP-сервер Тильды доступен на тарифах Personal и Business. Перед настройкой проверьте доступность подключения в своём аккаунте и совместимость выбранного приложения.
Откройте MCP server в профиле Tilda
Войдите в Tilda, откройте профиль и выберите MCP server.
Создайте ключ для нужного проекта
Нажмите New key. Укажите имя, нужный проект, права и срок. Для первого чтения достаточно соответствующих прав; для сборки и публикации потребуются разрешения на эти действия. Ключ показывается один раз — сохраните его в своём подключении.
Подключите выбранное приложение
Выберите агент в инструкции Tilda и используйте предложенный промпт или вариант ручной настройки. Действующий ключ не включайте в публичную статью, скриншот или общее описание задачи.
Если настраиваете Codex вручную, параметры MCP обычно находятся в ~/.codex/config.toml. Сохраните существующие настройки и добавьте нужное подключение по инструкции клиента. Формат описан в официальной документации OpenAI.
Скопируйте и отправьте агенту
Используй Tilda MCP. Прочитай название проекта [название или ID] и список его страниц. Ничего не изменяй. Проверь, доступны ли инструменты для чтения и создания нужных элементов Zero Block. Отдельно сообщи, есть ли разрешение на публикацию.
Нужный результат этого запроса — фактическое название проекта и его страницы. Общий рассказ о том, как устроена Tilda, не подтверждает соединение. При ошибке проверьте аккаунт, выбранный проект, срок ключа и разрешения.
4. Передайте макет Figma агенту: MCP или экспорт
Подключение Tilda решает только половину задачи. Теперь нужно проверить исходник. Ссылка на Figma указывает, что вы хотите использовать, но сама по себе не даёт агенту возможности прочитать файл. В выбранной среде должен быть доступный инструмент Figma и разрешение на нужный дизайн.
В документации OpenAI о MCP Figma приведена как пример подключения для доступа к макетам. Конкретный способ зависит от приложения и доступных интеграций. Практическая проверка одинакова: попросите прочитать выбранный фрейм и назвать его реальные параметры.
Скопируйте и отправьте агенту
Прочитай через доступный инструмент Figma фрейм [ссылка]. Назови его размер, шрифты и начертания, основные интервалы, колонки и повторяющиеся компоненты. Опиши структуру блоков и мобильные состояния. Если файл или часть данных недоступны, укажи это прямо. Не угадывай значения по скриншоту. Пока ничего не меняй в Tilda.
Сверьте ответ с макетом. Если агент назвал другой экран или не получил данные, сначала восстановите доступ. Иначе неточные предположения станут основой всей страницы.
Если прямого подключения Figma нет
Подготовьте экспорт изображений и краткую спецификацию: ширину фрейма, сетку, размеры и начертания текста, отступы, цвета и состояния. Приложите скриншоты для сравнения. Агент сможет работать по этим данным, но точность будет зависеть от полноты описания.
Другой вариант — перенести слои через официальный плагин Figma to Tilda и поручить агенту доработку полученного Zero Block. Перед импортом проверьте требования и ограничения из справки. Не меняйте исходный дизайн только ради импорта без согласования.
5. Закрепите дизайн-систему и выберите страницу
Когда оба доступа проверены, попросите составить короткую спецификацию будущей страницы. В ней нужны список блоков, используемые стили, повторяющиеся элементы, поведение на телефоне и открытые вопросы. Это рабочая опора для сборки и последующих правок.
Основное правило: переносить существующую дизайн-систему. Шрифты, размеры, межстрочные интервалы, цвета, линии, скругления и кнопки берутся из макета. Для новой детали сначала ищут аналог в нём. Так страницы будут выглядеть частью одного сайта.
В Codex устойчивые правила проекта можно хранить в AGENTS.md: приложение читает такие инструкции перед работой. Подход описан в официальной документации OpenAI. В другой среде закрепите правила доступным способом.
Первой выберите страницу, где есть основные элементы будущего сайта: первый экран, карточки, текст, кнопка и форма. Она станет минимальным рабочим образцом. Если страниц десять, соберите и согласуйте одну целиком, прежде чем повторять её решения на остальных.
Также обозначьте границы: какую страницу можно создать или изменить, что нужно сохранить и когда разрешена публикация. Для существующего сайта полезно заранее сохранить исходное состояние изменяемых блоков, чтобы конкретную правку можно было отменить.
Про подготовку проекта и последовательность этапов отдельно рассказали в статье как подойти к разработке сайта на Тильде.
6. Как собрать страницу по макету через Tilda MCP
На этом этапе задача уже содержит исходник, материалы и критерии результата. Теперь отправьте запрос на действие: создать страницу в указанном проекте, собрать её блоки и проверить результат. Не ограничивайтесь просьбой «расскажи, как это сделать».
Скопируйте и отправьте агенту
Собери черновик страницы [название] в проекте Tilda [название или ID] по фрейму Figma [ссылка]. Используй согласованные материалы [файлы].
Собирай обычные блоки страницы из редактируемых элементов Zero Block: текстов, изображений, кнопок, групп и форм. Не заменяй всю страницу одним HTML-блоком. Используй существующие стили макета.
Сначала собери компьютерную версию, затем мобильную по фрейму [ссылка] или согласованным правилам. Сохрани исходник изменяемых блоков. Проверь результат в браузере при ширинах [значения]. Покажи страницу и перечисли расхождения с макетом. Пока не публикуй.
Если агенту не хватает инструмента для определённого элемента, попросите назвать ограничение и предложить конкретный способ решения. Например, подготовить часть для импорта или оставить отдельный виджет кодом. Такой участок должен быть обозначен заранее.
Как понять, что сборка действительно состоялась
Откройте созданную страницу в Tilda. Попробуйте выбрать и изменить один заголовок, изображение и кнопку. Убедитесь, что это отдельные элементы. Затем откройте страницу в браузере и сравните её с Figma при одинаковой ширине окна.
Проверяйте сначала крупные связи: ширину сетки, высоту первого экрана, размер заголовка, колонки и основные интервалы. Затем переходите к деталям: толщине линий, радиусам, переносу слов и положению подписи. Используйте полный текст и реальные фотографии: короткие заглушки скрывают проблемы с высотой блоков.
Связанные элементы лучше располагать так, чтобы они учитывали высоту друг друга. Если абзац становится длиннее, кнопка под ним должна сдвинуться, а не оказаться под текстом. Особенно важно проверить это после загрузки настоящего шрифта.
7. Проверьте мобильную вёрстку, ссылки и формы
Мобильную версию проверяют как отдельную композицию. Укажите порядок элементов, число колонок, отступы и поведение меню. Например: сначала заголовок, затем изображение и описание, после них кнопка. Это точнее общей просьбы сделать страницу адаптивной.
Сравните страницу с мобильным фреймом, затем проверьте промежуточную ширину. Текст не должен наезжать на соседние элементы, а изображения — терять важную часть из-за кадрирования. Проверьте длинные подписи, открытое меню и ошибку формы, а не только первый экран.
Далее пройдите реальный путь посетителя: нажмите основную кнопку, откройте форму, заполните её и проверьте успешную отправку. Тестовая заявка должна попасть согласованному получателю. Если предусмотрена страница благодарности, переход на неё проверяют после успешной отправки.
Другие состояния добавляйте по макету: раскрытие карточки, переключение языка, светлую тему или анимацию. Для поведения при наведении заранее определите понятный вариант на телефоне. Не расширяйте задачу функциями, которые не нужны этому сайту.
8. Исправьте расхождения и создайте общие компоненты
После первого просмотра обычно появляются расхождения: не тот перенос заголовка, слишком высокая карточка, обрезанная фотография. Исправляйте их адресно. В запросе назовите страницу, блок, устройство, желаемый результат и то, что нужно сохранить.
Скопируйте и отправьте агенту
На странице [адрес], в блоке [название], при ширине [значение] заголовок переносится на четыре строки вместо трёх в макете. Проверь шрифт, начертание и ширину текста по Figma. Исправь причину, сохрани размер сетки и соседние блоки. Покажи результат при той же ширине.
Фраза «сделай красивее» оставляет слишком много решений открытыми. Если дизайн уже утверждён, опирайтесь на его параметры. Для отката называйте конкретную последнюю правку или сохранённую версию. После согласования закрепите актуальный вариант, чтобы отменённое решение не вернулось дальше.
Когда образец готов, переходите к общим элементам. Одинаково выглядящие копии блоков не становятся связанными сами. У каждого повторяющегося элемента должен быть понятный источник и способ обновления.
Для шапки и футера используйте общие страницы, назначенные в настройках сайта Tilda. Порядок описан в официальной справке. Для остальных повторяющихся секций выберите подходящий механизм проекта: общий шаблон, библиотечный блок или источник данных. Сразу уточните, как обновление попадёт во все места использования.
Теперь можно собирать остальные страницы по согласованному образцу, меняя их содержание. На каждой проверяйте исключения: длинные названия, другое число карточек и дополнительные поля. Тиражирование экономит время, когда исходный шаблон уже проверен.
9. Проверьте и опубликуйте сайт на Tilda
Готовность сайта подтверждается в браузере. Сохранённые настройки и уверенный ответ агента ещё не показывают, что посетитель увидит нужную версию. Перед публикацией проверьте черновик, после неё — публичный адрес.
- Страница состоит из согласованных редактируемых элементов; специальные участки кода отдельно обозначены.
- Сетка, шрифты, интервалы и изображения совпадают с актуальным макетом.
- На телефоне и промежуточных ширинах нет наложений и переполнения страницы.
- Меню, ссылки и основная форма проходят нужный пользовательский сценарий.
- Общие элементы обновлены во всех местах использования.
Скопируйте и отправьте агенту
Проверь согласованные страницы [список] на компьютере и телефоне. Сравни их с фреймами Figma при одинаковой ширине, проверь меню, ссылки, загрузку медиа и форму. Исправь подтверждённые расхождения. Публикация: [укажите согласованный режим]. В итоге раздели: что изменено, что опубликовано, что проверено в браузере и что осталось проверить вручную.
Опубликуйте согласованные страницы и повторно откройте их по публичным адресам. При изменении общей шапки или футера Tilda просит публиковать все страницы, где они должны обновиться. Не ограничивайтесь публикацией самих общих страниц.
Отдельный разбор SEO сайтов на Тильде в Яндекс и Google поможет понять, какие задачи продвижения остаются после публикации.
Работа через нейросеть становится управляемой, когда каждый этап даёт конкретный результат: прочитанный макет, подключённый проект, одна проверенная страница, готовые общие элементы и опубликованный сайт. Именно в такой последовательности проще сохранить дизайн и не переносить ошибку сразу на весь проект.
Вопросы о ChatGPT и MCP Tilda
Как подключить Tilda MCP к ChatGPT или Codex?
Официальная инструкция Tilda описывает подключение через совместимый настольный AI-агент. Для этого маршрута используйте поддерживаемое приложение, например Codex, создайте ключ в профиле Tilda и проверьте соединение чтением проекта. Совместимость конкретного клиента и доступные инструменты уточняйте по его актуальной документации.
Чем Figma MCP отличается от Tilda MCP?
Figma MCP передаёт агенту данные исходного дизайна: выбранный фрейм, стили и компоненты. MCP-сервер Тильды предоставляет операции с проектом сайта. Для переноса макета нужны и достоверный исходник, и способ изменить страницу.
Можно ли сверстать макет без Figma MCP?
Можно передать экспорт материалов и спецификацию или воспользоваться поддерживаемым импортом Figma в Zero Block. После переноса проверяют слои, адаптивы и поведение элементов. Один скриншот не содержит всех правил дизайн-системы.
Будет ли сайт через нейросеть редактироваться в Zero Block?
Это зависит от способа сборки. Попросите создать обычные блоки из редактируемых элементов Zero Block или использовать поддерживаемый импорт. Затем проверьте в редакторе, что заголовок, изображение и кнопка выбираются отдельно. HTML, оставшийся кодовым виджетом, сам по себе не становится набором элементов Zero Block.
Какой тариф Tilda нужен для подключения MCP?
По официальной справке на 19 октября 2026 года — Personal или Business. Доступность и условия стоит повторно проверить в своём аккаунте перед настройкой.
Если хотите передать сборку и проверку команде, Omny Studio помогает с разработкой лендинга на Tilda и многостраничного сайта по согласованному макету.
Автор инструкции — Omny Studio. Справка и интерфейсы проверены 19 октября 2026 года. Названия пунктов и доступность подключений могут зависеть от приложения и аккаунта.
