Сделал с нуля свой сайт на коде через claude code

У меня уже были посты с подобными заголовками, но там я тестировал разные ИИ на создание сайта по одному запросу.

Все они, честно говоря, были не очень.

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

Я знаю только три решения этой проблемы:

— Взять за референс чужой сайт и попросить ИИ скопировать визуал. Окей для простых сайтов, но сложный дизайн сделать не получится

— Сделать с нуля дизайн сайта через плагин frontend-design в claude code, делает в едином стиле хороший дизайн, если использовать claude opus 4.6. В комментах покажу пример.

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

Я пошел первым путем и вот, какие были этапы:

1 этап. Код и тексты

Сделал основу сайта по референсу. Поменял немного визуал и добавил элементы, которые хотел видеть на своем сайте.

Плюсом на этом этапе сам прописал все тексты на сайт и собрал все мои работы, чтобы добавить их в портфолио.

Это заняло больше всего времени (2 дня). Но и стало отдельным поводом для гордости, потому что можно посмотреть мои работы прямо на сайте, никуда не переходя по ссылкам.

2 этап. Доработки и адаптив

Это мелкие доработки на сайте и настройка адаптива под разные устройства. Тестировал это через DevTools — в нем можно смотреть сайт в мобильных и планшетных версиях.

Опять же, все делается нейросетью, поэтому я просто общался в чате с ИИ, просил сделать разные варианты, а затем все смотрел на практике.

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

Потратил на это все еще день.

3 этап. Тестирование и проверка кода

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

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

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

4 этап. Все запуталось и сломалось

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

Писал об этом подробнее в этом посте.

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

И вот такой сайт у меня получился: olegi-text.ru

Максимально простой, без какого-то дизайна, но он мне и не нужен был. Главное, что сайт хорошо выполняет нужные мне функции. И дальше на него я буду лить трафик.

Заходите посмотреть сайт, потыкайте кнопки, заполните форму, если вдруг найдете ошибки — буду рад, если поделитесь! Особенно интересует страница прототипов.