БАЗА
ЗНАНИЙ
Как сделать сайт с помощью Claude
Зачем эксперту собственный сайт

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

Где сайт обязателен:
  • Лендинг продукта. Один экран – одна цель. Привели человека, рассказали суть, цену, кейсы, формат. Получили заявку.
  • Страница клуба или сообщества. Долгий чек-лист причин зайти, отзывы, кейсы, тарифы. Конвертирует на 30–50% выше, чем закреп в блоге.
  • Страница автовебинара. Регистрация, бонусы, кнопка «принять участие».
  • Промо-страница нового запуска. Под конкретный поток обучения с дедлайном и ограничением.
  • Страница записи на разбор. С кейсами, отзывами, формой и расчётом времени слота.
Раньше сборка приличного сайта занимала 1–2 недели и стоила от 30 тысяч рублей. С Claude вы делаете рабочий сайт за один вечер, бесплатно, без верстальщика и дизайнера. И полностью контролируете каждый блок.

Пример того, что Claude делает «под ключ» – мой сайт-блог: blog.pavelrostovtsev.ru. Полностью собран и сверстан Claude от макета до загрузки на сервер. Светлая и тёмная тема, адаптивная вёрстка, анимации, форма с легальной информацией – всё это Claude.

В этом уроке разберу всю цепочку: от структуры до публикации сайта на собственном домене.

Как устроена сборка

Весь сайт собираете через Claude Code в десктопном приложении – прямо у себя на компьютере. Claude Code создаёт файлы сайта в папке на вашем компе, вы тут же открываете их в браузере и смотрите результат. Хостинг и домен понадобятся только в самом конце, когда сайт уже готов и нравится.

Логика сборки в 4 шага:
  1. Бриф. Даёте Claude Code развёрнутое описание сайта – он собирает файлы сайта (index.html и нужное к нему) прямо в папке у вас на компьютере.
  2. Смотрим в браузере. Открываете index.html двойным кликом – это живой сайт у вас на экране, безо всякого хостинга.
  3. Итерации. Даёте правки в чате – Claude Code переписывает файлы. Обновляете страницу в браузере, смотрите. Цикл повторяется, пока не нравится.
  4. Публикация. Покупаете сервер и домен, даёте Claude Code доступ к серверу – он заливает готовый сайт в интернет.
Весь контроль – у вас. Вы видите каждую версию у себя на экране до того, как она опубликована. Никаких сюрпризов.

Запускаем Claude Code и создаём чат «Дизайнер сайтов»
Claude Code – это отдельный режим внутри десктопного приложения Claude. Запускается в пару кликов.
  1. Откройте приложение Claude (под VPN) и войдите в аккаунт.
  2. Вверху у приложения три вкладки: ChatCowork и Code. Нажмите Code – это и есть Claude Code.
  3. Только для Windows: при первом открытии вкладки Code приложение попросит установить Git for Windows. Поставьте по ссылке, которую оно покажет, и перезапустите приложение. На Mac ничего доставлять не нужно.
  4. Заранее создайте на компьютере пустую папку под сайт – например, на рабочем столе папку «Мой сайт». В ней Claude Code будет хранить файлы вашего сайта.
  5. В боковой панели слева нажмите «+ New session» (новая сессия, по сути это новый чат) и выберите рабочую папку (Project folder) – ту самую «Мой сайт», которую создали.
  6. Напишите в этот чат первое задание – бриф из Шага 1 ниже, и отправьте.
  7. Только после первого сообщения чат можно переименовать (пустой, ещё не начатый, переименовать не получится). Нажмите на название сессии в верхней панели и впишите «Дизайнер сайтов» – так вы всегда будете понимать, что именно в этом чате собираете сайты.
Готово. Дальше каждый раз, когда захотите поработать над сайтом, заходите в приложение → вкладка Code → чат «Дизайнер сайтов».

Шаг 1. Бриф – что сказать Claude Code
Главная ошибка – сразу попросить «сделай сайт про мой курс». Получите универсальную безликую страницу, которая никого не зацепит.
Вариант А – короткий бриф в одно сообщение. Если знаете, что хотите, пишете Claude Code одним большим сообщением:

Собери мне одностраничный сайт.

Детали:
– Ниша и продукт: [что продаёте].
– Цель сайта: [собрать заявки / регистрация на вебинар / продажа через Продамус / написать вам напрямую].
– Аудитория: [портрет идеального клиента – кто они, главные боли, что уже пробовали].
– Тон и стиль: [дружелюбный / строгий / премиум / молодёжный].
– Цвета: [светлый / тёмный / выбери сам под нишу].
– Название в hero: [имя эксперта / название проекта].

Структура продающего лендинга: hero с обещанием, блок «Для кого», 3 боли, решение, 3-4 кейса с цифрами, тарифы, FAQ, финальный призыв. Адаптируй под мою нишу, не шаблонно.

Собери в один HTML-файл (HTML+CSS+JS встроенные) прямо в папке проекта у меня на компьютере. Никуда не заливай, пока не скажу.

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

Я хочу собрать продающий сайт. Сначала задай мне 15 точечных вопросов, чтобы собрать полный бриф:

– Что обещаем человеку? (Главный результат, измеримый.)
– Какие 3 самые сильные боли клиента?
– Какие возражения частые (минимум 5)?
– Какие кейсы и цифры есть? (Конкретно.)
– Какие отзывы? (Имена, ниши, результаты.)
– Какой тон? (Дружеский / экспертный / провокационный.)
– Конкуренты – что нравится, что нет?
– Чем отличаемся?
– Что включено в продукт?
– Гарантии?
– Сроки и дедлайны?
– Бонусы?
– Текст кнопки, куда ведёт?
– Соц. доказательства – есть?
– Цвета и стиль?

Спрашивай по одному, жди мой ответ. После всех ответов собери бриф и попроси утвердить. Только потом собирай сайт.

Claude Code по одному задаёт вопросы. Отвечаете – в конце собирает бриф, вы утверждаете, он приступает.

Качество сайта на выходе – напрямую от качества брифа. Если готовы потратить лишние 15 минут – Вариант Б заметно сильнее.

Шаг 2. Смотрим первую версию в браузере

Claude Code за пару минут собирает index.html в папке проекта на вашем компьютере. Открываете файл двойным кликом – он открывается в браузере как обычная страница.

Видите реальный сайт: все цвета, шрифты, вёрстка, адаптивность. Можно потыкать кнопки, проскроллить, переключиться в мобильный режим (в Chrome – F12 → иконка телефона).

Это черновик. Дальше будете его дорабатывать итерациями.

Шаг 3. Правки – итерируете, пока не нравится

Открытый HTML-файл у вас в браузере = живая версия сайта. Прямо из него даёте правки Claude Code:

– «Поменяй заголовок hero на "Путь к цели за 30 дней"». – «В блоке кейсов добавь четвёртый: Андрей, дизайнер, +400К за 2 месяца». – «Сделай цвет кнопки красным, слишком бледный сейчас». – «Убери FAQ, он скучно написан, перепиши его на 5 цепляющих вопросов вместо 10 нудных». – «В hero добавь моё фото – сейчас пришлю», прикрепляете фото прямо в чат. – «Сделай блок отзывов на тёмном фоне, с белым текстом».

Claude Code за минуту переписывает файлы с учётом правок. Обновляете страницу в браузере – видите результат.

Цикл: правка → новый файл → смотрите в браузере → следующая правка. 
Делаете 5, 10, 30 итераций, пока сайт не станет именно таким, как хотите.

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

Шаг 4. Покупаете сервер и домен, Claude Code публикует сайт
Сайт на экране вас устраивает – пора выложить его в интернет, чтобы он открывался по вашему адресу. Нужны три вещи: сервер, домен и публикация. Сервер и домен покупаете вы вручную (оплата картой или СБП), а заливает сайт уже Claude Code – вы просто дадите ему доступ к серверу.

Почему сервер берём в Европе

Сервер берите сразу в Европе (Германия, Нидерланды или Финляндия), не в России. Причина на перспективу: дальше в этом модуле мы будем настраивать разные автоматизации и ставить Claude прямо на сервер, чтобы он работал там сам, без вашего компьютера. А Claude с российского IP не подключается – Anthropic блокирует российские адреса, и на российском сервере он просто не заработает. Поэтому сервер нужен европейский. Чтобы потом не платить за два сервера и не переезжать, берём европейский сразу здесь: на нём сейчас будет жить сайт, а позже – и автоматизации.

Шаг 4.1. Покупаете сервер на Timeweb
Самый простой вариант – Timeweb Cloud. Российский сервис с понятным интерфейсом и поддержкой на русском, а серверы есть в Европе.

  1. Заходите на timeweb.cloud, регистрируетесь по почте или через Госуслуги.
  2. В верхнем меню выбираете «Облачные серверы» (не обычный «Хостинг» – нужен именно облачный сервер).
  3. Нажимаете «Создать сервер».
  4. 🔴 Локация – Германия, Нидерланды или Финляндия. НЕ Россия (выбирается в разделе «Регион»).
  5. Тариф: 2 ядра CPU, 4 ГБ RAM, 40 ГБ SSD. Этого хватит и для сайта, и для будущих автоматизаций.
  6. Операционная система – Ubuntu 22.04 LTS (обычно стоит по умолчанию).
  7. 🔴 Публичный IP-адрес – обязательно подключите. Для сайта он нужен: без него домен к серверу не привязать и сайт в интернете не открыть. Это отдельная опция при создании сервера (недорогая). Если уже создали сервер без него – добавьте в настройках сервера.
  8. Бэкапы – рекомендую подключить (автосохранение всего диска, около 300 руб/мес). Подстраховка, если что-то сломается.
  9. Нажимаете «Создать». Через минуту сервер готов.
После создания Timeweb покажет три значения: IP-адрес (вида 123.45.67.89), логин (обычно root) и пароль (длинная строка). Сохраните все три в надёжном месте – через шаг передадите их Claude Code.

Шаг 4.2. Покупаете домен
Домен покупаете вручную, Claude Code сам этого не сделает (Timeweb требует ручной оплаты и подтверждения оферты).
  1. В личном кабинете Timeweb верхнее меню → «Домены» → «Зарегистрировать домен».
  2. Вводите желаемое имя (например, mysite.ru). Сервис сразу скажет, свободно или занято.
  3. Выбираете свободный вариант → «Заказать» → оплачиваете (.ru около 200 руб/год, .com около 1000 руб/год).
Купленный домен сразу появится в вашем кабинете Timeweb.

Шаг 4.3. Даёте Claude Code доступ – он публикует
Чтобы Claude Code зашёл на сервер, ему нужны три вещи: IP-адрес сервера, логин (root) и пароль. Вот где их взять в Timeweb:

  1. Зайдите в Timeweb Cloud и откройте ваш сервер.
  2. На вкладке сервера «Дашборд» собраны все реквизиты подключения: IP-адрес, пользователь root и пароль. Пароль прямо там можно скопировать (он же есть в разделе «Доступ»).
  3. Если пароль не сохранился и нигде не показывается – смените его в панели: «Доступ» → «Изменить» → «Сменить пароль», и скопируйте новый.
Эти три значения и есть доступ к серверу. Подставляете их в промпт ниже вместе с вашим доменом и отправляете Claude Code:

Вот доступ к моему серверу на Timeweb:
– IP: 123.45.67.89
– логин: root
– пароль: [пароль с Timeweb]

Домен mysite.ru я уже купил в Timeweb.

Подключись к серверу по SSH и опубликуй мой сайт из этой папки:

1. Поставь веб-сервер (nginx) и размести файлы сайта.

2. Привяжи домен mysite.ru к серверу. Подскажи мне, какие DNS-записи добавить в кабинете Timeweb, если это нужно с моей стороны.

3. Подключи бесплатный SSL (Let's Encrypt), чтобы был зелёный замочек.

4. Включи редирект http → https и сжатие.

Когда всё готово – дай ссылку, я открою и проверю.

Через 10–15 минут Claude Code сообщает: «готово, https://mysite.ru открывается». Сайт в интернете.

Шаг 5. Дальнейшие правки – правим уже опубликованную версию

Сайт живой, но вам что-то захочется поменять. Говорите Claude Code:
  • «Поменяй в hero заголовок на "Новый текст" и сразу обнови на сервере».
  • «Добавь в FAQ вопрос "Что если нет денег" и короткий ответ – публикуй сразу».
  • «Замени фото на втором экране на то, что я пришлю» → прикрепляете фото.
Через 1-2 минуты правка уже на сайте. Обновили страницу в браузере – увидели.

Фишка: безопасный цикл с предпросмотром. Если правки большие и не хотите рисковать публиковать сразу – попросите Claude Code:

С этого момента все правки делай в 2 шага: 1. Сначала меняй файлы только локально, у меня на компьютере, я открою и посмотрю. 2. Если говорю «ок, заливай» – публикуешь на сервер. 3. Без моего «ок, заливай» – на сервере ничего не трогаешь.

Claude Code подтверждает. Теперь у вас контроль перед публикацией на каждой правке.

Продвинутые фишки для вау-эффекта
Фишка 1 – «Пять референсов» как ввод стиля.
Найдите 5 сайтов, которые вам визуально нравятся. Скиньте их ссылки или скриншоты Claude.

Где брать примеры дизайна:
  • styles.refero.design – огромная подборка готовых стилей по категориям (минимализм, бруталистский, ретро, корпоративный и т.д.). Выбираете стиль – забираете 5–10 скриншотов одним пакетом.
  • awwwards.com – премиальные награды за веб-дизайн. Раздел Sites of the Day – самые дорогие и стильные сайты планеты.
  • godly.website – подборка самых стильных современных сайтов. Минимализм, типографика, тёмные темы.
  • land-book.com – огромная библиотека лендингов с фильтрами по индустрии и стилю.
  • lapa.ninja – подборка лендингов, удобно фильтровать по категориям.
  • dribbble.com – портфолио дизайнеров. Поиск: landing page, website design, expert website.
  • mobbin.com – чистые интерфейсы. Если нужны идеи для типографики, сеток, форм.
  • pinterest.com – запросы landing page design, personal brand website, expert site.
Дальше отдаёте подборку в Claude:

Вот 5 сайтов-референсов: [ссылки или скриншоты].

Разбери каждый:
– Какие шрифты используют?
– Какая цветовая палитра?
– Как организован hero?
– Как сделаны переходы между блоками?
– Какой ритм типографики?

Собери на основе разбора единый «дизайн-паспорт» для моего сайта – с конкретными шестнадцатеричными цветами, размерами шрифтов, отступами. Дальше используй его для всех правок.

Качество дизайна прыгает в разы. Сайт перестаёт выглядеть «универсальным».

Фишка 2 – Автоматическая проверка сайта на разных экранах.
Один глаз может пропустить, что на мобильном текст вылезает за край или что какая-то картинка не загружается. Claude может сам сделать скриншоты сайта в трёх размерах – компьютер, планшет, телефон – и показать, где есть проблемы.

Просите:

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

Если что-то не так – покажи мне в скриншоте красной обводкой.

Claude сам всё запустит, проверит и покажет результат. Если есть косяки – сразу скажет, какие и где. Вам остаётся попросить «исправь это и проверь ещё раз».

Фишка 3 – Подключение счётчика Яндекс.Метрики.

Когда сайт уже работает – нужно отслеживать, кто на него заходит, сколько времени читает, на какие кнопки нажимает. Стандарт в России – Яндекс.Метрика (бесплатно, регистрация по почте на metrika.yandex.ru).

После регистрации в Метрике вы получаете номер счётчика – число вида 87654321. Просите Claude его подключить:

Подключи мне на сайт Яндекс.Метрику, номер счётчика 87654321. Дополнительно настрой две «цели»:
– клик по кнопке «оставить заявку»;
– успешная отправка формы заявки.

Если на сайте уже что-то стоит – не дублируй, просто дополни недостающее. Залей правки на сервер.

Через минуту счётчик подключён, через сутки в Метрике вы видите статистику посетителей.

Фишка 4 – Тёмная тема за один промпт.

Уже готовому сайту добавляете тёмную тему одной командой:

Добавь моему сайту тёмную тему.

Сделай так:

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

Залей на сервер и проверь.

За 30 секунд сайт получает второй режим. У моего клуба тёмная тема была собрана этим же промптом.

Фишка 5 – Тест двух версий главного экрана (A/B-тест).

Хотите проверить, какой заголовок/кнопка лучше работает – не нужно решать наугад. Просите Claude сделать тест:

Хочу проверить, какой главный экран лучше конвертит в заявки.
Сделай так:
– Возьми мой нынешний главный экран – оставь как «версия А».
– Сделай вторую версию «Б» с другим заголовком, подзаголовком и кнопкой. (Предложи 3 варианта на выбор – я выберу.)
– Настрой так, чтобы половина посетителей видела версию А, другая половина – версию Б, случайно.
– Каждый показ запиши в мою Яндекс.Метрику, чтобы через неделю я мог сравнить, какая версия даёт больше заявок.

Подскажи через 7 дней «пора смотреть результаты».

Claude всё настроит сам. Через неделю показывает: «версия Б дала на 30% больше заявок – переключаем на неё навсегда?». Решаете – он переключает.

Фишка 6 – Автоматические бэкапы перед каждой правкой.

Чтобы не бояться сломать рабочий сайт – попросите Claude всегда делать запасную копию перед заливкой нового:

Перед каждой заливкой нового на сервер – сначала сохраняй запасную копию текущей версии. Храни последние 10 копий, старые удаляй сам.

Если я когда-нибудь скажу «откати на вчерашнюю версию» – ты просто берёшь нужную копию и возвращаешь.

Один раз попросили – дальше Claude всегда страхует. Если что-то сломалось – говорите «верни последнюю рабочую» – через 30 секунд сайт снова в порядке.

Куда уходят заявки и как принимать оплату

Важный момент, о который спотыкаются: простой статичный сайт сам по себе не принимает ни заявки, ни оплату. Форма на чистом HTML, если её не подключить к получателю, никуда не отправляет: человек жмёт «Отправить», а заявка просто пропадает. Поэтому приём заявок и приём оплат настраиваем отдельно.

Приём заявок

Попросите Claude Code сделать так, чтобы заявки с формы падали в вашу Google Таблицу и дублировались вам на email:

Подключи форму заявки на сайте так, чтобы каждая заявка:

1. Записывалась в мою Google Таблицу (сделай Google Apps Script как приёмник и подключи к форме).

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

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

Приём оплаты

Для приёма оплат в России к сайту подключают платёжный сервис. Рабочие варианты: ЮKassa, Robokassa, Tinkoff и Продамус (через него мы принимаем оплату клуба Павла, на его примере и опишу).

Самый простой способ, без своего бэкенда, – кнопка оплаты, которая ведёт на платёжную форму Продамуса:

  1. Зарегистрируйтесь в Продамусе. Вы получаете свою платёжную форму с адресом вида вашмагазин.payform.ru.
  2. Просите Claude связать форму на сайте с оплатой так, чтобы данные, которые человек ввёл у вас (имя, email, телефон), сразу передавались в Продамус. Тогда форма оплаты откроется уже заполненной, и человеку останется только подтвердить платёж, а не вводить всё заново. Ровно так сделано у нас в клубе: в ссылку на Продамус подставляются почта и телефон клиента.
Подключи кнопку «Оплатить» к моей форме Продамуса: [адрес вида вашмагазин.payform.ru]. Сделай так, чтобы имя, email и телефон, которые человек ввёл на сайте, передавались в ссылку Продамуса параметрами (do=pay, customer_email, customer_phone) вместе с суммой, и форма оплаты открывалась уже заполненной этими данными. Кнопку поставь рядом с описанием продукта и в финальном блоке.

Дальше Продамус показывает форму оплаты с уже подставленными данными, принимает карту и выдаёт чек по 54-ФЗ. Своего сервера для этого не нужно.

Автоматическая выдача доступа после оплаты (продвинутый уровень).

Если нужно, чтобы после оплаты человек сразу получал доступ (как в клубе Павла, где после оплаты автоматически выдаётся доступ и приглашение), Продамус умеет отправлять уведомление об оплате на ваш сервер – это называется вебхук. Небольшой скрипт на сервере принимает уведомление и сам выдаёт доступ. Настройка такая: в кабинете Продамуса указываете адрес вебхука, а Claude Code просите написать обработчик, который примет уведомление и обязательно проверит его подпись, чтобы запрос был действительно от Продамуса, а не подделка. На старте это необязательно: достаточно кнопки оплаты, а доступ первое время можно выдавать вручную.

Семь вещей, от которых сайт становится быстрым и не ломается

Claude собирает хороший сайт и без подсказок, но эти семь пунктов отделяют «нормально» от «отлично». Все они – набитые шишки с реальных сайтов.

Передайте их Claude при сборке (можно одним сообщением в конце), и он учтёт.
  1. Шрифты – локально, не с серверов Google. 🔴 Самый важный пункт для российской аудитории. Если шрифты подгружаются напрямую с Google, у посетителя из России сайт может висеть с белым экраном по 5-20 секунд: Google в РФ душат, браузер ждёт ответа. Лечится тем, что шрифты кладут прямо на ваш сайт. Скажите Claude: «Шрифты подключи локально, скачай и положи на сайт, не грузи с fonts.googleapis.com». Это же чинит жалобу «сайт дико тормозит».
  2. Отступы по бокам на всех экранах, включая планшет. Частая беда: на телефоне и компьютере всё аккуратно, а на планшете текст липнет к самому краю. Скажите Claude: «Проверь боковые отступы на планшете (768-1280px) – контент не должен упираться в края ни на одном размере».
  3. Фон на всей странице, чтобы не мигало белым. Иногда при переходе на страницу на долю секунды мелькает белый фон, особенно на тёмной теме. Скажите Claude: «Сделай так, чтобы при загрузке не было белой вспышки».
  4. Кнопки читаются и в светлой, и в тёмной теме. Если у сайта есть переключатель темы, главная кнопка-призыв должна оставаться яркой и читаемой в обоих режимах, а не сливаться с фоном. Скажите Claude: «Проверь, что главная кнопка хорошо видна и в светлой, и в тёмной теме».
  5. Метрику ставьте без вебвизора. У Яндекс.Метрики есть функция «Вебвизор» – запись движений мыши каждого посетителя. Она заметно грузит страницу и на старте почти не нужна. При подключении (Фишка 3) скажите Claude: «Метрику подключи без вебвизора». Счётчик визитов, источники и цели остаются.
  6. Настоящий значок сайта (фавиконка). Маленькая иконка во вкладке браузера и в результатах поиска. Если её нет или она вставлена «на лету», Google рисует в выдаче безликий серый глобус. Скажите Claude: «Сделай настоящий файл фавиконки favicon.ico и положи в корень сайта, не через data-URI». Иконку берите свою – буква или простой символ вашей темы.
  7. Ровный текст без рваных строк. Мелочь, которая делает сайт опрятным: заголовки и абзацы не обрываются так, что одна строка почти пустая. Скажите Claude: «Добавь балансировку переносов текста на всём сайте».
Готовая фраза, чтобы передать всё разом:

Собери сайт с учётом: локальные шрифты (не Google Fonts), отступы по бокам на всех экранах включая планшет, фон без белой вспышки, кнопки читаемы в обеих темах, Метрика без вебвизора, настоящий файл фавиконки, балансировка переносов текста.

Типичные ошибки

Собирают форму, а она никуда не отправляет. Голая HTML-форма без подключённого получателя только выглядит рабочей: человек жмёт «Отправить», а заявка пропадает в никуда. Подключите форму к Google Таблице и уведомлению на email (см. раздел «Куда уходят заявки и как принимать оплату»).
Сразу заказывают «сайт» без брифа. Получают универсальный безликий лендинг. Бриф – обязательный шаг. Пропуск даёт минус 80% качества.
Делают слишком длинный сайт. 30 экранов до кнопки – человек не доскроллит. Оптимум – 8–12 смысловых блоков. Лучше короткий концентрированный, чем длинный размазанный.
Перегружают анимациями. Каждое появление с эффектом, каждая кнопка с пульсацией, фон плывёт. Это режет восприятие текста и грузит мобильные. Анимации – только там, где они помогают восприятию: появление при скролле, плавный hover, переход между темами.
Не тестируют на мобильном. 70% трафика приходит с телефона. Проверяйте каждую правку лично с телефона или через Фишку 2 – попросите Claude сделать скриншоты для всех экранов и показать их вам.
Используют стоковые картинки. Сразу убивают доверие. Лучше – реальные фото вас, ваших клиентов, рабочих процессов. В крайнем случае – генерируете уникальные изображения через Gemini.
Забивают на «зелёный замочек» (SSL). Сайт без https:// (без замочка слева от адреса) браузер помечает как «небезопасный» – и половина людей сразу закрывают страницу. Замочек бесплатный – подключается через Let's Encrypt. Попросите Claude настроить SSL при публикации (Шаг 4), или подключите вручную в панели Timeweb.
Не делают бэкапы. Что-то сломалось – месяц работы потерян. Бэкап перед каждой заливкой – правило (см. Фишку 6).
Гонятся за идеалом и не публикуют. Лучше выкатить «хороший» сайт сегодня и улучшать по ходу, чем 3 месяца полировать «идеальный» в столе. Быстрее тест – быстрее обратная связь – быстрее результат.
Задание:

  1. Соберите бриф через промпт из Шага 1. Не ленитесь – ответьте честно на все вопросы.
  2. Получите от Claude Code первую версию сайта. Откройте index.html двойным кликом в браузере.
  3. Итерируйте правками в чате 5–10 раз, пока сайт не станет таким, как хотите.
  4. Купите европейский сервер на Timeweb (с публичным IP) и домен. Сервер около 5000-6000 руб/мес, но он же дальше пойдёт под автоматизации. Домен около 200 руб/год.
  5. Дайте Claude Code доступ к серверу промптом из Шага 4.3 – он зальёт сайт, привяжет домен и подключит SSL.
  6. Откройте свой домен в браузере. Поделитесь ссылкой в чате программы.
Результат пришлите в чат программы: ссылку на готовый сайт + одно предложение, сколько времени заняла сборка и какие были самые сложные моменты.

* Организация Meta, а также её продукты Instagram и Facebook признаны экстремистскими и запрещены на территории РФ.
ПРЕДЗАПИСЬ НА
БЛИЖАЙШИЙ ПОТОК
ПЕРСОНАЛЬНОГО
МЕНТОРСТВА
программа для тех, кто хочет системно зарабатывать на своих знаниях от 300 тыс. в месяц
Made on
Tilda