В этой статье про использование возможностей современных сервисов по созданию простых уникальных веб-приложений, которые вы потом можете использовать в вашем проекте.
Так вы можете разнообразить ваш контент, сделать более визуально привлекательными ваши материалы, создавать бонусы для вашей аудитории и так далее.
Например, я столкнулся с тем, что в большинстве сервисов, которые позволяют создавать страницы, не очень симпатичный дизайн аудиоплееров. А мне хотелось, чтобы записанные мной аудио смотрелись симпатичнее.
В итоге — разработал в нейросети с нуля дизайн, который можно использовать на страницах. При том, что я вообще не разбираюсь в программировании, у меня это получилось очень быстро – менее чем за час.
Пример нескольких вариантов разработанного мной аудиоплеера, встроенного на страницу:
Как вы видите, в плейере есть несколько функций – перемотка, эквалайзер, скорость воспроизведения, пауза, регулировка громкости.
Вот пример, как он выглядит внутри урока в Геткурсе:
На мобильных устройствах плейер также работает и адаптивно подстраивается под размера экрана.
Сделано это было через нейросеть Claude.
Порядок действий:
- Изначально я написал свою задачу — разработать аудиоплеер, который должен включать в себя нужные мне функции
- Система начала генерировать код и здесь же показывать визуальное отображение
Вот так это выглядит внутри Claude:
- Далее было очень много итераций — то есть я писал нейросети что нужно изменить, а Claude каждый раз генерировал новый код
- В результате — через несколько десятков итераций был сделан плейер, который полностью соответствовал моим потребностям
- Также Claude написал инструкцию, как этот код использовать
Это первый пример веб-приложения, которое сгенерировано мной и которое мне очень нравится.
Целый ряд моих клиентов попросили этот код, чтобы использовать у себя на страницах.
Далее я покажу еще несколько примеров:
Интерактивный чек-лист продающего лендинга:
Каждый пункт можно развернуть и заполнить чек-лист:
Это было сгенерировано также в нейросети Claude:
Принцип разработки такой же:
- я написал Клоду, что мне нужно сгенерировать чек-лист продающего лендинга и перечислил все блоки, которые в нём должны быть
- дальше система просто оформила всё это в определённый вид, и я постепенно вносил доработки
Самое главное, что доработки вносятся обычным языком, без знаний программирования. Например: «Добавь ещё такой-то пункт, измени здесь цвет» и так далее.
Можно также скидывать изображения с примерами и он также понимает и вносит соответствующие доработки.
Ещё пример – рейтинг нейросетей:
Человек может кликнуть и откроется название нейросети, которая стоит в моем рейтинге на этом месте:
А ниже релевантное предложение на мой продукт:
Это приложение я генерировал в ChatGPT.
Здесь такая же система, как и в Claude – слева код и мое взаимодействие с нейросетью, справа — предпросмотр:
Следующий пример – конструктор запуска через рассылку:
Это более сложное веб-приложение, которое включает в себя структуры реальных писем или постов для взаимодействия с аудиторией и для продаж.
Можно открыть любое письмо, скопировать текст:
А ниже – релевантное платное предложение:
Следующий пример:
У меня есть инфографика с обзором 18 главных сервисов и программ для онлайн-проекта:
Я решил сделать эту инфографику интерактивной.
Загрузил её в Claude как картинку и попросил превратить её в веб-приложение, чтобы по клику на каждый пункт появлялась дополнительная информация.
Вот что получилось:
Если человек кликает на тот сервис, который его интересует, то снизу открывается отдельный блок, в котором рассказано про возможности именно этого сервиса, плюс сделано релевантное предложение:
Следующий пример — калькулятор доходности вебинара:
Человек может ввести свои данные, система рассчитает метрики и выдаст различные показатели:
Всё это также было сделано мной с нуля через нейросети. Причём каждое из этих приложений было сгенерировано не больше чем за час.
Какие-то сделаны быстрее.
Например, очень простой таймер для написания книги:
Здесь просто указывается любой период времени работы, и система начинает отсчитывать. Когда это время истечёт — прозвучит сигнал, и после этого начнётся период отдыха.
Этот таймер был сгенерирован с помощью нейросети Deepseek:
Конструктор структуры писем:
Человек может выбрать любой вид письма и указать свои вводные данные:
Система генерирует структуру и даёт свои рекомендации:
И еще несколько примеров нейросетей, которые позволяют написать код:
- Qwen – китайская нейросеть, работает без ВПН
Например, здесь я сделал чек-лист по написанию книги:
Принцип такой же – слева происходит взаимодействие с нейросетью, справа – визуальное отображение.
- Grok
Например, я попросил его сделать таймер помодоро:
А далее можно вносить любые корректировки, например: «Сделай более стильный дизайн и измени цвет на сине-зелёный»:
Как вы видите, я не пишу никаких профессиональных терминов, не указываю на нюансы в коде. Весь диалог идёт обычным языком.
Далее этот код можно разместить на любой странице, загрузить на хостинг и так далее.
Все это открывает интересные возможности, связанные с реализацией многих ваших задумок, если далеки от программирования.
И, конечно же, сами эти задумки вы можете также сгенерировать через нейросеть. То есть вы можете описать ваш проект и далее попросить систему предложить варианты веб-приложений по вашей теме.
Возможности классные, и я рекомендую вам это использовать.
Успехов!
