Как сделать конверсионный сайт с Claude без команды разработчиков

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

Что нейросетевой сайт действительно может заменить

Claude Code способен собрать обычный коммерческий сайт, который понятно объясняет продукт, отвечает на основные вопросы посетителя и ведет его к целевому действию. Речь идет не об автоматическом создании проекта уровня Apple, а о практичном лендинге или сайте продукта: без лишних эффектов, с ясной структурой, работающими кнопками, анимациями и адаптацией под разные экраны.

В качестве примеров разобраны два проекта. Первый сайт был создан примерно за три дня без помощи команды. Его разработка в агентстве, по оценке из видео, могла бы стоить от 100 до 200 тысяч рублей и занять около месяца. Второй проект начинался как неудачный сайт на Tilda: после ухода дизайнера в нем не было полноценной мобильной и планшетной адаптации, а некоторые интерактивные блоки требовали дополнительного кода. Базовую версию такого сайта удалось собрать за несколько часов, а с дополнительными блоками, анимациями и финальной адаптацией весь объем занял около пяти часов. При этом работа шла параллельно с десятью другими задачами, поэтому эти цифры нельзя считать универсальной нормой.

Нейросеть не отменяет участие человека. Нужны насмотренность, понимание маркетинга, продукта и целевого действия. Идею вроде железного человека с балалайкой Claude сам по себе не гарантирует, а сложные 3D-объекты и иллюстрации в показанных проектах создавались дизайнером.

Подготовьте фактуру до начала работы

Первый этап — не написание кода, а формулировка задачи. До первого запроса к Claude нужно определить:

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

Отдельно соберите референсы. Это могут быть ссылки на сайты целиком или на отдельные решения: удачные первый экран, цветовую палитру, типографику, способ подачи кейсов, анимации и интерактивные элементы. Чем точнее описано, что именно нравится в референсе, тем меньше Claude будет угадывать направление.

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

Работайте по этапам: концепция, тексты, дизайн

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

1. Сначала соберите концепцию

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

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

2. Подготовьте и отредактируйте копирайтинг

После согласования идеи Claude может составить тексты всех блоков: заголовки, подзаголовки, описания, ответы на вопросы и призывы к действию. Их не следует принимать без проверки. В показанном подходе тексты несколько раз согласовывались и дополнительно обрабатывались с помощью навыков копирайтера, гуманайзера и инструмента, который имитирует заданный tone of voice.

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

3. Только потом переходите к дизайну

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

Если конкретный экран не подходит, полезнее просить не переделывать его вслепую, а показать несколько вариантов. Такой формат позволяет сравнить решения и выбрать направление. Доработка идет блок за блоком: часть элементов принимается, часть возвращается на переработку, а новые идеи добавляются по ходу работы.

Подключите навыки и внешние материалы

Для более стабильной работы можно использовать специализированные skills — инструкции и заготовки, которые задают Claude правила поведения. В видео упоминаются навыки для веб-дизайна, общего дизайна, копирайтинга, гуманизации текста, tone of voice и оркестрации рабочих процессов. Их задача — не заменить постановку задачи, а помочь нейросети действовать по заранее заданной методологии.

Изображения и 3D-объекты можно подготовить отдельно и загрузить в проект. В показанных сайтах часть визуальных материалов делалась дизайнером, а затем Claude размещал их на странице и связывал с анимациями. Если дизайнера нет, генерации можно создавать самостоятельно или подключать к Claude Code дополнительные MCP-инструменты. В качестве примера упоминается Hicksfield, с помощью которого потенциально можно создавать и видео для сайта.

Практичный вариант для команды выглядит так: Claude составляет техническое задание на каждую картинку, дизайнер создает материалы, после чего они передаются в проект для размещения. Для простого сайта сложные изображения можно вообще не использовать — наличие 3D не является обязательным условием конверсии.

Проверьте адаптивность и отладьте интерактив

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

Также нужно проверить:

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

В одном из проектов на Tilda переключение не работало должным образом и требовало отдельного кода. После переноса в Claude Code этот элемент был собран заново вместе с другими интерактивными блоками. Поэтому скорость создания базовой версии не означает отсутствия этапа тестирования.

Для дополнительной проверки сайт можно прогонять через модели Fable 5 и Opus 4.8: в видео они использовались для поиска проблем, оценки удобства и предложений по улучшению конверсионности. Такой аудит помог увеличить условное количество блоков примерно с десяти до пятнадцати. Это не обязательное число, а пример того, как сайт может развиваться после первых проверок.

Остановитесь на приемлемом результате

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

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

Развивайте сайт после запуска

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

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

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

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

«Делаю сайты за 200к бесплатно вместе с Claude (отдаю все скиллы)» на YouTube

Что дальше

Хотите повторить по шагам? Курс «Claude за вечер»: от установки до первого работающего помощника за один вечер. Посмотреть курс