Личный опыт · LLM и веб-разработка

Как я создаю сайт-портфолио с LLM

От ограничений конструкторов до работы с Cursor и Hermes Agent

Мне нужен был актуальный сайт с работами и резюме. Здесь я рассказываю, как создавал его с помощью LLM, пробовал разные инструменты и менял собственный процесс.

• ФорматЛичный проект
• Моя рольЗадаю направление, структуру и принимаю результат
• ИнструментыCursor, Hermes Agent, HTML/CSS, Figma, Lunacy
• СтатусСайт работает; контент и продвижение впереди

Актуальный сайт-портфолио

Актуального сайта с моими работами и резюме у меня не было. Я умел верстать вручную на HTML и CSS, а ещё много работал с конструкторами вроде Weebly и Tilda. Поэтому первые версии начал собирать в конструкторе.

Пределы конструктора

Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно.

Главная стала первым экспериментом

Раз конструктор не давал нужной гибкости, я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.

Рабочий процесс без готовых макетов

С этого момента у меня появился новый напарник по разработке: сама модель. Дальше предстояло понять, как с ней работать, что доверить ей, а что решать самому.

Структура от меня, код от модели

Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.

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

Сразу проверял в браузере

Я открывал сайт на ноутбуке, десктопе, планшете и телефоне, смотрел, как он ведёт себя, и решал, что доработать. В конструкторе тоже можно смотреть сайт на разных устройствах, но путь от идеи до правки занимал больше шагов.

В Figma и Lunacy я готовил отдельные ассеты: скриншоты приложений и сайтов для кейсов, графику, аватар и векторные иконки.

Дизайн-система и ветки для экспериментов

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

Ветки Git давали похожую свободу на уровне всего проекта: можно было пробовать разные направления развития сайта, не смешивая их в одну линию. Я описывал агенту, что хочу получить, проверял результат и либо шёл дальше, либо просил переделать.

Переход к агентной разработке

Дизайн-система и ветки решали задачи внутри проекта. Но настоящий сдвиг в процессе начался, когда изменился сам инструмент разработки.

Cursor: от помощника к агенту

Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE.

Hermes Agent: гибкость и стоимость

Позже я начал осваивать Hermes Agent. Его можно было гибче настраивать и подключать к любому провайдеру LLM. Подписки на сам инструмент не было, поэтому разработка обходилась дешевле. Когда лимит в Cursor заканчивался, приходилось ждать следующего месяца. Это заметно мешало работе.

CI/CD: от локального preview к production

Агент пишет код, но сайт ещё нужно где-то хранить и публиковать. Я связал локальную разработку с репозиторием и деплоем через три инструмента: Hermes Agent, Gitea и Coolify.

Чтобы публиковать сайт, я купил VPS и установил на него Coolify: платформу для развёртывания веб-приложений. Мой сайт устроен как обычное веб-приложение, поэтому запускается там по тому же принципу. Для версионирования я завёл отдельный репозиторий в Gitea, где хранится вся история изменений проекта.

Локальный preview рядом с Hermes Agent

Сам Hermes Agent и рабочая копия сайта находятся на отдельном VPS, где запущен локальный сервер с предпросмотром. Разработку я веду с ноутбука и с телефона: ноутбук подключён к той же виртуальной сети, что и VPS агента, поэтому я открываю локальную версию сайта в браузере и сразу вижу, что получилось.

Из main в production

Когда правки меня устраивают, агент делает коммит и пушит их в основную ветку main. Coolify следит за этой веткой, и пуш в неё запускает деплой: новая версия сайта становится доступна пользователям.

Рабочая версия готова

В итоге вся цепочка, от идеи до продакшена, работает через агента: постановка задачи, код, проверка на локальном сервере, коммит и автоматический деплой. Сайт полностью работает. Дальше планирую заняться контентом и продвижением.