ДОПОЛНИТЕЛЬНОЕ ЧТЕНИЕ
Дополнительные материалы по Hermes
Руководства, документация и разборы по дизайну с Hermes, перечисленные в опубликованном гайде.
Hermes 
OpenDesign Проектируйте с
Hermes в
OpenDesign.
Как проектировать интерфейсы с Hermes в OpenDesign: план, который вы одобряете перед выполнением, ключ провайдера, которым владеете вы, одна задача почтового ящика поддержки от брифа до проверенного файла, а также ограничения, которые нужно знать перед началом.
От брифа до интерфейса01 / Hermes
ВЫ ПРИНОСИТЕ ИДЕЮ↗
«Почтовый ящик поддержки, который агент
может спланировать, а я — одобрить».
Три пути начать это руководство по Hermes
Выберите, с чего начать работу с Hermes
ЭТО РУКОВОДСТВО · ДИЗАЙН ИНТЕРФЕЙСОВ
Создайте интерфейс продукта с Hermes
Это руководство: бриф, референсы, правила дизайна и проверенный результат в HTML.
Читать это руководство НАСТРОЙКАНастройте Hermes с нуля
Вот полный путь от чистой машины до Hermes, который может создавать и проверять UI.
Перейти к настройке СРАВНЕНИЕСравните Hermes с другими агентами
Чем Hermes отличается от Codex, Claude Code, Cursor в задачах дизайна и когда выбрать другой рабочий процесс.
Посмотреть сравнениеНа этой странице Пример
Одна полная задача дизайна в Hermes
Задача дизайна в Hermes: от брифа до интерфейса
Одна задача, показанная от начала до конца: бриф и ограничения, которые вы передаёте, полученный артефакт и проверки, которые вы всё равно выполняете перед завершением. Интерфейс ниже — иллюстративный пример, созданный для этой страницы, а не запись реального запуска Hermes.
1Дизайн-бриф и ограничения
БрифСпроектируйте почтовый ящик поддержки для небольшой команды: список бесед с приоритетом, вид треда с предложенными ответами и быстрые действия. Сначала спланируйте макет, затем выполните. Десктоп и телефон.
- Дизайн-системаOpenDesign paper canvas: Albert Sans, один зелёный акцент
- Брейкпоинты1440px десктоп и 390px мобильный, без горизонтального скролла
- ВзаимодействияФильтры, переключение тредов, назначение, отложить, ответить
- РезультатОдин самодостаточный HTML-файл со стабильными хуками
data-od-id
2Разделение работы: вы, Hermes и OpenDesign
- Вы
Пишете бриф, выбираете дизайн-систему и определяете критерии приёмки.
- Hermes
Планирует макет, пишет HTML, CSS и JavaScript и корректирует по запросу.
- OpenDesign
Предоставляет дизайн-систему и skill, рендерит превью и сохраняет каждую версию как файл в проекте.
- Проверка
Перед передачей проверяются визуальная иерархия, отступы по сетке 8px, оба брейкпоинта и каждое взаимодействие.
3Артефакт Hermes: папка обращений поддержки при 1440px и 390px
4Проверка перед передачей
Layout
Сетка и отступы
Список и тред на сетке 8px; колонка списка сохраняет фиксированную ширину, чтобы темы не переносились.
Иерархия
Визуальная иерархия
Сначала отправитель и тема, затем превью; акцент обозначает только срочные.
Responsive
Мобильная раскладка
Сначала список, тред по нажатию; фильтры превращаются в сегментированный переключатель.
Interaction
Проверка взаимодействия
Отфильтруйте срочные, откройте тред, назначьте его, отправьте предложенный ответ.
Fit
Когда Hermes подходит для задачи, а когда нет
Hermes подходит, когда
- Автономное планирование и выполнение. Агент планирует, строит и делегирует работу с UI подагентам, превращая цель дизайна в рабочую адаптивную разметку и проверяя результат.
- Независимый от провайдера BYOK. По умолчанию xAI Grok, а также OpenAI, Anthropic и многие другие — подбирайте модель рассуждений под задачу без привязки к одному провайдеру.
- Skills + MCP. Многоразовые skill переносят ваши соглашения; MCP-сервер Figma привносит реальный дизайн-контекст в код.
- Открытый и самостоятельно хостится. Лицензия MIT, работает на вашей собственной машине, без телеметрии и без зависимости от облака.
Выберите другой workflow, если
- Вам нужны редактируемые векторные файлы. Артефакт — это HTML, а не редактируемый дизайн-документ. Проверьте отдельный векторный workflow для нужного вам формата файлов.
- У вас нет ни референса, ни ограничений. Без дизайн-системы или примеров результат стремится к типовому виду; сначала напишите бриф.
- У вас нет учётных данных, необходимых этому агенту. Требуется: ключ провайдера через BYOK — xAI (Grok, по умолчанию), OpenAI или Anthropic. OpenDesign не предоставляет и не проксирует учётные данные.
- Ваша команда работает в Grok или OpenCode. У этих агентов свои страницы; рабочее пространство то же, настройка отличается. См. похожие агенты.
Совместимость
Требования Hermes перед началом работы
В этом руководстве рассматривается Hermes при подключении через desktop-приложение OpenDesign. Опубликованные источники проверены 6 сентября 2026 года.
Область инструментаHermes, от Nous Research
Hermes — это открытый (MIT) автономный терминальный агент от Nous Research. Он постоянно работает на вашей собственной машине, читает вашу кодовую базу, редактирует файлы, запускает команды, а также планирует и делегирует многоэтапную работу изолированным подагентам. Эта страница посвящена дизайну интерфейсов с помощью Hermes через OpenDesign, а не самому интерфейсу Hermes. Заметки по настройке OpenDesign перечисляют доступные агенты.
Учётные записи и аутентификацияКлюч провайдера через BYOK — xAI (Grok,
Ключ провайдера через BYOK — xAI (Grok, по умолчанию), OpenAI или Anthropic. Аутентифицируйтесь с собственным ключом провайдера (BYOK) — xAI Grok по умолчанию, либо OpenAI или Anthropic — учётные данные остаются на вашей машине. Эта страница не гарантирует квоту или цену.
Система и версииДесктопное приложение или сборка из исходников
Проверьте страницу загрузки на наличие десктоп-сборок. Требования Node.js и pnpm в исходном quickstart относятся к запуску из исходного кода, а не к установке десктоп-пакета. Минимальная совместимая версия Hermes: здесь не проверена.
Проверка подключенияСигнал об успехе
Следуйте инструкциям по подключению, показанным в установленной у вас версии, затем запустите небольшую задачу. Убедитесь, что Hermes справился с ней и что артефакт открывается. Одной только загрузки недостаточно для установления рабочего подключения.
Начните с десктопного приложения
Настройка Hermes в три шага
Сначала загрузите, завершите настройку Hermes для установленной у вас версии, затем проверьте небольшой результат. Вам не нужно собирать OpenDesign из исходного кода, чтобы следовать этому пути.
- 1
Загрузите десктопное приложение OpenDesign
Выберите пакет для вашего компьютера, установите его и откройте приложение.
Скачать OpenDesignКОНТРОЛЬНАЯ ТОЧКАОткрывается настольное приложение. Уже установлено? Переходите к следующему шагу — повторно скачивать не нужно. - 2
Подготовьте подключение к Hermes
Следуйте инструкциям по Hermes в установленной у вас версии. Аутентифицируйтесь с собственным ключом провайдера (BYOK) — xAI Grok по умолчанию, либо OpenAI или Anthropic — учётные данные остаются на вашей машине.
Подключить xAI Grok к Hermes (OAuth)# 1. Install Hermes (one-line installer from Nous Research) curl -fsSL https://hermes-agent.nousresearch.com/install.sh | bash # 2. Run the setup wizard hermes setup # 3. Add a provider and authenticate (BYOK) # default is xAI Grok; OpenAI / Anthropic also supported hermes auth add # add a provider key or run its OAuth flow hermes model # pick the provider and model (grok-4.3 by default)Из заметок по настройке Hermes в опубликованном руководстве; актуальную команду уточняйте в документации поставщика.
КОНТРОЛЬНАЯ ТОЧКАУбедитесь, что выбраны нужный агент и аккаунт. Если он недоступен, проверьте совместимость, прежде чем браться за более крупную задачу. - 3
Выполните одну небольшую задачу в Hermes
Используйте небольшой бриф, чтобы оценить весь цикл, включая одну доработку.
Начальный брифСоздайте экран настроек с формой профиля и подтверждением сохранения. Используйте мои правила дизайна. Проверьте на ширинах для десктопа и мобильных устройств.
КОНТРОЛЬНАЯ ТОЧКАОткройте результат, проверьте состояние сохранения и запросите одно конкретное изменение. Сгенерированный файл — это начало проверки, а не её конец.
Чтобы запустить OpenDesign из исходного кода, следуйте техническому quickstart.
Рабочий процесс дизайна в Hermes
Рабочий процесс дизайна в Hermes за пять шагов
Та же задача с папкой обращений поддержки: от брифа до проверенного файла. Каждый шаг описывает, что предоставляете вы, что делает Hermes, что добавляет OpenDesign и что вы проверяете.
- 1
Дизайн-бриф
Простой язык, от трёх до шести строк. Укажите аудиторию, задачу экрана и платформы.
- ВыНапишите бриф; приложите референсный скриншот, если он есть.
- HermesЧитает бриф и файл инструкций проекта; уточняет, если что-то неоднозначно.
- OpenDesignПредоставляет проект, поверхность для промптов и skill для нужного типа артефакта.
- ПроверкаУбедитесь, что в брифе указаны критерии приёмки. Добавить их сейчас дешевле, чем после генерации.
- 2
Дизайн-ограничения
Дизайн-система и несколько строгих правил. Именно это отличает результат в стиле бренда от универсального вида.
- ВыВыберите дизайн-систему; укажите breakpoints и обязательные к использованию компоненты.
- HermesЗагружает в контекст токены и правила поведения из DESIGN.md, прежде чем написать хоть строку.
- OpenDesignПоставляет библиотеку дизайн-систем и привязывает выбранную к шаблону skill.
- ПроверкаТокены соответствуют вашему бренду. Один акцентный цвет, нужные шрифты, нужный радиус.
- 3
Сгенерировать интерфейс
Hermes пишет самодостаточный HTML-файл: разметку, стили, взаимодействия и стабильные хуки.
- ВыПодождите или ответьте на уточняющий вопрос. Настраивать ничего не нужно.
- HermesПланирует секции, пишет HTML, CSS и JavaScript, запускает файл и исправляет ошибки.
- OpenDesignСохраняет артефакт в папку проекта и индексирует его для предпросмотра.
- ПроверкаПока ничего. Оценивайте файл после рендеринга, а не по исходному коду.
- 4
Предпросмотр
Файл отображается внутри OpenDesign при указанных вами ширинах. Именно здесь оценивается дизайн.
- ВыПереключаете ширины, кликаете по интерактивным элементам, оставляете комментарии к элементам.
- HermesЧитает ваши комментарии к предпросмотру и готовит следующую правку.
- OpenDesignОтображает предпросмотр, предоставляет цели
data-od-idдля комментариев и правок. - ПроверкаИерархия, контраст, переполнение при 390px, состояния фокуса и то, используется ли акцент умеренно.
- 5
Правки и проверка
Запрашивайте изменения, указывая на элементы в предпросмотре. Каждая правка — это новый файл; ничего не перезаписывается тихо.
- ВыПревращаете комментарии в запросы; решаете, когда задача выполнена.
- HermesВносит изменения на месте и повторно запускает файл.
- OpenDesignХранит версии рядом друг с другом; экспортирует изображение или HTML, когда вы закончили.
- ПроверкаПовторно проверяете только изменённую область, затем всю страницу целиком на каждой контрольной точке.
Ресурсы
Ресурсы по дизайну для Hermes
Skills Просмотреть skills Дизайн-системы Просмотреть системы Шаблоны Просмотреть шаблоны
Skills для дизайна
Типы артефактов, которые Hermes может создавать в OpenDesign — по одному skill на тип.
Дизайн-системы
Токены бренда и компоненты, которые нужно привязать, прежде чем Hermes начнёт что-либо генерировать.
Шаблоны
Отправные точки для презентаций, лендингов и экранов продукта.
Ограничения
Ограничения Hermes, ручные проверки и запасные варианты
- Область примененияHermes не зависит от провайдера и работает по принципу bring-your-own-key: по умолчанию xAI Grok, также поддерживаются OpenAI, Anthropic и многие другие провайдеры, так что вы сами выбираете, какая модель рассуждает над вашим дизайном. Эта страница описывает Hermes как агента, подключённого к OpenDesign, а не все возможности Hermes в целом.
- Лимиты использованияЛимиты использования и стоимость зависят от учётных данных, которые вы используете (ключ провайдера через BYOK — xAI (Grok, по умолчанию), OpenAI или Anthropic). Эта страница не даёт никаких гарантий по бесплатным квотам.
- СетьЛокальные файлы проекта не означают офлайн-инференс. Прежде чем передавать конфиденциальные данные, ознакомьтесь с настройками провайдера вашего агента и политиками обработки данных.
- Результат — HTMLПродукты представляют собой HTML-файлы, а не векторные файлы дизайна.
- Ручная проверкаДоступность, реальный контент, соответствие бренду и корректность взаимодействия проверяете вы сами в предпросмотре. Любую самопроверку агента следует считать лишь первым проходом.
- Запасной вариантЕсли агент недоступен или задача завершилась ошибкой, проверьте инструкции по подключению и авторизации для установленной версии. Перед изменением конфигурации сохраните ошибку и последний работающий артефакт.
Вопросы и ответы
Часто задаваемые вопросы о Hermes и OpenDesign
Может ли Hermes на самом деле выполнять дизайн-работу?
Да — при наличии эстетического skill, дизайн-системы и реальных референсных изображений в контексте Hermes создаёт отзывчивый UI производственного качества, а как автономный агент он может самостоятельно рендерить и проверять результат по референсам. Без этого контекста он склонен по умолчанию давать типовой вид — именно этот разрыв закрывает OpenDesign.
Какие модели и ключи использует Hermes?
Hermes не зависит от провайдера и работает по модели bring-your-own-key. По умолчанию используется xAI Grok (например, grok-4.3), также поддерживаются OpenAI, Anthropic, OpenRouter и многие другие провайдеры — вы добавляете ключ провайдера (или запускаете его OAuth-процесс) с помощью hermes auth add и выбираете модель с помощью hermes model. OpenDesign никогда не проксирует ваши учётные данные.
Чем Hermes особенно хорош для дизайна?
Два момента: он по-настоящему автономен, то есть планирует, строит и проверяет UI, а не ждёт построчных указаний; и он не зависит от провайдера, поэтому вы можете использовать ту модель рассуждений, которой доверяете. Оба фактора важны — но вкус всё равно определяется дизайн-системой, skill и референсами, которые вы предоставляете.
Hermes или Claude Code для фронтенд-дизайна?
Оба сильны. Claude Code известен точными, учитывающими кодовую базу дизайн-решениями; преимущество Hermes — автономное планирование и выполнение плюс выбор провайдера — и вы даже можете направить Hermes на ключ Anthropic. Многие команды используют оба — OpenDesign позволяет переключать агентов без изменения вашего дизайн-процесса.
Как подключить Hermes к Figma?
Добавьте MCP-сервер Figma в конфигурации инструментов Hermes. После этого Hermes сможет получать реальный дизайн-контекст — компоненты, переменные, данные о макете, — чтобы сгенерированный код соответствовал исходнику, а не приближался к нему.
Начните первую дизайн-задачу с Hermes
Начните с небольшой задачи, оцените результат обмена, а затем переходите к реальному брифу. Выберите вариант, соответствующий вашей настройке; страница не определяет её автоматически.