Коротко: Claude Code хорошо пишет код, но слабый сайт получается не из-за модели, а из-за пустого задания. Если попросить «сделай красивый лендинг», вы получите аккуратный шаблон без характера, конверсии и привязки к продукту. Чтобы собрать сайт уровнем выше, нужно вести модель по этапам: от задачи и референсов до дизайн-системы, компонентов, правок и бизнес-метрик.
Если вы запускаете SaaS, лендинг услуги или внутренний веб-инструмент, цена слабого интерфейса быстро становится видимой: трафик есть, клики есть, а заявки уходят конкурентам. При 1 000 посетителей в месяц и среднем чеке 30 000 ₽ разница между конверсией 1% и 2% — это около 300 000 ₽ потенциальной выручки в месяц. Поэтому дизайн на Claude Code нельзя воспринимать как «пусть ИИ сам придумает красиво». Его нужно ставить в рамки, как разработчика и дизайнера в одной рабочей связке.
В Эпоха ИИ мы используем Claude, ChatGPT и DeepSeek не как чат в браузере, а как часть процесса: с контекстом, базой знаний, CRM, аналитикой и проверкой результата. С сайтами логика та же. Чем точнее вы описываете продукт, аудиторию, стиль, ограничения и критерии готовности, тем меньше Claude Code ляпает очередной «синий градиент, карточки, кнопка Start now».
1. Почему Claude Code делает шаблонные сайты?
Claude Code делает шаблонный сайт, когда получает шаблонное задание. Модель не знает ваш рынок, вкус клиента, оффер, возражения и визуальный уровень конкурентов, если вы не положили это в контекст.
Типичный старт выглядит так: «Сделай лендинг для приложения, которое помогает находить тренды в соцсетях». После такого запроса Claude Code честно соберёт страницу: hero, три преимущества, карточки, тарифы, FAQ. Код может быть чистым, адаптив может работать, но сайт будет похож на сотни других SaaS-страниц. Проблема не в том, что у ИИ «нет вкуса». Проблема в том, что вкуса часто нет в задании.
Для бизнеса это не эстетическая придирка. Шаблонный интерфейс плохо объясняет, почему нужно оставить заявку именно у вас. Он не снимает страхи, не показывает разницу с конкурентами, не ведёт человека к действию. В итоге команда платит за трафик, но теряет часть заявок на первом экране.
Сильный сайт на Claude Code начинается не с команды «сверстай». Он начинается с ответа на четыре вопроса:
- кто читатель и в каком состоянии он приходит на страницу;
- что он должен понять за первые 5–10 секунд;
- какой визуальный язык вызывает доверие именно в этой нише;
- по каким признакам вы поймёте, что сайт готов, а не только «выглядит нормально».
Claude Code не заменяет постановку задачи. Он ускоряет путь от понятного брифа до рабочего интерфейса, но не угадывает вашу стратегию из одной фразы.
2. Уровень 1: один промпт и надежда на вкус модели
На первом уровне вы просите Claude Code сделать страницу почти без вводных. Это самый быстрый путь к первому прототипу и самый частый источник разочарования.
Промпт уровня 1 обычно звучит так: «Создай лендинг для сервиса аналитики соцсетей для контент-креаторов». Claude Code сам выбирает структуру, цвета, компоненты, стиль текста и расположение блоков. На выходе получается рабочая заготовка, но не сайт, который можно отдавать в рекламу.
На этом уровне полезно решить только одну задачу: быстро увидеть скелет продукта. Например, проверить, какие секции модель считает базовыми: hero, социальное доказательство, демонстрация интерфейса, тарифы, FAQ. Но останавливаться здесь нельзя.
Главные ошибки уровня 1:
- просить «сделай красиво», не объясняя, что для вашей аудитории значит «красиво»;
- не указывать фреймворк, стек и правила проекта;
- не давать референсы, а потом ругать модель за общий стиль;
- принимать первый вариант как черновик для публикации.
Чтобы перейти дальше, нужно научиться писать не «промпт на сайт», а краткий дизайн-бриф: аудитория, задача страницы, желаемое впечатление, ограничения, примеры хороших решений и список того, что не подходит.
3. Уровень 2: бриф, стек и понятные рамки
На втором уровне Claude Code получает не просьбу, а рабочее задание. Вы задаёте стек, структуру, ограничения, тон и критерии готовности.
Для веб-разработки это уже серьёзный скачок. Модель понимает, что нужно собрать не абстрактную страницу, а конкретный интерфейс: например, Astro или Next.js, Tailwind, адаптив под мобильные, строгая сетка, без лишних анимаций, с блоком кейса и понятным CTA. Чем меньше неопределённости, тем меньше «средней температуры по интернету» в результате.
Хороший бриф для Claude Code должен включать:
- тип сайта: лендинг, многостраничный сайт, кабинет, SaaS-интерфейс;
- цель: заявка, оплата, регистрация, демо, запись на аудит;
- аудиторию: владелец бизнеса, маркетолог, селлер, директор по продажам;
- стиль: строгий B2B, тёмный технологичный, редакционный, минималистичный;
- стек и ограничения проекта;
- блоки, которые обязательны, и блоки, которые запрещены;
- критерии проверки: скорость, адаптив, читаемость, доступность, конверсионные элементы.
Этот уровень уже даёт результат лучше среднего. Но сайт всё ещё может выглядеть шаблонно, если у модели нет визуального материала. Слова «дорого», «премиально», «современно» каждый понимает по-своему. Claude Code тоже.
4. Уровень 3: референсы и визуальная насмотренность
На третьем уровне вы перестаёте описывать вкус абстрактными словами и показываете модели, на что смотреть. Референсы сильно повышают шанс получить интерфейс с характером.
Референс — это не команда «скопируй вот этот сайт». Это набор признаков: плотность сетки, ритм отступов, типографика, форма карточек, стиль иллюстраций, поведение hero-блока, баланс текста и воздуха. Claude Code лучше работает, когда вы объясняете, что именно взять из примера.
Например, можно описать так: «Возьми у первого референса плотный editorial layout и крупную типографику. У второго — способ показывать интерфейс продукта в hero. У третьего — спокойную палитру без кислотных градиентов. Не копируй композицию целиком, собери свою версию под наш SaaS».
Для бизнеса этот этап особенно важен в нишах, где доверие зависит от визуального уровня: B2B SaaS, финтех, медицина, промышленное оборудование, консалтинг, агентские услуги. Если сайт выглядит как шаблон из конструктора, часть клиентов считывает это как сигнал о слабом продукте.
Давайте Claude Code не ссылку «нравится вот это», а разбор референса: что взять, что не брать и почему это подходит вашей аудитории.
На этом уровне стоит подключать внутренние ссылки на уже готовые материалы. Если вы строите сайт вокруг ИИ-продажника, полезно заранее собрать тезисы из статьи ИИ-менеджер по продажам в 2026. Если делаете технический лендинг про Claude, рядом пригодится разбор Claude Code 2026.
5. Уровень 4: дизайн-система вместо набора блоков
На четвёртом уровне вы просите Claude Code думать не страницей, а системой. Это момент, где интерфейс начинает выглядеть цельно.
Без дизайн-системы модель часто создаёт набор симпатичных, но разрозненных блоков. В hero одни отступы, в карточках другие, кнопки отличаются по высоте, подписи живут отдельной жизнью, а мобильная версия держится на честном слове. Дизайн-система убирает этот хаос.
Минимальная система для сайта на Claude Code:
- цветовые токены: фон, текст, акцент, вторичный акцент, границы;
- типографика: размеры заголовков, межстрочные интервалы, правила для подписи;
- сетка: максимальная ширина, колонки, отступы секций;
- компоненты: кнопка, карточка, бейдж, блок кейса, FAQ, форма;
- состояния: hover, focus, disabled, ошибки формы;
- правила адаптива для мобильного и планшета.
Просите модель сначала описать дизайн-систему, а потом применять её ко всем секциям. Это снижает риск, что каждая новая команда будет ломать предыдущий стиль. Особенно полезно просить Claude Code вынести повторяемые элементы в компоненты, а не размазывать HTML и классы по всей странице.
Для коммерческого сайта это влияет не только на красоту. Единая система упрощает будущие правки: добавить новый кейс, заменить оффер, собрать вторую посадочную страницу, подключить форму, встроить виджет или аналитический блок.
6. Уровень 5: продуктовый контекст и продающая логика
На пятом уровне сайт перестаёт быть «витриной» и начинает продавать. Claude Code получает не только визуальные правила, но и бизнес-логику: боль клиента, оффер, доказательства, возражения и следующий шаг.
Именно здесь чаще всего ломаются красивые AI-сайты. Они выглядят аккуратно, но не отвечают на вопросы покупателя: сколько стоит, что будет после заявки, чем вы отличаетесь от готового конструктора, кто уже получил результат, где риск, как быстро запуститься. В B2B это критично: владелец бизнеса не покупает «красивый сайт», он покупает понятный путь к заявке, продаже или автоматизации.
Для сайта, который делает Claude Code, заранее подготовьте продающий слой:
- первый экран: кому, что даёт, за счёт чего;
- блок боли: сколько денег или времени теряется без решения;
- блок механики: что именно работает под капотом;
- доказательство: кейс с цифрами до и после;
- анти-конкурент: почему готовый конструктор или шаблон не закрывает задачу;
- оффер: цена, срок, сопровождение, гарантия;
- CTA: один понятный глагол по всей странице.
В Эпоха ИИ мы не продаём «чат в браузере». Мы собираем встроенного ИИ-сотрудника: подключаем каналы, CRM, базу знаний, сценарии и аналитику. Поэтому сайт под такую услугу должен объяснять не модель, а бизнес-результат: скорость ответа, качество квалификации, снижение ручной нагрузки, контроль сделок в CRM.
7. Что нужно сделать самому, если собирать сайт на Claude Code
Самостоятельная сборка сайта на Claude Code экономит деньги на старте, но требует времени, вкуса, технического контроля и постоянных правок. Если этих ресурсов нет, проект легко застрянет между «почти готово» и «стыдно запускать в рекламу».
Чтобы сделать сайт самому, вам придётся закрыть сразу несколько ролей. Нужен человек, который напишет бриф, подберёт референсы, соберёт структуру, проверит код, вычитает тексты, подключит формы, аналитику и CRM, потом поправит мобильную версию. Если брать отдельного разработчика или дизайнера, бюджет быстро уходит в 150–200 тысяч ₽ ещё до поддержки и экспериментов с конверсией.
Подводные камни самостоятельной сборки:
- модель может сделать красивый макет, но забыть про бизнес-цель;
- правки без дизайн-системы ломают стиль по всей странице;
- форма заявки может работать, но не передавать нормальные поля в CRM;
- тексты часто звучат общо и не снимают возражения;
- адаптив приходится проверять вручную на разных ширинах;
- без аналитики вы не поймёте, где люди выпадают.
Есть и готовые конструкторы. Они подходят для типовых страниц, но быстро упираются в ограничения, если нужен нестандартный интерфейс, связка с CRM, личный кабинет, парсинг данных, дашборд или AI-агент поверх сайта. В таких задачах Claude Code полезен, но его нужно встроить в инженерный процесс, а не использовать как генератор красивых блоков.
8. Сколько стоит сделать самому и через Эпоха ИИ?
Самостоятельный путь дешевле только на бумаге. Если посчитать время владельца, разработку, переделки, интеграции и поддержку, готовое внедрение часто оказывается спокойнее и быстрее.
| Параметр | Сделать самим | Через Эпоха ИИ |
|---|---|---|
| Старт | Бриф, референсы, промпты, код, тесты на вашей стороне | Аудит задачи, структура, разработка и настройка под процесс |
| Бюджет | Разработчик и дизайнер могут стоить 150–200 тысяч ₽ без гарантии конверсии | Кастомная автоматизация и разработка ИИ-агентов — от 50 000 ₽ |
| Срок | Часто 3–6 недель с правками и поиском ошибок | Запуск под ключ 2–4 недели, первый MVP за 7–10 дней |
| Интеграции | Нужно отдельно подключать CRM, формы, аналитику, уведомления | Подключаем amoCRM, Bitrix24, RetailCRM, 1С, YClients и сервисы с API |
| Поддержка | Ошибки, обновления и доработки остаются на вашей команде | Сопровождение от 10 000 ₽/мес |
| Риск | Можно получить красивую страницу без заявок | Перед стартом считаем ROI и возвращаем предоплату, если не справились или результат не оправдал ожидания |
Если задача только в статичном лендинге без интеграций, Claude Code может быть быстрым инструментом для прототипа. Если сайт должен принимать заявки, квалифицировать клиентов, создавать сделки в CRM, показывать аналитику или работать как часть ИИ-сотрудника, лучше проектировать его сразу как бизнес-систему.
9. Реальный кейс: почему интерфейс без процесса не спасает продажи
В одном из наших B2B-кейсов клиент получал около 120 заявок в день по промышленному оборудованию, но первая линия отвечала через 2–4 часа. Мы внедрили ИИ-продажника в Авито Pro API, Telegram, WhatsApp и виджет на сайте, связали его с amoCRM и настроили эскалацию сложных сделок живым менеджерам.
Результат был не в том, что «появился бот». Первый ответ сократился до 3–8 секунд, квалифицированные лиды выросли с 38 до 61 в день, конверсия в счёт поднялась с 18% до 24%, выручка выросла на 18%, а расходы первой линии снизились на 40%. Окупаемость заняла 1–3 месяца.
Этот кейс хорошо показывает главный принцип сайтов на Claude Code: интерфейс должен быть связан с процессом. Если страница красиво обещает быстрый ответ, но заявка падает в почту и лежит там полдня, дизайн не спасает. Если сайт сразу запускает ИИ-менеджера, кладёт сделку в CRM и отдаёт менеджеру саммари диалога, тогда фронтенд работает на деньги.
Внедрение ИИ-продажника под ключ в Эпоха ИИ стоит от 50 000 ₽. Оплата 50/50: половина на старте, половина после приёмки. Сопровождение — от 10 000 ₽/мес. Срок запуска — 2–4 недели, первый рабочий MVP обычно готов за 7–10 дней.
Запустим лендинг под вашу задачу
10. Уровень 6: итерации, ревью и проверка результата
На шестом уровне вы перестаёте ждать идеальный первый ответ. Claude Code становится участником итерационного процесса: сделал версию, получил ревью, поправил, проверил, снова поправил.
Хорошая практика — разделять ревью на несколько проходов. Сначала структура: понятно ли, что это за продукт и зачем он нужен. Потом визуал: сетка, отступы, типографика, акценты. Потом UX: куда нажимать, что происходит после клика, как выглядит форма, что видит человек на мобильном. Затем код: компоненты, дублирование, доступность, производительность.
Запросы к Claude Code тоже должны быть узкими. Не «сделай лучше», а «сократи hero на 30%, усили оффер для владельца бизнеса, убери вторичный CTA, добавь блок доказательства перед тарифом, сохрани текущую дизайн-систему». Чем точнее правка, тем меньше модель переписывает всё через колено.
На этом уровне появляются настоящие критерии готовности:
- первый экран объясняет продукт без прокрутки;
- CTA повторяет один и тот же глагол;
- кейс стоит перед оффером, а не спрятан внизу;
- мобильная версия не теряет смысловые акценты;
- форма заявки передаёт нужные поля;
- скорость загрузки не ломается из-за тяжёлых эффектов;
- тексты звучат как живое объяснение, а не как пресс-релиз.
Не просите модель «улучшить дизайн» без списка критериев. Такой запрос часто приводит к новым градиентам, лишним анимациям и потере фокуса на заявке.
11. Уровень 7: сайт как часть ИИ-системы
Седьмой уровень — это сайт, который не живёт отдельно от бизнеса. Он связан с CRM, каналами коммуникации, аналитикой и ИИ-агентом, который продолжает диалог после клика.
На этом уровне Claude Code помогает собрать фронтенд, но ценность создаёт связка. Посетитель оставляет заявку в виджете, ИИ отвечает примерно за 5 секунд, уточняет потребность, квалифицирует лида, отрабатывает типовые возражения, принимает оплату или передаёт сделку менеджеру. CRM получает карточку с ФИО, услугой, бюджетом, каналом, источником и кратким саммари.
Такой сайт уже нельзя оценивать только по визуалу. Важны другие вопросы:
- сколько заявок дошло до CRM без ручного копирования;
- сколько диалогов ИИ закрыл сам;
- где клиент застрял перед оплатой или записью;
- какие возражения повторяются чаще всего;
- какие блоки страницы дают больше заявок;
- сколько стоит обработка одного лида.
Эпоха ИИ обычно строит такие решения на связке Claude, ChatGPT или DeepSeek — модель подбирается под задачу. Каналы подключаются по потребности: Telegram, MAX, WhatsApp, Avito, VK, Instagram, виджет на сайте. Данные и переписки хранятся с учётом 152-ФЗ: серверы в России, чувствительные поля маскируются, для крупных клиентов возможен on-premise на инфраструктуре заказчика.
Сайт на этом уровне становится входной точкой в систему продаж, а не отдельной страницей «о нас». Именно поэтому дизайн, код и бизнес-процесс нужно проектировать вместе.
12. Какой уровень нужен вашему бизнесу?
Если вы делаете быстрый прототип, достаточно уровня 2–3: бриф, стек, референсы. Если запускаете платный трафик, нужен минимум уровень 5: продающая логика, кейс, оффер, CTA, проверка мобильной версии. Если сайт должен обрабатывать заявки и снижать нагрузку на менеджеров, целиться стоит в уровень 7.
Практичная схема такая:
- Сначала сформулируйте коммерческую задачу: заявка, демо, оплата, запись, квалификация.
- Соберите референсы и объясните, что именно в них подходит.
- Опишите дизайн-систему до генерации секций.
- Дайте Claude Code структуру страницы и запреты.
- Проверьте сайт по бизнес-критериям, а не только по внешнему виду.
- Подключите форму, CRM, аналитику и обработку входящих.
- После запуска смотрите цифры и дорабатывайте слабые места.
Если у вас нет потока заявок, начинать можно с лендинга и аналитики. Если заявок уже 50–100 в месяц, сильнее выстрелит связка сайта с ИИ-продажником: быстрый ответ, квалификация, CRM и контроль менеджеров. Тогда Claude Code закрывает часть разработки, а не весь процесс целиком.
FAQ
Можно ли сделать хороший сайт только одним промптом в Claude Code?
Можно получить черновик, но не готовый коммерческий сайт. Для нормального результата нужны бриф, референсы, дизайн-система, продуктовая логика, проверка адаптива и связка с заявками.
Что важнее для Claude Code: подробный промпт или референсы?
Нужны оба элемента. Промпт задаёт задачу, аудиторию и ограничения, а референсы показывают визуальный уровень. Без референсов модель чаще уходит в усреднённый SaaS-шаблон.
Сколько стоит разработка сайта или ИИ-решения в Эпоха ИИ?
Кастомная автоматизация и разработка ИИ-агентов стоят от 50 000 ₽. Для ИИ-продажника внедрение под ключ тоже стартует от 50 000 ₽, сопровождение — от 10 000 ₽/мес.
Сколько времени занимает запуск?
Обычно запуск под ключ занимает 2–4 недели. Первый рабочий MVP можно получить за 7–10 дней, если есть доступы, понятная задача и быстрые согласования.
Claude Code заменит дизайнера и разработчика?
Он хорошо ускоряет разработку, но не заменяет постановку задачи, вкус, ревью и бизнес-мышление. Сильный результат получается, когда Claude Code работает внутри процесса: с брифом, правилами проекта, проверкой и ответственным человеком на стороне бизнеса.
Когда стоит подключать CRM и ИИ-продажника к сайту?
Если у вас есть хотя бы 50–100 заявок в месяц или менеджеры не успевают отвечать быстро, связка сайта, CRM и ИИ-продажника обычно даёт больше пользы, чем очередная правка дизайна. Быстрый первый ответ часто влияет на конверсию сильнее, чем новый блок на странице.
Источники
- Claude Code 2026: что это, как работает и сколько стоит (проверено: июнь 2026)
- SEO на Claude Code: как ранжироваться без SEO-команды и собрать 50 000 кликов в месяц (проверено: июнь 2026)
- ИИ-менеджер по продажам в 2026 — что умеет, сколько стоит и как внедрить за 2–4 недели (проверено: июнь 2026)
- Кейс: ИИ-продажник заменил первую линию отдела продаж (проверено: июнь 2026)
Прочитали? Давайте внедрим
ИИ-консультант ответит за 5 секунд.
