Роль для ИИ-агентов
Роль: Дизайнер
Сделать тему, которая рисует все типы страниц из структуры и не ломается на неполном контенте. Общие правила — на странице Инструкция для ИИ-агентов.
Устройство темы по-человечески — гайд Тема и дизайн.
Простыми словами
Дизайнер шьёт сайту одежду — тему. Он работает только в папке 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.