Привет, Хабр! Хочу поделиться опытом создания сайта с помощью ИИ. Сразу скажу — я не профессиональный разработчик. Программировал несколько лет назад, потом переключился на другие задачи. Когда понадобилось сделать новый сайт, оказалось, что многое изменилось — новые инструменты, подходы. Пришлось учиться заново, но теперь уже с ИИ в качестве помощника.
Так что не судите строго — делюсь тем, что получилось, возможно, многое можно было сделать лучше или правильнее. Буду рад вашим советам!
У меня был сайт интернет-магазина лабораторного оборудования, который постоянно ломался. Любое изменение — и что‑то отваливалось в другом месте. В итоге я решил: хватит мучиться, надо что‑то с этим делать. И попробовал создать новый сайт через нейросеть — через Claude.
Представьте себе машину, которую ремонтировали разные мастера в течение многих лет: заводишь двигатель — отваливается колесо, прикручиваешь колесо — открывается багажник. Именно так выглядел мой старый сайт. Сайт делали разные люди в разное время, в коде невозможно было разобраться, любое изменение ломало что‑то в другом месте. SEO практически не работало, трафик постоянно падал.
Нужно было создать новый каталог для 400+ позиций лабораторного оборудования. Но это не классический интернет‑магазин с корзиной и оплатой, а каталог с формой «запросить цену» — в сфере B2B так часто работают.
Этап 1: Настройка проекта в Claude
Первое, что я сделал — создал новый проект в Claude. Это не просто чат, а отдельное рабочее пространство с базой знаний и инструкциями.
В настройках проекта прописал общие инструкции:
База знаний пока была пустая — ее предстояло наполнить на следующих этапах.
Этап 2: Сбор требований
Начал итеративно собирать требования — но не в одиночку, а в диалоге с ИИ.
Требования к сайту
Объяснил Claude базовые вещи: нужен интернет-магазин на WordPress + WooCommerce для лабораторного оборудования. А дальше мы начали обсуждать детали: какие страницы нужны (главная, каталог, карточка товара, производители), как должна работать навигация, какие технологии использовать (Twig для шаблонизации, Webpack для сборки), требования к производительности и адаптивности.
Выглядит так:
Это не было классическим техзаданием. Скорее, это напоминало мозговой штурм с очень умным коллегой, который помогал структурировать мысли и предлагал решения, о которых я не подумал.
Итогом стал документ «Требования к сайту», который я загрузил в базу знаний проекта.
Требования к написанию кода
Этот документ создавался постепенно, по ходу работы. Я анализировал ошибки Claude и добавлял правила:
Не обрабатывать лишние случаи — код раздувался в полтора раза без реальной пользы
Писать маленькими кусочками — большие блоки приводили к галлюцинациям
Добавлять комментарии с путем к файлу — для лучшей ориентации в проекте
Указывать технологии явно — иначе Claude мог переключиться на другой язык прямо посреди кода
Каждое правило появлялось после конкретного косяка. Например, Claude мог начать писать на PHP, а потом внезапно переключиться на JavaScript в том же блоке кода.
Этот документ тоже отправился в базу знаний.
Подход к дизайну
Дизайн решил делать без макетов — по‑хорошему надо было бы в Figma всё отрисовать, потом подключить к Claude. Но я пошел простым путем: объяснял ему «нужен простой стандартный каталог с минималистичным дизайном», и он делал привычную структуру — картинка слева, описание справа, кнопка «Запросить цену». В каталоге особого дизайна и не надо.
Этап 3: Создание архитектуры
После сбора требований переходим к архитектуре. Здесь Claude показал себя очень сильно.
Проектирование файловой структуры темы
Сначала мы с Claude спроектировали структуру файлов WordPress темы:
Основной принцип: сделать максимально простой скелет, а потом постепенно наращивать на него мясо.
Вот как структура выглядела к концу проекта:
Когда собрали все требование, проект выглядел так:
Этап 4: Техническая настройка рабочего процесса
Чтобы Claude видел весь код проекта и мог понимать, как разные части взаимодействуют между собой при изменениях, нужно загружать все файлы в базу знаний. Но в Claude нельзя загрузить папку целиком — приходится ходить по каждой папке отдельно и выбирать файлы. У меня была тема WordPress с кучей папок, а в каждой — разные файлы (стили, скрипты, шаблоны). После каждого изменения нужно было обновлять файлы в базе знаний вручную.
Написал Python‑скрипт, который проходил по всей теме и собирал файлы в одну папку — чтобы загружать их за раз, а не по одному.
Еще сделал для Claude дерево файлов — просто текстовое описание, что где лежит и за что отвечает, чтобы он лучше ориентировался при навигации по проекту.
По‑хорошему нужно использовать редактор Cursor с расширением Claude. Тогда можно писать код прямо в IDE, не переключаясь в чаты, не обновляя файлы вручную — ИИ видит весь проект автоматически.
Понял правильный подход уже после завершения проекта — хорошая мысля приходит опосля.
Этап 5: Реализация
По файловой структуре Claude предложил разбить разработку на логические этапы:
Инфраструктура и конфигурация — настройка рабочих инструментов
Базовые файлы — создание каркаса темы
Шаблоны — основные страницы сайта
Постепенное наращивание функционала — добавление фич
Разбили реализацию на этапы:
Реализовали этап:
Техника Chain of Thought
Для каждой крупной задачи использовал двухэтапный подход:
Сначала мы опишем решение, затем реализуем.
Для каждой крупной задачи использовал такой подход: сначала обсуждение архитектуры — мы с Claude описывали решение, только потом переходили к коду.
В промте просил сначала задавать уточняющие вопросы. Как бы подробно я ни описывал задачу, Claude все равно может понять что‑то по‑своему. Поэтому я всегда сначала обсуждаю с ним задачу, а не сразу прошу писать код.
Например, была такая задача: у меня был CSV с товарами, но без описаний. Нужно было пройти по 400 позициям, выдернуть описания со старого сайта и скачать картинки. Claude спросил:
Я просто написал развернутые ответы одним сообщением. После такого обсуждения результат получается намного точнее.
Потом Claude описывает решение: какие будут этапы работы, какие функции нужны, как все будет взаимодействовать.
Смотрю план, если все ок, то прошу реализовать.Это называется техника «Chain of Thought» — когда ИИ сначала собирает всю релевантную информацию из базы знаний, выстраивает логическую цепочку, а потом по этому каркасу генерирует результат.
Итеративная разработка по этапам
Прошли по всем запланированным этапам: инфраструктура → базовые файлы → шаблоны → функционал. На каждом этапе тестировал результат и корректировал подход.
Стандартизация промптов
Каждый промпт начинал одинаково: «Прочитай.md файлы из базы знаний. Это требования к разработке, соблюдай их.»
Это помогало избежать самодеятельности ИИ и напоминало ему контекст проекта перед каждой задачей.
Этап 6: Контроль качества и отладка
Виды ошибок и их исправление
Синтаксические ошибки — их сразу видно при тестировании. Например, Claude мог использовать оператор сравнения из JavaScript в PHP коде. Такие ошибки исправляются быстро.
Логические ошибки — сложнее. Когда что‑то не работает, я описывал Claude: «Мы сделали то‑то, сейчас работает так‑то, а должно работать вот так.» Он пробегал по своему коду, быстро находил ошибку и исправлял.
Периодическая оценка проекта
Периодически просил Claude проанализировать весь проект:
Прочитай .md файлы из базы знаний. Это требования к разработке, соблюдай их.
Затем проанализируй исходники — это все остальные файлы.
Оцени состояние проекта, уровень готовности.
Давай обсудим дальнейшие действия.Это помогало не потеряться в деталях и держать общую картину проекта.
В финальной оценке Claude поставил проекту 8.5/10, снизив балл за дублирование стилей в некоторых местах.
Контроль качества обязателен — редко что‑то работало с первого раза. ИИ делает ошибки, особенно в сложных проектах с множеством взаимосвязанных файлов.
Этап 7: Работа с данными через Gemini
После парсинга товаров со старого сайта у меня был CSV с 400 позициями оборудования. Структура категорий была неудобная — товары разбросаны хаотично, для SEO это плохо, да и пользователям сложно найти нужное.
Нужно было проанализировать весь каталог и придумать новую логичную структуру категорий. Потом каждый из 400 товаров распределить по правильным категориям. Вручную это заняло бы дни.
Попробовал сначала через Claude, но столкнулся с ограничениями при работе с большими CSV‑файлами. Claude начинал анализировать, писать код, потом останавливался из‑за лимита длины ответа, приходилось нажимать «продолжить» по три раза — это выматывало.
Переключился на Gemini — он отлично работает с CSV‑файлами и справляется с первого раза.
Техника ролевого промптинга: Создал системную инструкцию для чата: работать в роли двух экспертов — одного по лабораторному оборудованию, другого по SEO.
Они «общались» между собой в одном ответе и выработали новую структуру каталога.
За пару минут Gemini выдал готовый переработанный CSV с новыми категориями и правильно распределенными товарами.
Результаты и выводы
Основной сайт был готов за две недели. Для сравнения — самому мне потребовался бы минимум месяц, а скорее всего, полтора.
Сайт получился чистым и функциональным, код структурированный, понятный, без лишней сложности. Вместо одного сложного проекта за месяц я мог бы взять четыре простых лендинга, но с ИИ уложился в две недели.
Правда, потом начались правки — месяца два мучились. Самое смешное, что в итоге остановились на том варианте, который был первым. Поиграли с цветами и вернулись к исходному дизайну.
Что я понял о работе с ИИ в программировании
ИИ не заменяет компетенцию, но усиливает её — самая большая проблема правильно поставить задачу и подобрать промпты. Нужен контроль качества и понимание того, что ты делаешь.
Итеративный подход работает лучше — делать маленькими частями с постоянной проверкой эффективнее, чем пытаться написать всё сразу.
Разные ИИ для разных задач — Claude отлично пишет код и работает с архитектурой, Gemini лучше обрабатывает большие массивы данных.
Техники промптинга решают — просьба сделать несколько вариантов решения и сравнить их почти всегда дает лучший результат. Ролевой промптинг (эксперт по X + эксперт по Y) тоже очень эффективен.
До «vibe‑кодинга» ещё далеко — когда просто говоришь «сделай сайт» и получаешь готовый результат. Нужно направлять, проверять, исправлять. Особенно в сложных проектах с множеством взаимосвязанных компонентов.
ИИ уже умнее меня в архитектурных решениях и работает в разы быстрее. Иногда сидишь и чувствуешь себя «куском мяса», но без этого «куска мяса» ИИ пока не обойтись — он нуждается в постановке задач, контроле и корректировке.
В телеграм-канале я выложил чек-лист по созданию сайта с помощью нейросети и пример промпта для парсера товаров. Подпишись, чтобы не пропустить новые статьи!
