Сайт нейросетью в Framer можно собрать за один текстовый запрос, а вот довести его до ума — уже отдельная работа. Открываешь новый проект, включаешь Generate with AI, описываешь бизнес — и через тридцать-шестьдесят секунд получаешь готовую структуру страницы с текстами и картинками.
AI закрывает примерно первую половину работы — раскладывает секции, подбирает шрифты, пишет черновой текст. Всё остальное — сетку, CMS, SEO-теги, адаптацию под телефон, свой домен и оплату тарифа — доводишь руками. Начать можно и с шаблона из маркетплейса Framer, а не с чистого промпта — тогда нейросеть в основном донаполнит его текстом и картинками под твою нишу. Дальше — весь путь по шагам, от промпта до сайта, который не стыдно показать клиенту.
Кстати, если после сборки решишь перейти на платный тариф — а без него не подключить свой домен — оплата российской картой напрямую не пройдёт.
Как нейросеть Framer собирает сайт по одному описанию
Точка входа — кнопка Generate with AI в новом проекте. Внутри неё работает инструмент, который в статьях и туториалах часто называют Wireframer: он читает текстовый промпт и за один проход раскладывает разметку, подбирает шрифты и цвета, пишет черновые тексты и подставляет фотографии-заглушки.
Промпт стоит делать конкретным. Не «сайт для кофейни», а «лендинг для кофейни с меню, картой точек, формой брони столика и тёплой цветовой гаммой». Чем точнее описаны ниша, разделы и настроение, тем меньше потом переделывать вручную.
Результат приходит быстро: тридцать-шестьдесят секунд — и на экране уже герой-блок, галерея, форма контактов и подвал сайта. Но это не готовый продукт, а сильный черновик. Нейросеть закрывает структуру и наполнение, а стиль, логику и мелкие детали доводит человек.
Экономит это часы ручной вёрстки, но не всю работу целиком.
Лучше всего Framer AI справляется с маркетинговыми сайтами: лендингами, портфолио, SaaS-страницами с блоками цен и отзывов. Для интернет-магазина со сложной логикой каталога одного промпта не хватит — там генерация задаёт только скелет, а витрину и корзину собираешь отдельно.
Кроме генерации макета, в Framer есть Workshop — отдельный ИИ-инструмент, который по описанию собирает не блок дизайна, а рабочий компонент с логикой: например, калькулятор стоимости или форму с условной логикой полей. Для обычного лендинга это редко нужно, а вот для чего-то интерактивного — то, что закрывает разрыв между дизайном и кодом.
Первым делом стоит пройтись по сетке: у сгенерированных секций отступы часто скачут — где-то 24 пикселя, где-то 40, хотя глазу нужна единая шкала. В панели Layout выставляешь общий шаг, обычно 8 или 16 пикселей, и подгоняешь под него все блоки. Готовые цвета и шрифты лучше сразу сохранить в стили проекта — тогда правки не разъедутся между страницами, если сайт за вечер вырастет с трёх экранов до десяти.
Дальше — текст. AI пишет ровно, но обезличенно: заголовки без конкретики, буллиты общего смысла. Переписываешь их под реальный продукт, вставляешь настоящие цены, имена и фотографии вместо стоковых заглушек.
Стоит проверить и типографику: сколько начертаний шрифта использовано и не спорят ли между собой два акцентных цвета. Обычно хватает одной гарнитуры для заголовков, одной для текста и максимум двух акцентных оттенков.
Отдельно взгляни на анимации. Framer AI иногда навешивает эффект появления на каждый блок подряд, и страница начинает мигать при скролле. Оставь плавное движение для двух-трёх ключевых элементов, а остальное верни в статичное состояние — так макет читается спокойнее.
Пяти минут обычно достаточно, чтобы пройтись по всем кнопкам на макете.
В конце — беглый прогон по компонентам: кнопки, карточки и формы должны вести себя одинаково на всех страницах. Если где-то кнопка «Записаться» выглядит иначе, чем на соседней странице, это повод свести её в переиспользуемый компонент Framer. Заодно стоит переименовать слои понятными названиями — если сайт потом будут дорабатывать с разработчиком, разбираться в «Frame 482» вместо «Кнопка Купить» никто не захочет.
CMS для карточек, блога и каталога
Если на сайте будут повторяющиеся блоки — посты блога, кейсы, товары — заводишь CMS-коллекцию. Жмёшь «Add Collection», задаёшь поля (заголовок, обложка, дата, текст), а через Insert → Collection Lists перетаскиваешь список на страницу и привязываешь слои к полям. На бесплатном тарифе доступно до десяти коллекций, но опубликовать сайт с CMS на своём домене без платного плана не выйдет, да и лимит карточек там заметно ниже.
Какие SEO-настройки Framer берёт на себя, а какие нет?
Базовый каркас Framer собирает сам: у каждого опубликованного сайта автоматически появляются sitemap.xml и robots.txt, а быстрый хостинг ускоряет отклик страниц.
Этого достаточно, чтобы сайт вообще нашли поисковики.
Руками нужно прописать остальное. В Site Settings и Page Settings задаёшь заголовок и описание для каждой страницы отдельно: заголовок стоит уместить примерно в 60 символов, описание — в 150–160, иначе Google обрежет их многоточием. Для карточек CMS делаешь не статичный, а шаблонный мета-тег, который сам подставляет название конкретного поста или товара. Есть и отдельный ИИ-помощник по SEO, который подсказывает формулировки метатегов для каждой страницы, но финальное решение всё равно за тобой.
Дальше — alt-текст у картинок, который нейросеть почти никогда не заполняет, человекочитаемые адреса страниц и внутренние ссылки между разделами. И финальный штрих: зарегистрировать сайт в Google Search Console и отправить туда ссылку на sitemap.xml — иначе поисковик может не узнать о новых страницах неделями.
Адаптация под телефон и планшет: брейкпоинты Framer
Framer проектирует сайт от десктопа вниз. Рабочая ширина — 1200 пикселей, а два меньших брейкпоинта, Tablet на 810 и Phone на 390, наследуют вёрстку сверху. Значит, если поправить блок на десктопе, изменения по умолчанию проедут и на мобильную версию, пока ты не переопределишь их отдельно. Сгенерированный нейросетью макет обычно неплохо ведёт себя на десктопе и заметно хуже — на маленьких экранах: там и нужна основная ручная работа.
### Что Framer меняет по умолчанию
На вкладке Tablet чаще всего достаточно сократить сетку с трёх колонок до двух и подрезать внутренние отступы — на среднем экране блокам становится тесно. На Phone правки крупнее: многоколоночная сетка схлопывается в один столбец, горизонтальные ряды карточек превращаются в вертикальный список, а крупный заголовок героя нужно уменьшить в полтора-два раза, иначе он не влезет в экран. Изображения в геро-блоке на телефоне часто стоит обрезать иначе: то, что красиво смотрится широким кадром на десктопе, на вертикальном экране превращается в мешанину, если просто сжать пропорционально.
Меню тоже переезжает: на десктопе это горизонтальный список ссылок, а на телефоне — обычно кнопка-гамбургер со скрытой панелью. Framer AI такую замену иногда предлагает сама, но проверить её вручную всё равно стоит: расстояние между пунктами меню и размер тач-зоны на телефоне нейросеть прикидывает приблизительно.
### Что чаще всего ломается на маленьких экранах?
На практике чаще всего страдают три вещи: текст наезжает на кнопку, картинка обрезается не по центру, а форма растягивается за пределы экрана. Все три правятся точечно, но только если проверить их глазами, а не поверить, что брейкпоинт подстроится сам. Хорошее эмпирическое правило — не делать тач-зону кнопки меньше 44 на 44 пикселя: на таком размере не промахиваешься пальцем даже на маленьком экране.
Framer Preview Mode позволяет пролистать макет на всех трёх ширинах прямо в редакторе, а инструменты разработчика в браузере дают точнее прикинуть промежуточные размеры — между 390 и 810 пикселями сегодня укладывается большинство телефонов и планшетов. Смысл в том, чтобы пройти макет на реальном устройстве перед публикацией, а не только на превью внутри конструктора.
При желании к трём стандартным брейкпоинтам можно добавить свои — например, отдельную ширину для больших мониторов на 1600 пикселей. Для обычного сайта на нейросетевом черновике хватает и трёх: время лучше потратить на проверку контента, а не на размножение промежуточных вариантов вёрстки. Настроенный набор брейкпоинтов можно скопировать в другой проект Framer через стили — не придётся каждый раз подбирать значения заново.
Можно ли подключить свой домен к сайту от нейросети?
Да, но только на платном тарифе. На Free можно посмотреть сайт лишь на бесплатном поддомене вида имя.framer.website. Как только переходишь на Basic или выше, в Site Settings открывается вкладка Domains с кнопкой «Connect a domain you own».
Это тот же процесс, что и для WordPress или Tilda.
Framer не продаёт домены сам, кроме бонусного .com при годовой оплате Basic или Pro, и не управляет DNS — эти записи всё равно настраиваешь у своего регистратора: Reg.ru, Namecheap, Cloudflare, где угодно. Для корневого домена вроде site.ru прописываешь две A-записи на статичные IP-адреса Framer, а для поддомена вроде www — одну CNAME-запись.
Изменения расходятся по интернету не мгновенно: обычно от пары часов до 48 часов, пока новые DNS-записи не разойдутся по всем провайдерам. Проверить, разошлись ли они, можно бесплатным сервисом whatsmydns.net — он покажет статус сразу по разным точкам мира, не придётся гадать вслепую. Переделывать записи заново в этот момент не стоит — так только собьёшь кэш ещё раз.
Сколько стоит Framer
Free-тариф бесплатный, но урезанный: свой домен не подключить, на сайте виден баннер Framer, а лимиты — около тысячи посетителей в месяц и один гигабайт трафика. Хватает, чтобы довести макет до ума и показать его клиенту, но не для продакшена.
Дальше цены считаются в долларах и время от времени меняются, поэтому суммы стоит сверять на официальной странице тарифов: у разных источников они расходятся на пару долларов в зависимости от способа оплаты и валюты. Помесячная оплата всегда дороже годовой: например, Basic на помесячном тарифе обходится примерно в полтора раза дороже, чем при оплате сразу за год, и то же самое касается Pro. Если платишь через посредника разово, чаще выгоднее сразу закрыть год, а не продлевать подписку каждый месяц.
Basic — от 10 $ в месяц при годовой оплате: свой домен, до 30 страниц, 2 CMS-коллекции, 50 ГБ трафика.
Pro — от 30 $ в месяц при годовой оплате: до 150 страниц, 10 CMS-коллекций, 100 ГБ трафика, стейджинг и ветки для черновиков.
Enterprise — цена по запросу, для сайтов с нестандартными лимитами и выделенной поддержкой.
Это не разовая покупка, а месячная подписка.
Каждый тариф даёт лимит кредитов на работу ИИ-агентов: 500 в день на Free, от 1000 в месяц на Basic и от 3000 на Pro. Если кредиты кончаются раньше конца месяца, их можно докупить отдельно.
### Как оплатить Framer из России?
Напрямую российской картой оплату Framer не провести: расчёты идут через Stripe, а он не принимает карты российских банков.
Универсальный обходной путь — виртуальная карта зарубежного банка в долларах или евро. Другой вариант — заплатить рублями сервису-посреднику, а он проведёт платёж собственным юрлицом за рубежом. Второй способ обычно быстрее: не нужно оформлять и пополнять отдельную карту ради одной подписки.
Быстрые ответы о сайте на Framer
### Сколько по времени занимает путь от промпта до публикации?
Сама генерация — минута, редко больше. Ручная доводка — от пары часов на простом лендинге до нескольких дней, если добавляешь CMS, тексты под реальный продукт и SEO-настройки по всем страницам. На сайт-визитку закладывай вечер-два, на сайт с блогом и каталогом — неделю с перерывами.
### Не развод ли платить за Framer через посредника?
Схема стандартная для многих зарубежных сервисов: банк в России не может провести платёж напрямую, а посредник оформляет его от своего юрлица за рубежом. Это не отменяет обычной осторожности — сверяйся с официальной страницей тарифов Framer и не отправляй лишние данные никому, кроме проверенных каналов.
### Можно ли перенести сайт с Framer на другой хостинг?
Экспорта в чистый HTML или WordPress Framer не даёт — сайт живёт в его собственной инфраструктуре. Перенести получится контент и структуру, но пересобирать их придётся вручную в другом конструкторе или у разработчика с нуля. Framer стоит выбирать с расчётом остаться в нём надолго, а не как временную площадку.
### Что будет с сайтом, если не оплатить тариф вовремя?
Framer не удаляет сайт мгновенно — обычно даёт льготный период и присылает уведомления на почту. Но домен и часть платных функций отключаются, пока подписка не восстановлена, а трафик сверх лимита бесплатного плана начинает подсвечиваться баннером Framer поверх сайта. Проще держать дату оплаты в календаре, чем разбираться с этим постфактум.
Мой личный лайфхак: как только опубликуешь черновик, сразу открой Framer Preview на телефоне и полистай его как обычный посетитель — не в редакторе, а вживую. Ошибки в отступах и кнопках на маленьком экране находятся за пять минут, а не за час отладки внутри конструктора. Заодно сохрани скриншот финального макета на каждом брейкпоинте — если через полгода будешь что-то менять, будет с чем сверяться, а не гадать, как оно выглядело изначально.
Комментарии
Войдите, чтобы написать комментарий