Framer — маленькая JavaScript-библиотека выросшая за несколько лет до размеров no-code инструмента. Теперь с искусственным интеллектом!

Генерация сайтов по промту

Промт — от английского prompt, так называется запрос для нейросети. Например, когда мы пишем чат-боту ChatGPT: «Напиши текст на 500 символов для телеграм-канала про путешествие в Тибет в дружелюбно-веселом стиле». Или когда даем указания искусственному интеллекту Kandinsky 2.2: «Сделай пейзаж с озером и горами в стиле импрессионизма». Чем промт подробнее, тем лучше будет результат. Мы рассказывали о нюансах этого дела в статье «Как писать эффективные промты для нейросети».

Framer предлагает использовать ровно такие же запросы для генерации сайтов.

Для этого нужно:

  • кликнуть по Launch в правом верхнем углу сайта;
  • нажать на New — создаем новый проект;
  • жмем на Start with AI;
  • пишем во всплывающем окошке описание своего проекта.

Писать можно по-русски, тогда сайт тоже получится русскоязычным.

Мы придумали такой промт:

Сайт-портфолио зерокодера Василия Яшкина, который занимается разработкой сайтов и приложений без кода. Он использует такие инструменты как Tilda, Wix, Bubble, FlutterFlow и предлагает создание приложения за неделю. Использовать светлую цветовую гамму.

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

Панель справа помогает изменить цветовую палитру и шрифты, написать тексты, загрузить более подходящие изображения. Можно подобрать другой шаблон в качестве основы и выгрузить свою базу данных. Но в целом, отправная точка есть — осталось пройтись по ней напильником.

Команде Framer одной из первых удалось реализовать то, чем занимались несколько стартапов: превратить генерацию сайтов в забавный и приятный процесс, похожий на игру. Причем у них получилось сделать развлечение функциональным — проекты реально можно использовать.

Создание сайтов no-code

В первую очередь, Framer — зерокодинговый конструктор сайтов с визуальным интерфейсом. Если вы читали наш блог, то уже о таких знаете. А если бывали на бесплатном двухдневном марафоне по разработке без кода, то даже пробовали создавать с их помощью свои проекты.

Причем у инструмента есть как привычные для no-code конструкторов сайтов фичи, так и ноу-хау:

📈 визуальный интерфейс с возможностью импортировать собственный проект из Figma, что идеально для дизайнеров, вставлять хедеры, футеры и другие элементы, использовать его как сервис для отрисовки дизайна с нуля, стилизовать, позиционировать и всячески давать волю воображению;

📈 модные анимации и эффекты — совсем как при ручной верстке сайта, только без необходимости учить CSS и JavaScript. Изменение скорости и разные типы прокрутки, переходы, и многое другое: все для того, чтобы веб-страница выглядела стильно и современно;

📈 собственная CMS с возможностью делать контент на сайте динамическим — подключать к нему базу данных и обновлять в режиме реального времени. В CMS Framer есть коллекции, фильтры, лимиты и многое другое для комфортной работы;

📈 SEO-оптимизация и продвижение: аналитика, заполнение метаданных, правильное использование тегов, карта сайта — для того, чтобы нравиться поисковым роботам и успешно продвигать свою страницу в выдаче.

Как у любого уважающего себя конструктора, у Framer есть шаблоны для быстрого создания страницы. Они разбиты по категориям, таким как «Блоги», «Агентства», «Интернет-магазины», «Фотография» и т.д. Есть платные и бесплатные, причем последних довольно много.

Сколько стоит

Приятная новость: у Framer есть бесплатный тариф, который разработчики позиционируют как вариант для хобби. Сюда включен визуальный интерфейс для редактуры сайта и шаблоны дизайна.

Платные начинаются от $5 в месяц — с ними появляется возможность взять кастомное доменное имя. Самый дорогой тариф обойдется в $30 в месяц. Он позволяет развернуть довольно большой сайт, выдерживающий до 200 000 посетителей ежемесячно.

Что говорят

На агрегаторе Product Hunt отзывы к Framer очень положительные — 4,8 звезд из 5 на основе 113 отзывов.

Пользователи пишут, что инструмент быстрый и очень легкий в освоении, он идеально подходит для создания простых веб-сайтов с шаблонным дизайном. Хвалят нейросеть за скорость генерации, но при этом критикуют за использование случайных картинок, не пересекающихся с тематикой запроса, и сомнительных цветовых палитр.

Однако усредненное мнение пользователей таково: если Framer и дальше продолжит развиваться теми же темпами, то скоро он станет выбором многих зерокодеров.