Как переделать нейросетевой сайт без дизайнера: разбор на примере лендинга

Что получится в итоге и с чего начать

В видео Арины Михалны разобран реальный кейс: сайт, сделанный экспертом-психологом самостоятельно через Кодекс, оказался сырым и «нейрослопным» — без концепции, с наваленным текстом и хаотичной вёрсткой. Арина Михална переделала его через Клод-код за несколько дней, получив полноценный лендинг с концепцией, конверсионными блоками и авторской айдентикой. Ниже — разбор того, что было не так с исходным сайтом, и пошаговая методология, по которой можно повторить такую переделку самостоятельно.

Главная проблема нейрослопных сайтов — отсутствие концепции

Первое, что отличает слабый сайт от сильного, — концепция. Любому продукту, даже небольшой консультации, нужна идея, которая считывается сразу и берётся из контекста реальной жизни автора или эксперта. В качестве примера в видео Арины Михалны приводится собственная линейка продуктов, сделанная в стиле комиксов Marvel: позиционирование строится вокруг образа Тони Старка, который с помощью нейросетей обучает «Человека-паука» делать сайты. Отсюда и названия продуктов — «Jarvis», «Пещера Старка».

В разобранном кейсе продукт называется «Архитектура изменений», поэтому финальная концепция лендинга была построена вокруг темы стройки и архитектуры: визуализация дома, собираемого из блоков, несущие конструкции, опоры. Показательно, что первая версия дизайна, предложенная нейросетью без продюсерской доработки, была технически аккуратной, но «без души» — именно потому, что в ней не было такой смысловой рамки. Вывод: просто попросить нейросеть сделать сайт красивым недостаточно — нужно отдельно продумать концепцию и вписать её в визуал.

Как оформлять офер и текст, чтобы сайт читался

Вторая системная проблема исходного сайта — перегруженные текстом блоки без чёткого офера. Человек, открывший такой блок, не понимает сразу, для кого продукт, что он даёт и что получит на выходе. Правильный подход — сразу в начале блока прописывать три вещи: для кого предложение, что оно решает и что человек получит, при этом сокращая объём текста в разы.

Важный принцип, который проговаривается отдельно: пользователи читают лендинги по диагонали, цепляясь взглядом за заголовки и картинки, а не за сплошные абзацы. Поэтому вместо текстовых полотен нужны: короткие тезисы по пунктам, визуализация (иллюстрация или схема) рядом с текстом, единый визуальный паттерн для всех блоков — одинаковый размер заголовков, единый стиль оформления. В исходном сайте блоки шли «пачкой», с разным размером заголовков и без общего паттерна — из-за этого сайт выглядел разрозненным и тяжело читался.

Как оформить сложные механики: калькулятор и схемы принятия решений

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

Отдельно в видео Арины Михалны разбирается пример другого проекта — сайта коттеджного посёлка, на который льётся трафик из Яндекс.Директа. На нём специально было сделано максимальное количество смысловых блоков: видео, информация о территории посёлка, карта проезда от центра Москвы, список ближайших локаций. Логика простая — чем выше чек продукта, тем больше сайт должен превентивно закрывать все возможные вопросы клиента, а не только базовый офер. Этот же принцип применили и к лендингу «Архитектура изменений»: количество блоков увеличили специально, чтобы ответить на максимум вопросов аудитории.

Как вписать в сайт айдентику и философию эксперта

Ещё одна деталь, которая часто теряется на нейросетевых сайтах, — фирменный стиль эксперта. В исходной версии сайт не учитывал существующую айдентику: не использовались фирменные шрифты. При переделке шрифты были заменены на комплект из фирменного набора эксперта — Sans, Grotesk и Montserrat (в видео упомянуты через речевые искажения, но смысл — использование именно фирменных шрифтов эксперта, а не случайных).

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

Пошаговая методология сборки сайта на Клод-коде

В видео Арины Михалны методология описана как последовательность из пяти этапов.

Бриф и техническое задание. Нужно попросить нейросеть задать много вопросов по проекту и максимально подробно на них ответить. Если сайт делается для клиента — вопросы передаются клиенту, а ответы затем загружаются в модель вместе с дополнительной информацией (соцсети эксперта, материалы, позиционирование). Чем детальнее прописано ТЗ — какие смыслы должен доносить сайт, для какого продукта, с какой философией — тем лучше результат.
Структура сайта. На основе брифа модель прописывает список блоков и черновые тексты. На этом этапе рекомендуется не углубляться в детальную правку — достаточно поверхностно согласовать структуру и количество блоков (в кейсе из видео их получилось около 15), а тексты и формулировки дорабатывать позже, когда уже есть прототип. Если удобнее сразу согласовывать тексты — можно делать и так, единого правила нет.
Прототип. После утверждённой структуры нейросеть собирает первую рабочую версию сайта. По опыту из видео, весь основной лендинг с нуля до прототипа собирается за одну ночь — то есть буквально несколько часов работы.
Доработки. Это самый долгий этап — в разобранном кейсе он занял два дня против одной ночи на сборку прототипа. Здесь важны терпение и отказ от перфекционизма: сайт можно дорабатывать бесконечно, но задача — вовремя остановиться на уровне «четыре с плюсом», а не гнаться за идеалом. Критерии достаточности: вёрстка не ломается на десктопе, мобильном и планшете, анимации уместны, картинки к месту, текст понятен и не перегружен.
Техническая часть («техничка»). Финальный этап — публикация сайта на домене. Если модель уже «обучена» на предыдущих проектах и знает методологию работы (куда закидывать копии, как подключаться к хостингу, как настраивать домены), она может выполнять эти шаги самостоятельно. В кейсе из видео использовался хостинг Beget, и при переносе доменов возникли сложности, которые решались через функцию «Claude в браузере» — режим, который позволяет модели самостоятельно нажимать кнопки в интерфейсе Google Chrome, а также через прямую команду в Клод-коде «сходи в интернет и сделай сам». Уточняется, что для выполнения таких задач в браузере используется подписка на Claude стоимостью 200 долларов.

Кто делал графику и в чём честное ограничение подхода

Важная деталь: ни один дизайнер не привлекался к созданию сайта — все изображения на переделанном лендинге сгенерировала сама модель. Технически это работает так: у Claude есть доступ к API сторонних генеративных сервисов (в частности, упоминаются GPT и «нанобанана»), и модель самостоятельно пишет промпты, продумывает содержание изображений и создаёт их без участия человека.

Есть одно честное исключение: фотографию с самим экспертом на сайте генерировала не модель, а автор видео вручную — потому что Claude не умеет брать фотореференс реального человека и использовать его для генерации нового изображения (либо, как замечает Арина Михална, не до конца понятно, действительно ли это ограничение, или просто не удалось найти способ заставить модель это сделать).

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

Когда для сайта всё ещё нужен дизайнер, а когда — не нужен верстальщик

В видео разделяются две смежные профессии. Работа дизайнера остаётся востребованной — по словам Арины Михалны, дизайнер способен сделать визуал лучше, чем нейросеть, и это не оспаривается. А вот работа верстальщика, особенно верстальщика на Тильде, признаётся полностью замещённой: то же самое сейчас делает Клод-код без необходимости платить за доступ к конструктору сайтов или за отдельного специалиста по вёрстке.

Практический сценарий для дизайнеров: готовый макет из Figma можно передать модели, и она самостоятельно сверстает его в HTML-коде — без Тильды, WordPress и других платных конструкторов. Итоговый сайт размещается на собственном домене и хостинге, а не на подписке конструктора.

Итоговый чек-лист для переделки слабого сайта

Если на руках есть нейросетевой сайт, который выглядит сыро, разбор из видео Арины Михалны сводится к следующей проверке:

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

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

Смотреть видео целиком

«Переделала нейрослопный сайт без дизайнера и верстальщика: до и после» на YouTube

Что дальше

Хотите собрать такой сайт сами? Курс «Собери свой сайт за вечер»: от пустой папки до страницы в интернете, без вёрстки и кода. Посмотреть курс