Сайт без фрилансеров — Гайд по нейро-верстке 2026

Практическое руководство · 2026

Сайт без фрилансеров

Ты не программист. Ты не дизайнер. И всё равно сделаешь лендинг, за который раньше платил 50–150 тысяч рублей — за вечер, самостоятельно. Этот гайд про то, как ИИ стал твоей личной дизайн-студией. Без кода, без технических знаний, без ожидания ответа от фрилансера.

Как это вообще работает — за 2 минуты

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

ИИ умеет писать не только тексты — он умеет писать код. HTML — это язык разметки страниц. Выглядит страшно, но на самом деле это просто инструкция браузеру: «здесь заголовок, здесь кнопка, здесь картинка». И ИИ пишет эти инструкции по твоему описанию. Ты говоришь словами — он отвечает кодом. Браузер код читает — ты видишь готовый сайт.

Схема выглядит вот так:

Ты описываешь, что хочешь — своими словами, как другу. «Сделай лендинг для моего курса по йоге. Тёмный фон, зелёные акценты, три блока: что получишь, кто я, как записаться».
ИИ пишет код — и сразу показывает, как это выглядит (в хороших инструментах прямо в чате).
Ты правишь словами — «сделай кнопку больше», «добавь блок с отзывами», «измени цвет фона». Никакого кода руками.
Скачиваешь файл — один файл .html. Его можно открыть в браузере, вставить на Тильду, загрузить на Геткурс.

Ты ставишь задачу.
ИИ пишет код.
Ты видишь результат.

Никакого программирования. Только умение объяснить, чего ты хочешь.

Главный инсайт: Лендинг — это не сложно технически. Это сложно концептуально. Что написать, как выстроить структуру, какие боли закрыть. Вот тут твоя голова работает. Код пусть пишет нейронка.

Какой ИИ выбрать — честное сравнение

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

```

Сразу честно: Мы учимся делать простые лендинги — продающие страницы, страницы курсов, услуг, личные сайты. Это не корпоративные порталы, не интернет-магазины, не сервисы с базой данных. Если тебе нужен многостраничный сайт со сложной логикой, регистрацией или личным кабинетом — это другой масштаб, другой бюджет и другая история. Но всё, что ты делаешь для продажи экспертности или продукта в одностраничном формате — это оно. И это ты сейчас сделаешь сам.

Claude

Лучший для лендингов

Главная суперсила — Artifacts. Это окно, где прямо в чате ты видишь готовый сайт, кликаешь по кнопкам, проверяешь анимации. Код пишет красивый и аккуратный. Понимает задачи по дизайну лучше других. Если делаешь лендинг — начинай отсюда.

ChatGPT

Универсал

Хорошо пишет продающие тексты и умеет в маркетинговые формулы. Код тоже делает, но превью внутри чата слабее. Хорош для связки: текст и структуру придумал в ChatGPT, код попросил у Claude.

Gemini

Большой контекст

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

Как выбирать без головной боли

Не пытайся разобраться во всех сразу. Выбери один — и работай с ним, пока не почувствуешь ограничение. Если ты вообще не знаешь, с чего начать — начинай с Claude. Он показывает результат прямо в чате, и это убирает самый главный стресс: «я написал что-то, а что получилось — непонятно».

Про подписки: Все три инструмента есть в бесплатной версии с ограничениями. Для нормальной работы нужна платная — около $20/месяц. Это в разы дешевле одного часа работы фрилансера. Платную подписку берёшь на один инструмент — не на все три.

```

Как составить промпт, чтобы получить нормальный сайт

Самая частая ошибка — написать «сделай мне лендинг» и ждать шедевра. Нейронка сделает что-то усреднённое и безликое, потому что у неё не было материала для работы. Хороший результат начинается с хорошего запроса.

```

Формула запроса: пять блоков

Что это за страница — лендинг, продуктовая страница, страница курса, личный сайт, страница услуги. Скажи конкретно.
Что продаёшь или презентуешь — опиши своими словами. Не пиши «онлайн-курс», пиши «курс по нейрографике для женщин 35+, которые хотят найти себя».
Какие блоки нужны — заголовок и подзаголовок, что получишь, блок обо мне, программа, цена, FAQ, кнопка. Перечисли — ИИ выстроит их в нужном порядке.
Дизайн — тёмный или светлый фон, какие цвета, настроение (минималистично / ярко / строго / тепло). Если есть референс — скинь скриншот.
Для кого — кто твоя аудитория, какую боль закрывает продукт. Это влияет на тексты, которые ИИ напишет сам.

Пример плохого промпта

Сделай мне лендинг для курса.

Пример хорошего промпта

Создай лендинг для онлайн-курса «Нейрографика: найди себя». ``` Аудитория: женщины 35–55 лет, которые чувствуют, что живут не своей жизнью и хотят изменений, но не знают с чего начать. Блоки: 1. Герой: цепляющий заголовок + подзаголовок + кнопка «Записаться» 1. Боль: 3–4 ситуации, в которых узнает себя читательница 1. Что получишь: 4–6 результатов курса 1. Программа: 4 модуля кратко 1. Обо мне: 2–3 предложения (пока пиши placeholder) 1. Цена и кнопка 1. FAQ: 4 вопроса Дизайн: тёмный фон (#0a0a0a), акцентный цвет — тёплый терракот (#C9614A), шрифт без засечек, минималистично, воздуха много, кнопки с плавной анимацией при наведении.

```

Разница очевидна. Первый промпт даёт нейронке 5% информации. Второй — 80%. Результат отличается примерно так же.

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

```

Дизайн без дизайнера: как сделать красиво

«Я не разбираюсь в дизайне» — это не проблема. ИИ разбирается за тебя. Тебе нужно только дать ему что-то, от чего оттолкнуться.

```

Способ 1 — Загрузи логотип

Скинь своё лого в чат и напиши: «Определи основные цвета из логотипа и используй их как дизайн-систему для лендинга. Подбери шрифтовую пару из Google Fonts в этом же настроении». ИИ вычленит HEX-коды, предложит шрифты, сделает всё согласованным.

Способ 2 — Скриншот референса

Нашёл сайт, который нравится? Сделай скриншот и напиши вот так:

Вот скриншот сайта, который мне нравится по ощущению. ``` Проанализируй его: сколько воздуха между блоками, как расположены элементы, какое настроение создаёт. Сделай мой лендинг в этой же логике — но в моих цветах (фон #071510, акцент #7EE081) и с моим контентом.

Важно: не просишь скопировать сайт. Просишь взять подход к пространству и композиции. Это честно и это работает.

```

Способ 3 — Просто описать словами

Можно вообще без референсов. Просто скажи, что хочешь почувствовать:

Дизайн должен быть строгим и дорогим. Минимум украшений. ``` Много пространства. Как у люксового бренда — ничего лишнего, только суть. Тёмный фон, светлый текст, один акцентный цвет.

```

Про иконки и декор: Попроси ИИ делать иконки через SVG-код — они встроены прямо в страницу, весят ноль, всегда чёткие. Это лучше, чем вставлять картинки-файлы.

Осторожно — Base64: Иногда нейронка пытается вшить изображение прямо в код в виде бесконечной строки символов. Это называется Base64. Страница из-за этого будет грузиться вечно. Если видишь в коде что-то вроде data:image/png;base64,iVBOR... — пиши: «Не используй Base64. Замени изображение на ссылку или SVG-иконку».

```

Живые элементы: аккордеоны, анимации и всё, что двигается

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

```

Аккордеон (выпадающий список) — попробуй сам

Кликни на любой вопрос — увидишь, как это работает. Именно так выглядит FAQ или блок с программой курса на живом лендинге.

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

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

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

Добавь блок FAQ с аккордеоном. При клике на вопрос — разворачивается ответ, ``` остальные сворачиваются. Анимация плавная. Вот вопросы и ответы: [твои вопросы]

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

```

Анимированные числа — они уже крутятся

Блок, где цифры «накручиваются» при появлении на экране. Наведи мышку на карточку — увидишь ещё одну фишку: они покачиваются. Это те самые два эффекта одновременно.

Опыта

Учеников

Довольных

Сделай блок с тремя анимированными цифрами. Когда пользователь доскролливает ``` до блока — числа начинают «накручиваться» с нуля до финального значения за 2 секунды. Цифры: 5 лет опыта / 300 учеников / 98% довольных клиентов.

```

Покачивание и наклон — ты это уже видел

Карточки со счётчиками выше — и есть тот самый эффект. Они наклонены и при наведении выравниваются и чуть увеличиваются. Это делается одной фразой в промпте — никакой магии.

Карточки с цифрами — слегка повернуть на -12 градусов, добавить покачивание ``` при наведении (туда-обратно, плавно, как маятник). Иконки в преимуществах — при наведении пусть чуть увеличиваются и подпрыгивают.

```

Таймер обратного отсчёта — тикает прямо сейчас

Хорошо работает в связке с оффером или акцией — создаёт ощущение срочности. Человек видит, что время идёт, и принимает решение быстрее.

Дней

Часов

Минут

Секунд

Добавь таймер обратного отсчёта до 15 июня 2026 года, 23:59 по Москве. ``` Показывает дни, часы, минуты, секунды. Стиль — в цветах страницы, цифры крупные, каждая в отдельном блоке.

```

Появление блоков при скролле

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

Все секции страницы должны появляться с анимацией при скролле — ``` плавно снизу вверх, с лёгким затуханием. Задержка между блоками 0.2 секунды.

```

Главное правило: Описывай поведение, а не технологию. Не нужно говорить «сделай через JavaScript intersection observer». Говори: «когда пользователь доскролливает до блока — цифры начинают крутиться». Нейронка сама разберётся, как это реализовать.

Не переборщи: Страница с десятью видами анимаций одновременно выглядит как новогодняя ёлка — и тормозит на телефоне. Одна-две «фишки» на страницу — достаточно. Остальное пусть будет чистым и быстрым.

```

Системный промпт: чтобы не объяснять каждый раз заново

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

```

Как это работает

В Claude это называется Projects. Ты создаёшь проект, вписываешь туда базовые инструкции — и ИИ внутри этого проекта всегда знает твой стиль, цвета, правила.

Что вписать в системный промпт

Ты — мой ведущий разработчик лендингов. ``` Наш стиль: — Фон: #071510 — Акцентный цвет: #7EE081 — Шрифт: Inter — Кнопки всегда с анимацией при наведении — Много воздуха между блоками — Иконки только через SVG, никаких Base64 — Изображения — только через внешние ссылки Аудитория: предприниматели и эксперты, которые продают онлайн. Когда я даю задачу — сразу создавай готовый HTML-код. Не спрашивай лишних вопросов, если задача понятна.

```

После этого каждый новый запрос внутри проекта — это просто: «Добавь блок с отзывами» или «Сделай новый лендинг для вебинара». Нейронка уже знает, в каком стиле работать.

Лайфхак: Когда сделал первый лендинг и он понравился — скинь его финальный код в системный промпт со словами: «Используй этот код как основу для стиля всех следующих страниц». Так ИИ будет точнее воспроизводить нужный тебе дизайн.

```

Как и куда публиковать готовую страницу

ИИ сделал код — и на этом его работа заканчивается. Дальше нужно понять одну простую вещь: лендинг не висит в воздухе. Ему нужна площадка — какое-то место в интернете, где он будет жить. У тебя такое место, скорее всего, уже есть. Осталось разобраться, куда именно вставить код.

```

Нулевой шаг — проверить в браузере

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

Вариант 1 — Тильда

Подходит, если у тебя уже есть сайт на Тильде или ты только планируешь его завести. Важный момент: для публикации нужна платная подписка — она даёт доступ к домену. Домен может быть свой (купленный отдельно и подключённый к Тильде) или бесплатный тильдовский вида твоёимя.tilda.ws — это полноценный адрес в интернете, которым можно пользоваться.

Как вставить код — пошагово:

Заходишь в редактор нужной страницы на Тильде
Добавляешь новый блок — в поиске по блокам пишешь T123 или «HTML-код»
Открываешь блок, вставляешь туда весь код который выдал ИИ
Нажимаешь «Опубликовать» — превью внутри редактора не работает, это нормально
Страница открывается по твоему адресу. Пока не дал ссылку никому — видишь только ты

Вот как выглядит этот блок внутри редактора Тильды:

Вариант 2 — Геткурс

Подходит, если у тебя уже есть онлайн-школа на Геткурсе. Заходишь в редактор нужной страницы, добавляешь блок «Вставка HTML», вставляешь туда код — результат виден сразу в режиме предпросмотра.

Честное предупреждение про Геткурс: В отличие от Тильды, Геткурс может конфликтовать с HTML-кодом — страница иногда отображается не так, как должна: съехавшие шрифты, лишние отступы, что-то не того цвета. Это не ошибка в коде — это особенность платформы, которая вмешивается в стили.

Решается в одно действие: делаешь скриншот того, что получилось, скидываешь его в чат к ИИ и пишешь:

Вот скриншот того, как мой лендинг отображается на Геткурсе. Видишь, что съехало? Исправь код так, чтобы он корректно работал внутри HTML-блока Геткурса — без конфликтов со стилями платформы.

ИИ увидит проблему по скриншоту и поправит код под особенности платформы.

Вариант 3 — Свой сайт на любой платформе

Если у тебя уже есть сайт — на WordPress, Taplink или любой другой платформе — ищи раздел где можно добавить HTML-блок или вставить произвольный код. Создаёшь отдельную страницу, вставляешь код, публикуешь. Принцип везде одинаковый: есть HTML-блок — в него идёт код.

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

Просто посмотреть код без публикации — CodePen

Бывает, что ИИ выдал код простым текстом прямо в чате — просто стену символов, без файла. Идёшь на codepen.io, вставляешь код в поле HTML — и сразу видишь, как выглядит страница. Без регистрации. Это не для публикации — просто чтобы проверить результат до того, как вставлять на сайт.

```

Как вносить правки: разговариваешь — не программируешь

Самое крутое в этом подходе — правки делаются так же, как создание. Словами. Не нужно лезть в код и искать нужную строчку.

```

Как просить о правках

Просто опиши, что не так, как будто объясняешь человеку:

— Сделай заголовок крупнее, он теряется на фоне ``` — Кнопка слишком маленькая на мобильном, увеличь — Убери блок с ценой, я ещё не решил — Добавь блок с тремя отзывами после программы курса — Поменяй фоновый цвет с чёрного на очень тёмно-зелёный

```

Итерации — это нормально

Не жди идеального результата с первого раза. Средний лендинг делается за 3–5 итераций: первая версия → правки по текстам → правки по дизайну → финальные детали. Это быстрее, чем переписка с фрилансером по почте.

Правка лендинга — это 2 минуты, а не 2 дня.

Написал в чат → получил новый код → вставил → готово. Пока фрилансер ответит на первое сообщение, ты уже запустил три версии.

Частые вопросы про правки

ИИ потерял стиль при правках — как вернуть?

Иногда при маленьких правках нейронка выдаёт только изменённый фрагмент и теряет остальное. Пиши явно: «Верни мне полный HTML-код страницы с этим изменением». Всегда работай с полным файлом, а не с кусками.

Код стал очень длинным — это нормально?

Да, для сложного лендинга код может быть 300–500 строк. Это нормально. Тебе не нужно его читать — просто скопировал и вставил. Размер кода не влияет на скорость загрузки так сильно, как картинки.

Нейронка сделала что-то, чего я не просил. Как откатить?

Напиши: «Ты изменил что-то лишнее — верни [конкретно что] обратно, остальное оставь». Или просто скинь предыдущую версию кода и попроси применить только нужное изменение.

```

Живой сайт: меняй под каждую кампанию

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

```

Что можно менять за минуты

Заголовок и оффер — тестируй разные формулировки, чтобы понять, что лучше конвертит. Попроси ИИ написать 5 вариантов заголовка под разные боли.
Акционный блок — добавь таймер со скидкой перед запуском. Убери после окончания. Два сообщения в чат.
Мобильная версия — попроси проверить, как выглядит на маленьком экране, и поправить отступы. Большинство трафика — мобильный.
Новый язык — попроси перевести весь лендинг на другой язык, сохраняя дизайн. Это минута работы.

Профессиональный трюк: Сделай несколько версий одного лендинга с разными заголовками и запусти на разные аудитории. Посмотри, где лучше конверсия. Раньше это называлось A/B-тест и стоило денег. Теперь это занимает 20 минут в чате.

```