Hermes Agent

← На главную

Опубликовано

Как я сделал дизайн сайта, не открывая Figma

Автор: Гусев Николай [портфолио]

Темы: ai-agents, devops

Дизайн - это боль. Ты знаешь как должно выглядеть. А когда садишься верстать - получается как в 2005: серый фон, синие ссылки, шрифт Times New Roman.

У меня была задача: сделать лендинг для autolycus-agent.ru. Сам я DevOps, не дизайнер. Figma не открывал никогда.

Раньше я бы открыл Bootstrap, нашёл тему, час мучился с цветами, ещё час - с отступами. К вечеру получил "как у всех". В этот раз я просто сказал агенту: "сделай сайт, тёмная тема, золотые акценты". И пошёл пить чай.

Как это работает

Есть сайт 21st.dev - библиотека готовых React-компонентов. Linear, Stripe, Vercel - всё оттуда. Ты подключаешь её к агенту как MCP-сервер, и он получает доступ к сотням компонентов: шапки, карточки, таймлайны, цены, формы.

Ты говоришь агенту: "мне нужна hero-секция с заголовком и кнопкой". Он ищет подходящий, забирает код, подставляет твой текст, натягивает твои цвета. Ты не пишешь CSS - ты собираешь из готовых блоков.

Подключение

Сначала я полез править конфиг. Открыл config.yaml, нашёл раздел mcp_servers, начал вспоминать формат. Потом подумал: "а зачем?".

Закрыл файл, написал агенту: "Подключи MCP-сервер 21st.dev, вот ссылка https://21st.dev, разберись сам".

Он разобрался. Сам добавил сервер в конфиг, сам проверил что работает, сам начал собирать страницу. Я даже в config.yaml не заходил.

Ссылка на 21st.dev: https://21st.dev

Сборка

Сайт собирался так:

  1. Сказал: "сделай landing page для Autolycus, тёмная тема, золотой акцент"

  2. Агент нашёл hero-компонент через 21st.dev - подходящий, с тёмным фоном

  3. Добавил блок с тремя карточками: AI-агент / Белый label / Open Source

  4. Секцию "Как работает" - таймлайн на 3 шага

  5. Блок с ценами - без ценника, просто "напишите нам"

  6. Подвал с контактами

Цвета я задал один раз в задаче, агент применил ко всем секциям:

  • Фон: #020617

  • Акцент: #D4A843 (золото)

  • Текст подписей: #94a3b8

Пару раз просил переделать: "сделай карточки более воздушными, padding увеличь". Агент через refiner поправил.

Что получилось

Сайт выглядит нормально. Не "как умею", а как будто его делал человек с чувством вкуса. Тёмная тема, ровные отступы, читаемые шрифты.

Ссылка: https://autolycus-agent.ru

Что для этого нужно

  1. Hermes Agent

  2. MCP-сервер 21st.dev - агент сам подключит, если дать ссылку

  3. Понимание чего ты хочешь

Третье - самое важное. Не надо уметь верстать. Надо уметь объяснить. Хорошая задача: "Сделай лендинг. Тёмная тема, золотые акценты. Hero с заголовком, три фичи, таймлайн, цены, контакты."

Плохая задача: "Сделай красиво".

Вывод

Я не открывал Figma. Не писал CSS. Не правил конфиги. Просто дал агенту ссылку на 21st.dev и описал что хочу. Через час у меня был лендинг, который работает.

Дизайн - это не про навык. Это про умение объяснить.