Как создать сайт
с помощью ИИ

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

Главный риск не в том, что ИИ напишет плохой код. Риск в том, что сайт получится «нормальным»: аккуратным, похожим на тысячи других и невидимым для поиска.

Простое правило выбора. Нужно показать идею завтра — AI-билдер. Нужен лендинг, который будет править маркетолог, — конструктор. Сайт — это ваш основной канал продаж, и вы планируете его развивать — код с ИИ-агентом. Хорошая стратегия — начать с прототипа в v0 или Lovable, а боевую версию собрать в Claude Code.

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

Как выбрать между Claude Code, Cursor и генераторами в браузере и как ставить им задачи, подробно разобрали в статье как создать приложение с помощью ИИ.

Порядок шагов такой же, как в классической разработке. Меняется то, что вёрстка из самого долгого этапа становится одним из самых быстрых.

1. 1Смысл до дизайна. Для кого сайт, какое одно действие должен сделать посетитель, чем вы отличаетесь от трёх ближайших конкурентов. Полстраницы текста. ИИ отлично помогает это сформулировать, но не может это придумать за вас.
2. 2Структура и тексты. Список страниц и блоков на каждой, а потом тексты — до вёрстки. Сайт, свёрстанный под «рыбу», потом приходится переделывать. Как собрать структуру и проверить её до дизайна, мы разобрали в статье про прототип сайта.
3. 3Референсы и дизайн-система. 3–5 сайтов, которые нравятся, и короткий список правил: шрифты, цвета, отступы, радиусы скруглений. Без них ИИ выдаёт усреднённый «сайт стартапа» с фиолетовым градиентом.
4. 4Файл правил для ИИ. CLAUDE.md или rules в Cursor: стек, структура папок, дизайн-токены, что переиспользовать и чего не трогать. Модель читает его в каждой сессии, и проект не расползается в разные стороны.
5. 5Вёрстка по одному блоку. Первый экран, затем услуги, затем отзывы — каждый блок отдельной задачей и отдельным коммитом. Просьба «сделай весь сайт» даёт результат, который невозможно проверить и неудобно править.
6. 6Мобильная версия на настоящем телефоне. Больше половины посетителей придут со смартфона. Открывайте превью на своём телефоне после каждого блока: ИИ видит код, а не экран, и сам горизонтальный скролл на 375 px не заметит.
7. 7SEO, скорость и аналитика. Метатеги и Open Graph для каждой страницы, sitemap, robots.txt, сжатые изображения, Яндекс Метрика. Это обязательная часть сайта, а не опция после запуска.
8. 8Домен, запуск и вебмастера. Подключаете домен, добавляете сайт в Яндекс Вебмастер и Google Search Console, отправляете sitemap. Сайт без этого может неделями не попадать в поиск.

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

1. →Свои фото и иллюстрации. Сгенерированные картинки и стоковые фото люди уже распознают с первого взгляда. Даже несколько настоящих снимков команды или продукта делают сайт живым.
2. →Один акцент, а не десять. ИИ любит добавлять градиенты, свечения и анимации в каждый блок. Попросите убрать всё лишнее и оставить один выразительный приём на страницу.
3. →Типографика решает больше, чем цвет. Выберите шрифт с характером и задайте явную шкалу размеров. Модели по умолчанию ставят одни и те же системные шрифты, отсюда ощущение «сайта как у всех».
4. →Анимации с назначением. Движение должно подсказывать, куда смотреть, а не украшать. И обязательно — уважать системную настройку «уменьшить движение».

ИИ не думает о поисковиках, пока его об этом не попросить. Эти пять пунктов мы проверяем на каждом проекте в первую очередь.

1. 1Навигация ссылками, а не кнопками. Самая частая ошибка: карточка открывает страницу через onClick. Человек переходит, робот — нет. Мы сами на этом споткнулись на собственном сайте.
2. 2Серверный рендер. Поисковик должен получать готовый текст в HTML. Сайт, который рисует всё JavaScript в браузере, индексируется медленнее и хуже — особенно в Яндексе.
3. 3Уникальные title и description. У каждой страницы — свои, с ключевым запросом. ИИ часто копирует одни и те же метатеги на все страницы.
4. 4Разметка Schema.org. Organization, Article, FAQPage, BreadcrumbList — дают расширенные сниппеты в выдаче. ИИ хорошо генерирует JSON-LD, если его об этом попросить.
5. 5Быстрая индексация. Sitemap с честными датами изменений и протокол IndexNow, чтобы Яндекс узнавал о новых страницах сразу, а не через недели.

Полный список того, что проверить перед запуском, — в нашем SEO-чеклисте на 110+ пунктов.

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

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