Будущее веб-разработки: тестирование трёх AI платформ

Содержание:

✌🏻Тестирование Makereal: инструкция и примеры

✌🏻Вопросы к Makereal

✌🏻Докручиваем фронт на v0.dev

✌🏻Что есть ещё для веб-разработки от AI?

🙏🏻И что теперь? Выводы

Тестируем новый инструмент создания сайтов по рисунку. У меня есть опыт создания одностраничника в Тильде и совсем нет опыта в написании кода. Мне хотелось бы вынимать красивую картинку из головы на экран несколькими простыми шагами, в Тильде это не так легко. Проверяем, поможет ли с этим свеженький инструмент на базе GPT-4, makereal.

Сразу инструкция для самых маленьких, как я

1. Делаем раз.

Регистрируемся в open AI* если ещё не, получаем ключ.

*нет, виртуальный номер и карта не сработают. Нужен перманентный ВПН на весь трафик (не просто расширение в браузере), иначе выдаст ошибку рано или поздно.

2. Делаем два.

Вставляем ключ на https://makereal. tldraw. com/

Рисуем что намечтали, подробности – ниже. Жмём “сделать реально” 🙂 Получаем HTML для работающего веб-сайта на основе нашего рисунка.

3. Делаем три.

Решаем где будем хостить сайт (Vercel, Github pages, Cloudflare). Допиливаем напильником, чтобы было красиво. Спойлер: или возвращаемся на Тильду делать нормальный сайт 😂

Я хочу сделать одностраничный лендинг одного из продуктов, есть образ, как должен выглядеть сайт и референсы. Тексты писать хочется быстро, поэтому сразу отдаём промпт в соседнее окно GPT-4, она нам помогает со структурой и наполнением.

Рисуем, вставляем тексты, прописываем куда ведут кнопки. С первого раза может не сработать, попробуйте сгенерить ещё раз, заработает, можно даже промпт не менять.

Я была оптимистична и сделала набросок сразу с достаточно абстрактным ТЗ “сделай красиво, вот тебе референс”:

Красиво не получилось:

Во второй итерации я попросила всё же сделать фон светлым, но, как выяснилось позже, работа на тёмном режиме погружает модель в меланхолию, и просьбы о более светлом сайте она игнорит. На второй итерации я загрустила, что мои картинки не использованы и прописала явно: USE IT. Игнор [2]. Вывод: картинки она любит генерировать сама, ваш материал исполнителю не в кассу, пишите забавный промпт, не обижайте модельку.

Можно и нужно прописать явно какие шрифты хотим видеть – находит, даже для русского языка. Смотрите что вышло после третьей итерации, где я уже забила на картинки и хотела просто пожизнерадостнее общий облик. Выглядит, конечно, простенько, ваша мама сделала бы также. Зато все кнопки исправно работают: записаться ведёт на календли, остальные – открывают чат в тг со мной, приятно.

Разрабы утверждают, что можно оставить комменты к сгенерированному сайту (он у нас на доске прямо рендерится) и поменять уже его, а не исходник. То есть мы итеративно поправляем и дополняем наш сайтец. У меня это не сработало, правки в исходной схеме он воспринял гораздо лучше.

Можно даже создать сайт на основе скрина уже существующего сайта. Работает прямо плохо, со своей же схемы (рис. 1), сохранённой в png она нагаллюцинировала (см рис. 4, она светлая потому что png-шник я вставила на светлый режим, так я узнала, как это влияет) и ни одна кнопка не работала, хотя прописано было всё абсолютно то же самое. Со скрина сайта тем более работает прямо плохо, даже не буду показывать.

Говорят, можно даже вставлять сайт в сайт, сразу подгрузить карты, например, но пока эта фича сломана и есть только на видео на их сайте.

Итог работы с makereal: есть сайт, вполне пригодный для использования, с работающими кнопками и приемлемым текстом, созданный мной где-то за час чистой возни (не считая регистраций и преодолений ошибок в процессе). Это хороший результат, с учётом того, что инструмент появился чуть больше месяца назад. Больше про историю инструмента и куча видяшек кто что творит (не оч сложное): тут. Гит.

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

2. Прикручивание базы данных есть? Пока не вариант, тк надо бэкэнд писать. Куда проще просто сделать вывод с формы на сторонний ресурс (сейчас уже спокойно работает переход на календли, также можно в Гугл-таблицы например собирать). Ну и нам отдают HTML, мы можем дописать/исправить его как хотим. Но за нас не допишет.

3. Хочется забрать css с другого сайта и сделать чтобы было также красиво, можно ли? Пока нет такой опции в нашем регионе

4. Также я не изучила пока особенности промптинга визуальных штук, так что может быть надо было как-то по-особому хорошо поговорить и прописать ТЗ. Если у вас есть качественные материалы по этой теме – поделитесь ими в комментариях 🙏🏻

Хотела завершить на этом, но…

Понеслись дальше эксперименты. Этот сайт делает нам потенциально хороший фронтэнд, может работать по описанию или по скриншоту. Вставляю рис. 3 и пока не прошу многого: только сделать светлее, получаю варианты на англицском и русском.

Прошу изменить надпись на кнопках и пытаюсь сделать, чтобы они куда-то вели, но это уже недоступная магия, получаем v1:

Хочу больше креатива и прошу сделать как https://www. kaijiechen. com/

Не повёлся:

Сайтик утверждает, что можно менять отдельные элементы, и я хочу исправить шрифт на Beer money:

Итог: В сухом остатке мне показалось, что добить makereal более реально, нежели добавить сверху другой инструмент. По-прежнему мой фаворит – сайт с рис. 3

✌🏻лэндинг – штука несложная, а потому конструктор более красивых, но одинаковых, как с конвеера, лендингов доступен на https://yep. so/. Вот что получилось у меня за две минуты составления краткого описания проекта. Приятные подсказки типа “место для ваших отзывов” в наличии.

✌🏻персонализированный сайт для клиента после анализа звонка с ним делает https://www. meeple. ai/ (не тестировала)

Если расположить суммарно по скорости, функциональности и красоте сайта на выходе, то это будет: YEP >> makereal >> V0

Факт: порог входа в веб-разработку снизился настолько, что можно просто написать две строчки и получить сайт даже не из 2000-х, а поприличнее многих существующих. Но ограничений всё ещё множество, тк мы экспериментируем на заре новых возможностей.

Сейчас AI служит скорее как хорошая база, великолепный помощник для старта, но не заменяет творческий вклад и технические навыки профессиональных разработчиков и дизайнеров. To be continued…

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