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

Статьи добавлять поудобнее, но тоже не идеально. На том же Вордпрессе можно просто скопировать статью из гуглдока — и все, она вместе улетит вместе со всеми скриншотами. На Тильде надо тыкать каждую картинку руками, это бесит.

И вот я решил, что сайт устарел, его надо полностью переделать, а раз уж этим занимаюсь, можно и с Тильды заодно переехать. Например, на Вордпресс, к которому я как-то больше привык.

Стало интересно, а может ли Claude Code сделать сайт на Вордпрессе. С этим вопросом я к нему и пришел.

Claude сказал, что конечно может, но Вордпресс это скучно, и лучше делать сайт на Next.js + headless CMS. Я на тот момент даже не знал, что это такое. Ну так, слышал что на Next.js сайты делают — и все. Решил, что будет интересно разобраться и попробовать.

Спойлер — у нас (у меня и Claude Code) все получилось, сайт работает, мне нравится, даже трафик из SEO не просел.

Расскажу, как все это делал.

Предупрежу сразу — я не разработчик. Последние 7 лет я управлял контент-агентством, а до этого работал редактором и маркетологом.

Полгода назад я увлекся вайбкодингом, сделал пару кривых, но рабочих сервисов и решил, что надо разобраться в этом получше. Чтобы не просто говорить в черный ящик, что надо сделать, и молиться, чтобы ничего не сломалось, а как-то понимать процесс и управлять им.

Ну и вот я здесь. Что-то понимаю, но пока еще довольно поверхностно. Поэтому говорю заранее — в статье могут быть вещи, которые вы сочтете максимально тупыми и наивными. Однажды я разберусь и тоже сочту. А пока что делаю ��ак умею =)

Все, хватит этих долгих вступлений, давайте уже сайт делать наконец.

Начали с базы знаний

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

Поэтому сначала мы с ним пару часов составляли документацию. Я где-то вычитал про Knowledge base (Memory bank) — пачку md-файлов с важными знаниями о проекте, архитектуре, стеке технологий и так далее. При старте новой сессии подсовываешь CC файл с нужной инфой — и он сразу знает, что делать. В конце сессии просишь обновить документацию.

Почему несколько файлов? Потому что если пихать все в один CLAUDE.md, он будет сжирать кучу токенов со старта, и нейронка начинает тупить. А если выкидывать из CLAUDE.md детали, то нейронка снова будет тупить, потому что информации не хватает.

У меня получились такие файлы:

• Архитектура — стек технологий, структура папок, почему выбраны именно эти инструменты

• Паттерны — как называть переменные, как организовывать код, сколько максимум строк в функции — чтобы CC писал консистентно.

• Деплой — как и куда деплоится сайт, доступы к серверу, Docker-конфиги, CI/CD

• База данных — как будут храниться данные

• Git-воркфлоу — инструкции в духе «не надо пушить на mail без спроса, делай все в dev-ветке»

• UX-гайдлайны — цвета, тапографика и правило «не выдумывай элементы с нуля, возьми готовые из shadcn»

• Роадмап — в каком порядке что делаем, список страниц сайта и так далее

• Проект — общий контекст, что за сайт, для кого, какие задачи решает.

Заполняли вместе — я говорил, что хочу, Claude Code все описывал, я согласовывал/правил, сохраняли. Собственно, на этом этапе мы и решили, что будем делать сайт на Next.js, а не Вордпрессе, как я изначально хотел.

Вот кусочек architecture.md, например:

Вся документация у нас на английском — у него лучше токенизация, чем у русского. поэтому документация жрет меньше места в контекстном окне. Мне это показалось важным. Ну и английский свой лишний раз потренирую.

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

Spec driven development

Еще одна штука, которую я вычитал про вайб-кодинг и разработку в целом. Чем детальнее изначально опишешь, что надо делать, тем больше шанс сделать это нормально.

Поэтому всю нашу работу над сайтом мы бьем на много отдельных задач, и под каждую пишем spec — подробное техзадание. Опять же, я словами объясняю, что хочу, CC пишет spec, я согласовываю.

Вот пример задачек:

1. Сделать MVP сайта на localhost, чтобы просто открывалась страница с каким-то текстом

2. Сделать главную страницу

3. Сделать еще какую-то страницу

4. Сделать ленту блога

5. Сделать шаблон статьи в блоге

6. Перенести статьи с старого сайта на новый

7. Добавить темную тему

8. Организовать деплой main-версии сайта, привязать домен

Ну и так далее. Все эти задачи мы прописали на этапе планирования в нашей Knowledge base.

Дальше я говорю «Давай делать первую задачу, составь по ней spec по шаблону». CC задает мне какие-то вопросы, ищет инфу в интернете и через MCP Context7, пишет spec, я читаю и согласовываю.

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

Если мне что-то непонятно (а мне почти все непонятно), я прошу объяснить для тупых, максимально простыми словами. CC объясняет, я иногда нахожу какие-то дыры в его логике, указываю на них — и он или доказывает свою правоту, или соглашается и переделывает.

Вот кусочек техзадания, которое CC написал сам для себя.

А вот пример файла задачи. Spec — это общее описание фичи, которую мы делаем, а внутри у него л��жит много отдельных маленьких md-файлов с задачками, которые я скармливаю CC по одной за раз. Опять же, чтобы не забивать ему контекст лишней инфой.  

В целом, это у меня вся эта подготовка занимает 70% всего вайбкодинга. Дальше уже от меня мало что зависит — CC что-то там делает, кодит, выполняет команды. Я в этом не понимаю, поэтому и проследить за ним не могу. Поэтому стараюсь максимально въедливо проследить на этапе планирования.

Если задачка маленькая, то spec я не делаю, просто включаю plan-mode, прошу CC накидать план, согласовываю его — и потом уже делаем. Без plan-mode не делаю вообще ничего, он очень сильно страхует от тупняка нейронки.

Собственно разработка

Вся разработка выглядит так:

1. Я запускаю новый чат с Claude Code

2. Кидаю ему файл задачи, в котором есть описание, чего надо сделать, и ссылки на нужные куски Knowledge base

3. CC все изучает и пишет план действий

4. Я окаю

5. Происходит некоторая работа

6. Я открываю сайт на localhost и смотрю на результат

7. Скорее всего, с первого раза ничего нормально не получается, поэтому я делаю скриншот, кидаю его в чат и прошу поправить

И так вот шаг за шагом мы закрываем задачки.

В какой-то момент я подключил MCP-сервер Playwright, чтобы CC мог сам открывать сайт и смотреть, что там получается. Но это работает только для исправления багов и всяких очевидных косяков. Когда просто получается некрасиво, Playwright не помогает, надо сделать скрин и объяснить, что и куда подвинуть.

На главную страницу сайта у меня ушел один вечер.

Я полазил по разным сайтам, понял, что я примерно хочу. Нарисовал простую схему в Фигме, скинул ее CC и попросил сделать что-то похожее.

Важный момент — мне очень не нравится дизайн, который делают нейронки. Lovable, Gemini, Claude — у всех получается какая-то унылая мазня.

Поэтому я просил CC ничего не изобретать, а просто брать готовые shadcn компоненты. Они уже красивые-аккуратные. Этот совет мне дал сам CC на этапе планирования сайта =)

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

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

Ссылку на сайт давать не буду, знаю, что модерация это не очень любит. Покажу скриншот. Кому интересно, тот загуглит остальное.

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

Иногда CC с первого раза делает нормально, иногда надо 2-3 раза его поправить, но это все равно очень быстро! Особенно учитывая, что я не разработчик, не верстальщик, не дизайнер, не знаю этот Next.js и вообще делаю сайт по советам из интернета.

Еще один день я переносил остальные страницы сайта, блог со статьями и так далее.

Насчет статей, кстати. Однажды на одном из проектов мы переезжали с Тильды на Вордпресс, и надо было перенести все статьи. Человек это делал несколько дней, руками копировал туда-сюда.

Claude это сделал за 15 минут. Я просто скормил ему sitemap, он его сам как-то распарсил, вытащил статьи, побил их на mdx-файлы, скачал картинки, раскидал их по папкам.

Получилось не без косяков, например, некоторые картинки задублировались, а в некоторых статьях мы ссылались на картинки с CDN Тильды, а не на свои копии. Но эти косяки простые — их мы порешали еще за полчаса.

И все! Весь перенос блога занял от силы час.

Последний день ушел на полировку. Я попросил CC изучить весь код сайта, найти там возможные косяки, уязвимости, неиспользуемые функции. Ну и потом отрефакторить все.

Потом провел такой же аудит по SEO. Claude сам предложил, что надо сделать, добавил robots.txt, сделал sitemap, метатеги и opengraph на всех страницах. Подключили Метрику, Вебмастер и вот это все.

В конце прогнал сайт через PageSpeed Insights, скопировал все его рекомендации и попросил CC доделать.

Результаты неплохие. У старого сайта производительность была в районе 70.

Подключаем CMS к сайту

А теперь самое интересное.

По изначальному плану у сайта должна быть админка — Payload CMS.

Еще в самом начале работы Claude Code не осилил ее установить, она выдавала ошибки, и я решил отложить задачку на конец. Вдруг вообще сайт нормальный не получится, и вообще админка не понадобится.

И вот спустя 3 дня разработки я понимаю, что эта админка мне и не нужна. Зачем?

Любые задачи по сайту может делать Claude Code.

— Вот мне отзыв оставили, добавь на сайт — добавил

— Статью написал, добавь в блог — добавил

— Вот тут текст поменяй на такой — поменял

— Цвет кнопки поменяй — поменял

— Дескрипшен статьи измени — изменил

Это офигеть как удобно! Не надо никуда лезть, авторизоваться, что-то менять, разбираться, сохранять. Все эти «админские задачи» CC нормально делает с первого раза и без багов. Благо у нас в Knowledge base описано, как хранятся статьи, картинки к ним, отзывы и так далее.

Поэтому я посоветовался с Claude, и мы решили, что CMS действительно не нужна. Удалили ее и забыли.

Кстати, Claude Code у меня работает на латвийском VPS, я к нему подключаюсь по SSH и работаю без всяких VPN. Очень удобно. А если надо что-то в дороге срочно сделать, то можно и с телефона через Termius подключиться.

Что в итоге

На всю работу ушло 3 дня:

1. Планирование, документация и главная страница

2. Остальные страницы и блог

3. Шлифовка, SEO, баги, перенос на боевой домен

Когда я делал свой самый первый сайт на Вордпрессе 10 лет назад, на него тоже ушло около 3 дней. Только получилось унылое кривое говно. А тут я доволен результатом, мне нравится, как сайт выглядит и работает.

SEO-трафик вообще не просел, то есть переехали мы без косяков.

Я в процессе узнал кучу новых вещей — например, что такое Next.js и shadcn =) 

Любые изменения сайта я делаю через Claude Code — просто пишу ему, что надо сделать, он делает. Проверяю на localhost, если все ок, прошу запушить в main. После этого обновленный сайт автоматически деплоится в Docker.

Еще бонус — весь сайт полностью принадлежит мне, я никак не завишу от Тильды. Даже если что-то случится с VPS, на котором лежит сайт — все хранится на Гитхабе, перенесу на другой VPS и все.

Надеюсь, вам было не скучно все это читать. Спасибо!