
Дисклеймер

Да, сайт, о котором пойдёт речь, связан с моим продуктом.
Но в этой статье я не рекламирую его и не пытаюсь что-то продать.
Рассказываю исключительно про процесс создания сайта с помощью AI — как я сам его делал, с какими задачами столкнулся и что получилось.
На самом сайте пока очень мало контента — в основном заглушки и базовые страницы.
Я не прошу углубляться в информацию на сайте или воспринимать его как полноценный продукт на данном этапе.
Если решите зайти — не обращайте внимание на наполнение и текст, не читайте про продукт, просто посмотрите на UX/UI и общий дизайн.
Статья — про опыт и технологию, а не про продукт.
Вступление
Всем привет! Последние пару статей у меня были про Web3:
Разбирал, как устроен арбитраж на Solana и как я написал своего арбитражного бота;
Разбирал реальные кошельки арбитражников — их профит, обороты и механизм работы.
а ещё раньше — про продуктовый менеджмент и IT темы в целом
Сегодня хочу поделиться кейсом из реальной жизни, который нельзя отнести ни к Web3, ни к Продакт Менеджменту… скорее просто Айтишный кейс, где я столкнулся с задачей и довольно интересно и относительно быстро её решил.
Это не какая-то рекламная статья, а честный сторителлинг с примерами и скриншотами, которые могут тебе пригодиться, если захочешь повторить мой опыт или просто лучше понять, как ускорить разработку сайта.
Конечно, это не панацея и не замена ручного кодинга во всех случаях. Скорее наоборот — в некоторых проектах подобный подход позволит полностью заменить традиционную разработку, а в других — увы, нет. Именно об этом и хочу поговорить.
В моём кейсе я смог вместо недели работы или затрат на платные услуги кастомной разработки, за один вечер сделать полноценный SPA-сайт без написания даже 1 строчки кода — полностью с помощью текстовых промптов AI — и сразу задеплоил его на собственный домен без аренды хостинга.
Давайте, чтоб сразу было наглядно, оставил ссылку на результат в конце статьи, если хотите посмотрите сразу на результат и потом читайте дальше, если нет, то можете просто читать и не заходить на сайт? как я и сказал это не реклама. Хабы указанные в статье даже не моя ЦА на сам продукт.

Пока что на сайт пустоват в плане контента. Я не СЕОшник да и продукт не готов - мало что уже сейчас можно там разместить. Но мне хотелось чтоб хотя бы что-то уже было в сети как «визитная карточка» и допиливать уже в процессе по мере продвижения. Зато уже есть полностью рабочая структура: компоненты, маршрутизация, всё настроено, красиво и аккуратно сделано и отлично работает. Перелинковки, кнопки “back”, разделы продуктов с доп страницами самих продуктов, статьи и страницы автора и так далее.
При этом сайт адаптивен и отлично смотрится на любых устройствах — от десктопов до мобильных.
Понятно, что в дальнейшем предстоит подключать платежные системы, наполнять контентом, писать документацию и добавлять другие необходимые фичи. Но сейчас эти задачи пока что остаются за скобками — главное, что есть стабильная база, на которую можно опираться и развивать проект дальше.
Немного контекста: что я делал до этого
Где-то зимой меня снова сильно заинтересовала тема блокчейна, и я начал писать арбитражного бота под Solana для личного использования. Со временем планы немного изменились: вместо того, чтобы делать одного бота для себя, появилась идея создать публичный сервис — онлайн-платформу, которая объединит доступ сразу к нескольким ботам.
Это позволило бы делать авторизацию, выдавать токены доступа, показывать статистику, принимать оплату — в общем, полный продукт. Но это перспективы на долгосрок...
Пока что решил стартовать с MVP — арбитражного бота и простого онлайн-сервиса, где можно просто авторизоваться, получить токен доступа к одному боту и всё. Без статистики и других ботов.
На чем писать фронтенд
Обзор технологий
Раньше, лет 4–5 назад, я писал фронтенд на VueJS и Typescript/JS. В теории клиентская часть такого сервиса — не проблема. Но я всегда считал фронтенд сложной частью: мне важна плавность и красота интерфейса, а чтобы всё именно так выглядело — нужен продуманный дизайн, аккуратная верстка и адаптивность под разные устройства.
Это оказывается очень утомительно и требует много времени. Мне куда больше нравится писать логику, а не интерфейсы с их постоянными правками.
Наш выбор технологии и сомнения
Мы с партнёром долго обсуждали, на чём именно делать фронтенд: Angular, Vue или React. Партнёр был опытен в Angular, я раньше писал на Vue, но оба толком не разбирались в React.
В итоге пришли к выводу, что Vue — не самый лучший вариант из-за слабого комьюнити и ограниченного набора библиотек. Angular показался слишком тяжёлым и громоздким, тогда как React предлагает больше гибкости и инструментов, но требует изучения и освоения.
В итоге мы продолжили искать оптимальный вариант и остановились на Next.js. Это практически полноценный фреймворк на базе React, который отлично подходит под наши задачи. Кроме того, вокруг Next.js существует огромное количество библиотек и инструментов, включая решения специально для Solana и Web3, что делает его универсальным и удобным выбором для будущего развития проекта.
Как я наткнулся на AI решение
С этими мыслями я ходил пару дней, не особо думая, пока в один момент случайно не открыл профиль своего бывшего коллеги в LinkedIn — не помню даже зачем. Он тоже продакт-менеджер, работает и увлекается Web3. Оказалось, что уже несколько лет он развивает свой продукт — децентрализованный on-chain escrow сервис на базе смарт-контрактов. Он получил несколько грантов, и проект развивается довольно бодро.
Естественно, я решил посмотреть, что к чему, и первым делом зашёл на его сайт.
Первое впечатление
Сайт оказался очень приятным: минималистичный дизайн, органичная структура, никаких вычурных элементов — всё просто, быстро и красиво. Адаптивность на всех устройствах — на уровне. Особенно понравилось, что документация сделана через GitBook — ёмко и удобно.
Для меня это был отличный пример, потому что обычно, когда есть рабочий пример, проще уже допиливать концепт и креативить, ориентируясь на него.
Что под капотом
Я написал бывшему коллеге, похвалил сайт, спросил, на чём он сделан, может это какой-то готовый шаблон или конструктор. Рассчитывал, что он поделится ссылкой на шаблон, который я мог бы использовать.
Но он ответил — сайт сделан полностью с помощью AI, просто текстовыми промптами, без кодинга.
Я сильно удивился несмотря на то, что сам я раньше пользовался GPT для генерации отдельных кусочков кода, но чтобы целый сайт собрать так, чтобы вёрстка была адаптивной и выглядела отлично на всех экранах — это было для меня новым уровнем.
Он скинул мне ссылку на сервис, о котором я раньше даже не слышал. Ну а я, уже давно перешедший в продакт-менеджмент и давно не писавший код, не следил так плотно за новинками для разработчиков.
Знакомство с Vercel V0
Речь идёт о Vercel V0 от команды Next.js — действительно мощном инструменте для быстрой сборки сайтов. За несколько текстовых промптов на бесплатной версии я собрал сайт с несколькими страницами и разными компонентами. Причём сайт сразу адаптивный, что для меня огромный плюс, потому что именно адаптивность — то, что я обычно терпеть не могу делать вручную.
Платформа поддерживает встроенную историю версий, похожую на git: каждый промпт фиксирует новую версию, между которыми можно переключаться. Развёртывание на дев-домен происходит в один клик, а если есть собственный домен — его легко подключить и разместить сайт прямо на Vercel, без отдельного хостинга. Это реально экономит время и силы.
Я подключил к сайту Google Analytics, настроил email-подписки и добавил Hotjar — всё делалось буквально в пару промптов и сразу заработало. Дизайн строится на готовых компонентах Tailwind, что упрощает создание приятного внешнего вида.
Локализацию и смену темы (светлая/тёмная) я тоже пробовал настроить, пусть и с небольшими огрехами, но для старта этого хватило. Позже отказался от локализации и оставил светлую тему.
Бесплатной версии не хватило, чтобы довести сайт до конца, поэтому я купил подписку за $20, а потом докупил ещё $10 долларов кредитов. В итоге на весь процесс ушло около $30 долларов и примерно 8 часов работы текстовыми промптами.
Сейчас сайт работает на фронтенде с базовой аналитикой и подписками по email, без бэкенда и базы данных — для таких целей это идеальный вариант. Понятно, что при добавлении полноценного бэкенда хостинг, скорее всего, придется менять. Контента на сайте пока мало — это осознанный выбор, так как сейчас важен именно рабочий каркас.
Интересно, что структуру проекта и компоненты можно менять текстовыми промптами, также можно подгружать картинки прямо в папку проекта. При желании можно открыть код и внести правки вручную, и будущие промпты будут строиться на базе исправленного вручную проекта. Это очень удобно и расширяет возможности контроля над сайтом.
А вот и список главных фичей:
Создание сайта с помощью текстовых промптов
Просмотр и редактирование структуры проекта и кода онлайн
Каждый промпт создаёт новую версию проекта с возможностью переключения
Развёртывание на бесплатный DevDomain в один клик
Бесплатное подключение и хостинг на собственном домене без аренды хостинга
Скачать весь проект архивом или получить ссылку на репозиторий для совместного доступа
Этот список не исчерпывающий — скорее основа базового функционала. Но уже сейчас это очень мощный и удобный инструмент, особенно учитывая, что с самого начала доступен бесплатно в пределах определённых лимитов.
Опыт работы с Vercel V0
Когда я начал писать эту статью, хотел прикрепить скриншоты первых версий сайта и даже ссылку на задеплоенную тестовую версию на временных дев-доменах. Но пришлось отказаться от этой идеи — я удалил все версии, кроме последней реплики, в которой осталось лишь 36 коммитов (истории промптов).
Есть одна особенность платформы: иногда AI “тупит” и начинает выдавать битую версию сайта на все новые промпты, которую уже не может исправить. В такие моменты я скачивал zip-архив с кодом, загружал его в новый чат, и по сути создавал новый проект заново. Так повторял это 5-6 раз за всё время работы над сайтом.
В итоге, когда проект был допилен и доведен до рабочего состояния, я оставил только последнюю папку с историей изменений и удалил все предыдущие. Поэтому все дальнейшие примеры и скриншоты я буду показывать именно на основе этой последней рабочей версии+ на основе нового тестового примера.
В общем, примерно так выглядит рабочее пространство Vercel V0:

В верхней части интерфейса — навигация по папкам проекта и чатам.
1. Слева находится чат — это по сути место, куда ты вводишь свои промпты, получаешь ответы и видишь подробный лог в удобном виде.
2. По центру сразу отображается результат — текущая версия сайта, которая обновляется автоматически после каждого промпта, так что ты видишь, что изменилось и как прогрессирует работа.
3. В правом верхнем углу видна история версий — сейчас, например, версия v31. Это значит, что в этом чате уже было 31 промпт с моей стороны — то есть 31 правка или уточнение.
4. Там же есть иконка для скачивания — можно выкачать весь проект кодом в виде zip-архива или получить ссылку на репозиторий, чтобы поделиться с кем-то и дать доступ к проекту через онлайн-хаб.
Ещё одна классная фича — вкладка CODE, которая находится сверху над UX/UI. Открыв её, видишь структуру проекта и весь исходный код. Его можно не только просматривать, но и редактировать вручную прямо в этом интерфейсе.
Я не буду выкладывать структуру и код своего проекта, чтобы не перегружать статью, но расскажу, как это всё работает на примере нового запроса.
Например, промпт:
Make me a website SPA with 3 pages Main About and Contacts about Staking platform in crypto with all necessary blocks of information and sections
- даёт готовый проект.
Пока идёт генерация, видно примерно такой интерфейс:
Слева — список создаваемых компонентов
По центру — прогресс написания кода

Вот тут уже видно, что по промпту сервис самостоятельно создал достаточно много компонентов — и всё выглядит довольно неплохо.

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

Вот так выглядит результат после первого же промпта. Прикрепляю ссылку и скриншот для ознакомления: https://v0-test-rust-psi.vercel.app

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

Предположим, у нас есть две разные аудитории, и для каждой нужно сделать отдельную форму.
Слева для B2B
Справа для B2C
Для этого пишем примерно такой промпт:
I want you to make changes to the contact form. Please create two separate forms in the second scroll section on this page. On the left side, make a B2B form with the following fields: - Contacts - Title - Company name - File attachment - Free text field - Submit button. On the right side, make a B2C form with the following fields: - Name, - Email - Dropdown for problem category - Free text field - Submit button. Design the two forms with slightly different styles to highlight their differences. Add titles above each form to clearly indicate their purpose.
Вот что в итоге получилось — форма стала чуть больше и более проработана, но все ещё выглядит слишком топорно.

Чтобы сделать форму компактнее, чтобы она умещалась на одном экране, но при этом сохранить все поля, я написал такой промпт:
Make the forms on contact form smaller to fit on 1 screen but keep all fields
Вот что получилось в результате: форма стала компактнее, но все необходимые поля остались на месте.

Да, пока что форма выглядит не идеально, но для всего трёх промптов и примерно пяти минут работы — результат вполне достойный.
Если хочется сделать дизайн более продвинутым и стильным, достаточно просто тщательно поработать с промптом.
Вот пример промпта, который я написал:
Please enhance the current contact forms by making them look more beautiful, smooth, and stylish. The design should be cleaner, more modern, and less typical. Consider adding subtle shadows and maybe gradients in a Web3 style to give the forms a polished and elegant appearance. Do not change anything else except the visual styling of these forms.
И вот что получилось в результате.
Видишь? Уже намного лучше всего за один дополнительный промпт. Думаю, примерно понятно, как работать в этом направлении.

Лайфхак: как избежать лишних изменений
Часто бывает так, что помимо запрошенных изменений Vercel V0 может случайно изменить и другие части сайта. В начале моего тестового проекта, например, я попросил добавить маргины по краям страницы, а сервис вместе с этим переделал оформление блока на главной — сделал тень вместо белой рамки.
Чтобы минимизировать такие “побочные эффекты”, всегда пишите чётко:
Do not make any other changes to the rest of pages and components beside the component what I requested changed for.
Так вероятность случайных изменений других компонентов становится минимальной.
Ускоряем работу с помощью GPT и Midjourney
Добавим ещё один важный момент: в связке с чат-ботом GPT процесс идёт в разы быстрее. Ты просто диктуешь GPT концепт и правки, просишь сформировать техническое задание для Vercel V0 с учётом всех ограничений, вариаций и условий. Потом копируешь полученный результат в V0 и ждёшь итоговый сайт — процесс повторяется снова и снова.
Таким образом, по сути, надо пройтись по всем страницам сайта и с помощью промптов довести их до идеала.
Ещё один момент, который реально ускоряет и улучшает процесс — картинки. Тут тоже можно использовать чат GPT, но лучше — Midjourney, о котором многие забывают. У меня подписка на $20 (или $10), и в месяц я могу генерировать свыше 800 картинок. Это практически безграничный запас для любого сайта.
Конечно, с генерацией изображений тоже нужно немного поиграться с промптами, и тут GPT тоже помогает — помогает составить классный и точный промпт для Midjourney.
Пример промпта для Midjourney
Погнали пробовать. Сначала просим GPT составить промпт для генерации изображения, и вот что получается:
Imagine Minimalistic vector illustration of a Solana staking server, futuristic data center with sleek server racks, glowing accents, dark color palette with shades of deep blue, purple, and black, clean lines, modern tech style, suitable as a background for a website section, cyberpunk vibe, high contrast, subtle glowing lights
Далее полученное изображение — я не буду долго мучиться с деталями, просто беру его как пример — и загружаю на сайт с помощью следующего промпта:
Put this image on the section of Choose Your Staking Strategy (main page) on the background
В результате получаем вот такой динамичный и стильный фон на странице.
Было:

Стало:

Интеграция дополнительных функций
В общем, думаю, принцип понятен. Когда набьёшь руку в работе с промптами и командами на всех трёх сервисах, можно сделать весь фронтенд за пару часов — при условии, что концепция заранее продумана и не меняется по ходу дела.
Через промпты можно также добавить sitemap.xml для улучшения SEO, подключить Google Analytics и многое другое.
Можно даже интегрировать сторонние скрипты для анимаций. Например, я нашёл такой скрипт анимации — Vanta.js: Globe effect.
Решил поставить его на главную страницу — просто попросил интегрировать скрипт в первую секцию и приложил сам код в чате.
Вот что получилось:

А вот так выглядят разные версии сайта в процессе разработки:

А вот так деплоймент:

Подключение домена и итоговые впечатления
Через отдельную менюшку в админке можно легко привязать свой собственный домен — это удобно и избавляет от необходимости искать и настраивать сторонний хостинг.
В целом, думаю, основная идея понятна, и суть инструмента — сделать фронтенд быстро и просто — передана.
Мне на создание сайта ушло около 100 промптов. За это время я перепробовал разные подходы: тестировал локализацию на 7 языков, включая RTL (арабский), менял темы и стили и компоненты и анимации. Правда, с этими задачами пока что есть сложности — возможности инструмента ограничены, и некоторые функции пока что работают неидеально.
В итоге я остановился на базовом наборе страниц и паре статей, уделив много времени тому, чтобы все элементы интерфейса, например кнопки “назад”, работали корректно и выглядели консистентно по всему сайту. Картинки тоже подбирал тщательно, чтобы визуально было приятно.
Ссылку на готовый проект оставлю ниже — будет интересно получить вашу обратную связь.
О перспективах AI в разработке
Честно говоря, я не думаю, что AI полностью заменит разработчиков в ближайшее время. Особенно вёрстка и визуальная часть пока даются инструменту с трудом — сложные концепции дизайна и фирменный стиль сложно передать через текстовые промпты.
AI пишет код — “как хочет”, повлиять на это сложно, и правки не всегда просты. Если у вас простой дизайн и фронтенд, то это отличное и быстрое решение. Если задачи сложнее — придётся всё же думать и, возможно, делать часть работы вручную.
Но я надеюсь, что в ближайшее время модель допилят, и она станет лучше понимать структуру, сложные дизайн-концепции и делать их без ошибок — тогда AI может реально существенно упростить и ускорить фронтенд-разработку.
Если кто знает похожие AI-инструменты для других языков или фреймворков, которые уже сейчас хорошо работают — напишите в комментариях, буду рад обсудить.
Cсылки
Внизу дублирую ссылку на тестовый проект, который создавался параллельно с написанием статьи, а также ссылку на основной проект, который я делал почти целый день для своих ботов под Solana.
Буду очень рад обратной связи по сайту — если будет желание, заглядывайте, пробуйте, пишите, что думаете. Спасибо за внимание!
Мой изначальный и основной проект
Тестовый проект, который фигурирует во всех скриншотах в статье
-> https://v0-crypto-staking-spa.vercel.app
Мои соц. сети
Подписывайся, если интересно ?
Комментарии (10)
Fragster
19.06.2025 08:53Первая ошибка найдена за 5 секунд (!). При переходе по навигации и нажатии на "назад" в навигации отображается две активных кнопки. И это при том, что это роутером + компонентой ссылки должно делаться по дефолту и автоматически, т.е. внутри реализация не типовая, а наверченная болванчиком.
Вторая найдена еще секунд за 10: Выпадающим меню в навигации невозможно пользоваться, оно пропадает при уходе мыши с кнопки-активатора.
Наверняка это не единственные ошибки и их там миллион и маленькая тележка и на тестирование подобных реально даже не джуновских а стажерских косяков (которые они сами должны находить и исправлять) нужно потратить не один день.
Светлая тема выглядит... оригинально. Кнопка connect wallet (которая, наверное, должна вызывать метамаск или что-то подобное) - мертвая. И я не уверен, что болванчик осилит её подключить. Хотя на сайте примерно 80% кнопок мертвых...
Думаю, что чуть более сложные вещи чем визитка с двумя формами сразу же начнут все ломать лавинообразно, а на починку будет уходить все больше и больше сил (и токенов с их оплатой).
evgeny2234 Автор
19.06.2025 08:53Вы тестировал тестовый лендос?) Который я сделал по ходу написания статьи и только те секции, которые в статье же и описал ? И вообще не прорабатывал ни одну из страниц, ни темы, вообще ничего))
https://v0-crypto-staking-spa.vercel.app
Это странно..зачем вы тестируете на ошибки то, что было сделано просто для скриншотов показать флоу работы… за пару промптов буквально.
Протестируйте, пожалуйста, сайт не тестовый, сделанный за 2 минуты ради пары скринов, а реальный, который висит на моем домене https://orbion.soТам я действительно прорабатывал страницы и логику, и если там есть баги и ошибки то буду рад обратить на них внимание и исправить :)
Fragster
19.06.2025 08:53Но ведь то, что "не тестовое" меньше, чем то, что тестовое. Те элементы, которые вызывали ошибки - вырезаны (и про которые я писал выше). Кроме кнопки back и отображения текущего раздела, которые работают, да (с нюансом, про который ниже). Но сайт вообще никакой. Основная экономия на времени взаимодействия заказчик-исполнитель. Хотя если взять готовый шаблон, вставить свои (пусть и сгенеренные нейросетью) тексты и картинки - будет все равно быстрее, чем 8 часов + 30 баксов, реально. Хоть в дримвевере, хоть в тильде.
Из косяков (некритичных) на "проде" заметил, что все (или почти все) "ссылки" это кнопки, и не имеют отображения адреса перехода.
Но особо не тестил, ибо нечего (а раздел документация, я так понимаю, какой-то стандартный и нейросеткой не трогался или почти не трогался).
SlavaVSLK
19.06.2025 08:53Так и что это за сайт? Функционала никакого не нашёл. Что там тестировать? Хотите какого-то мнения или оценки, так покажите исходники, кому не лень поковыряются да скажут будет ли такой проект жить в будущем.
evgeny2234 Автор
19.06.2025 08:53я в статье объяснил , зачем и для чего делал сайт и какая ситуация с исходниками и что именно для меня приоритет в этом проекте
izibrizi2
19.06.2025 08:53Как то не очень понял причем тут SPA. SPA подразумевает под собой клиентскую логику, интенсивную динамику (ну например - чат). А у вас обычный лендос, который проще было на пхп накидать.
evgeny2234 Автор
19.06.2025 08:53SPA это сингл Пейдж аппликейшн без сервер сайд рендеринга, при чем тут пхп который сервер сайд и который не имеет отношения к SPA
EdsCh
Статья мне зашла, спасибо. (я не программист если что). У меня при использовании Cursor фронт идет всегда тяжелее чем бэкенд. Попробую теперь Verсel для своих поделок. Не первый раз встречаю что промпты народ передает на английском, я лично с Claude Sonnet общаюсь на русском, и проблем вроде не было. Есть какая то необходимость именно в английском? Преимущества какие то? Поделитесь опытом у кого как происходит. У меня сложилось впечатление что языковой модели по фигу на каком языке к ней обращаться.
evgeny2234 Автор
Спасибо за обратную связь)
Ну, я, честно говоря на русском не пробовал промпты там пилить. Сразу начал с англ так как у меня англ рабочий язык и я на нем в целом пишу все, что связано с работой.
Но например глубокие исследования в GPT у меня лучше отрабатывают на английском. Ответы получаются глубже и детальнее.. возможно потому что источники тогда ищет англоязычные по большей части, а если на русском, то русскоязычные, которых меньше.
В случае с Vercel надо тестить, но когда есть GPT под рукой, то в целом становиться не важно на каком писать промпты, он же перевести может спокойно)
Если кто-то сравнивал Ру/Eng промпты в Vercel, поделитесь опытом, тоже интересно есть ли разница)