Привет, Хабр! Хочу поделиться опытом создания сайта с помощью ИИ. Сразу скажу — я не профессиональный разработчик. Программировал несколько лет назад, потом переключился на другие задачи. Когда понадобилось сделать новый сайт, оказалось, что многое изменилось — новые инструменты, подходы. Пришлось учиться заново, но теперь уже с ИИ в качестве помощника.

Так что не судите строго — делюсь тем, что получилось, возможно, многое можно было сделать лучше или правильнее. Буду рад вашим советам!

У меня был сайт интернет-магазина лабораторного оборудования, который постоянно ломался. Любое изменение — и что‑то отваливалось в другом месте. В итоге я решил: хватит мучиться, надо что‑то с этим делать. И попробовал создать новый сайт через нейросеть — через 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 предложил разбить разработку на логические этапы:

1. Инфраструктура и конфигурация — настройка рабочих инструментов

2. Базовые файлы — создание каркаса темы

3. Шаблоны — основные страницы сайта

4. Постепенное наращивание функционала — добавление фич

Разбили реализацию на этапы:

Реализовали этап:

Техника 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‑кодинга» ещё далеко — когда просто говоришь «сделай сайт» и получаешь готовый результат. Нужно направлять, проверять, исправлять. Особенно в сложных проектах с множеством взаимосвязанных компонентов.

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

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