HERON

Роль для ИИ-агентов

Роль: Дизайнер

Сделать тему, которая рисует все типы страниц из структуры и не ломается на неполном контенте. Общие правила — на странице Инструкция для ИИ-агентов.

Устройство темы по-человечески — гайд Тема и дизайн.

Простыми словами

Дизайнер шьёт сайту одежду — тему. Он работает только в папке theme/ и никогда не пишет туда тексты страниц. Хорошая тема выглядит правильно и с полной страницей, и с полупустой, потому что отсутствующий блок просто не появляется.

Пример. В структуре сказано, что у страниц типа «услуга» есть секции intro, prices и faq. Дизайнер делает шаблон для «услуги», проверяет, что модуль таблицы рисует prices, а раскрывающийся список — faq, и смотрит страницу услуги без цен: она всё равно выглядит законченной.

Эта страница нужна, когда вы отдаёте дизайн агенту вроде Claude Design или человеку. Все формы блоков, которые должна рисовать тема, — в справочнике форм.

Вход и выход

На входе: типы страниц и их секции от архитектора (или существующий theme.yaml), макет или описание вида.

На выходе: папка theme/: theme.yaml, base.html, шаблоны типов, модули форм, partials/, assets/, файлы строк интерфейса i18n/ на каждый язык.

1. Начать со стартовой темы

heron new кладёт рабочую тему: типы home, page, 404 и модули breadcrumbs, cards, facts, faq, list, prose, steps. Она собирается с первой минуты — меняйте её по шагам и собирайте после каждого.

2. theme.yaml

Образец — templates/theme.yaml, все ключи — контракт, theme.yaml.

types:
  home:     {uses: [intro, "why:list", "how:steps", "faq:faq"], jsonld: [WebSite]}
  category: {uses: [intro]}
  service:  {uses: [intro, "includes:list", "how:steps", "faq:faq"], jsonld: [Service]}
  article:  {uses: [intro, "*"], jsonld: [Article]}
  page:     {uses: [intro, "*"]}
  "404":    {uses: [intro]}
links:
  - {field: related, type: service, back: related_from}
images:
  ratios: ["1:1", "16:9"]
  • uses — все секции типа, включая необязательные; после двоеточия — ожидаемая форма (таблица форм). "*" — любые секции. По uses команда heron page кладёт заготовки, а отчёт называет пустые секции;
  • jsonld — типы разметки страниц этого типа;
  • requires — пути в site.yaml, без которых тема не работает (E011, если пусто);
  • links — поля связей; back строит обратный список.

3. Шаблоны типов

На каждый тип — шаблон templates/TYPE.html (иначе E008):

{% extends "base.html" %}
{% block content %}
  {{ mod.breadcrumbs() }}
  {# заголовок: page.h1 внутри тега h1 #}
  {{ mod.list('includes') }}
  {{ mod.steps('how') }}
  {{ mod.faq('faq') }}
  {% for p in page.related.get('related', []) %}
    {# ссылка на p.url с текстом p.h1 #}
  {% endfor %}
{% endblock %}
  • mod.MODULE('ANCHOR') рисует секцию или ничего, если её нет: условия вокруг не нужны;
  • page_of('KEY') — страница по ключу; data.FILE — справочники; site.* — site.yaml на языке страницы; t.* — строки интерфейса;
  • пути в extends/include/import — от корня темы: {% extends "templates/page.html" %}, а не "page.html";
  • свои макросы импортируются в каждом шаблоне: импорт в base.html дочерним не виден. mod импортировать не нужно;
  • свои поля страницы — page.meta.get('topic'), без объявления; в fields их не писать (E023);
  • site.* уже на языке страницы во всех блоках: site.contact.address на русской странице — address_ru, выбирать язык руками не нужно;
  • полный список переменных — сборка, §7, модель страницы — сборка, §6.

4. Модули

На каждую форму, которую рисует тема, — модуль modules/NAME.html. Внутри: section (секция с title, kind, lead, note, callout), items (разобранные данные формы), html (готовое содержимое). Что лежит в items у каждой формы — таблица форм (§4.4).

5. Картинки и ресурсы

  • только picture(src, ratio, alt=…) — нарезки, WebP/AVIF, размеры; собирать тег picture руками значит потерять варианты;
  • пропорции, которые используете, — в images.ratios;
  • CSS, JS, шрифты — в theme/assets/; favicon и .well-known — в static/ сайта.

6. Строки интерфейса

Всё, что принадлежит теме, а не странице («Читать далее», «Вопросы и ответы»), — в файле theme/i18n/ru.yaml и таких же для других языков, в шаблоне t.KEY. На каждый язык сайта — свой файл; init кладёт заготовку. Ключи on, off, yes, no — в кавычках.

7. Чего тема не делает

  • не содержит текстов контента и реквизитов сайта: тексты — в секциях, телефон и адрес — site.contact.*;
  • не подгружает контент скриптом: текст и числа обязаны быть в HTML;
  • не показывает метку сборки в проде: {% if not env.is_prod %}{{ env.stamp }}{% endif %};
  • счётчики выводит только при env.analytics.

Чек-лист

  • у каждого типа из структуры — запись в types и шаблон
  • у каждой формы из uses — модуль
  • сборка проходит и на стартовом контенте, и на полном
  • в шаблонах нет текстов и реквизитов; строки интерфейса — через t
  • в отчёте нет недостающих строк i18n и ошибок шаблонов
  • картинки — через picture(); пропорции объявлены

Источник

Эта страница повторяет файл docs/agents/designer.md из ветки prod. Репозиторий обновляется первым: designer.md на GitHub.