От макета до рабочей темы

Тема с Claude Design

Q: Можно взять готовую тему?

Да. Начните с темы с демо-контентом , замените тексты и фото, а у Claude Design просите только изменения вида.

Claude Design превращает макет, скриншот или пару слов о желаемом виде в дизайн, который можно посмотреть и поправить. С HERON он делает тему: шаблоны и стили, которые рисуют каждую страницу сайта из её текстового файла.

Тексты остаются в страницах, вид — в теме. Поэтому тема из Claude Design работает с любым содержимым, даже со страницами, которых ещё нет, а агенты, которые пишут страницы, её не трогают.

Что дать Claude Design

Макет или описание

Фрейм из Figma, скриншот понравившегося сайта или абзац текста: цвета, настроение, шрифты, что важно на первом экране.

Совет: Покажите главную и одну внутреннюю страницу. Двух макетов хватает, чтобы задать стиль.
Словами тоже можно: «Спокойно, светло, много воздуха, тёмно-синий и песочный, скруглённые углы» — достаточно для начала.
Бренд: Файл логотипа, фирменные цвета и шрифты, если есть; положите файлы в theme/assets/.
Оба режима: Скажите, если нужна тёмная версия: темы HERON умеют переключать светлую и тёмную.

Правила дизайнера

Как устроена тема HERON: где лежат шаблоны, как блоки получают содержимое, чего не должно быть в шаблоне.

Роль: Дизайнер
Гайд: Тема и дизайн
Главное правило: Никаких текстов сайта внутри шаблонов: тексты живут в страницах, поэтому та же тема подходит любому содержимому.
Куда пишет: Только в theme/. Страницы, site.yaml и скрипты не трогает.
Навык: С npx skills add FMSTM/HERON навык heron-designer приносит эти правила сам.

Типы страниц вашего сайта

Какие страницы есть и какие блоки на каждой. Они перечислены в theme/theme.yaml вашего сайта. Дизайнер рисует шаблон на каждый тип и модуль на каждый вид блока.

Блоки: Все формы секций с примерами
Пример: У сайта клиники есть home, service, doctor и page; каждому нужен свой шаблон.
Проверка на настоящем: Попросите собрать тему на ваших настоящих страницах, а не на демо-тексте: длинные заголовки и пустые поля сразу покажут проблемы.
Проверка: heron build . --env prod --strict должна проходить на вашем сайте с новой темой.

Скопируйте задание

Приложите макет и вставьте:

Сделай тему HERON для этого сайта по приложенному макету. Используй навык heron-designer.
Типы страниц: home, page, contacts. Блоки: шаги, вопросы, карточки, таблица, цены.
Работай только в theme/. Никаких текстов страниц в шаблонах; тексты интерфейса — в i18n; каждый блок должен выглядеть правильно, когда части содержимого нет; светлая и тёмная версии; удобно на телефоне.

От дизайна до работающего сайта

1
Смотрите и правьте в Claude Design

Просите изменения, пока главная и внутренняя страница не будут выглядеть как надо.
2
Положите тему в сайт

Роль дизайнера записывает файлы в theme/ папки сайта, и только туда.
3
Запустите строгую сборку

heron build . --env prod --strict назовёт каждый тип страницы без шаблона и каждый блок без модуля.
4
Проверьте на настоящем контенте

Откройте localhost:8000 командой heron serve . и пройдите все типы страниц. Тема, которая работает на демо-тексте и ломается на вашем, ловится здесь.

Из чего состоит тема

Файл	Что делает
`theme/theme.yaml`	Типы страниц и блоки каждого типа
`theme/templates/`	Один шаблон на тип страницы
`theme/modules/`	Один модуль на форму блока: шаги, карточки, вопросы, таблица
`theme/i18n/`	Тексты интерфейса на каждом языке: кнопки, подписи
`theme/assets/`	Стили, шрифты, скрипты

Вопросы

Можно взять готовую тему?

Да. Начните с темы с демо-контентом, замените тексты и фото, а у Claude Design просите только изменения вида.

Тема не замедлит сайт?

Вес страницы определяет тема. Стартовая тема получает 100 в Lighthouse на телефоне при главной в 3 КБ. Попросите Claude Design держать картинки в media/, чтобы HERON сделал WebP и AVIF всех размеров, и обходиться без тяжёлых скриптов.

Может Claude Design написать и тексты?

Тексты живут в страницах, а не в теме. Отдайте их роли контента: Контент с Claude Code.