Я сделал сайт с Claude Code вместо CMS — и это очень удобно!

Раньше у меня был сайт на Тильде. Стандартные шаблоны Тильды скучные, поэтому его делал дизайнер на 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 детали, то нейронка снова будет тупить, потому что информации не хватает.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В какой-то момент я подключил 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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