| name | mishka-cover |
| description | Создаёт концептуальную обложку (cover) для поста блога «Мишка на сервере» в виде SVG-артефакта, оформленного по дизайн-коду блога (один тёплый янтарный акцент на сине-графитовой базе, humanist sans для прозы + JetBrains Mono для технических меток, без маскота в эссе, контрасты ≥ AA). Скилл читает статью (URL или markdown-файл), вытаскивает центральную метафору и превращает её в чистую векторную обложку без гало по краям, готовую к заливке в `covers/`. Используй этот скилл всегда, когда пользователь хочет «нарисовать обложку», «сделать cover для поста», «картинку для статьи», «обложку в фирменном стиле», «визуал под пост», «изучи статью и нарисуй картинку», «оформи по брендингу», или приносит ссылку/файл статьи и просит подходящую иллюстрацию.
|
mishka-cover — Концептуальная обложка поста в стиле «Мишка на сервере»
Этот скилл — координатор пайплайна «статья → концепт → брендовый SVG». Твоя задача: взять статью, понять её центральную идею, придумать визуальную метафору и нарисовать чистую векторную обложку по дизайн-коду блога. Композицию, цвета и подписи ты придумываешь сам — это и есть суть работы. На выходе — один .svg-файл для covers/.
Этот скилл — про эссе и «как устроено»-разборы: концептуальные обложки без маскота. Для howto с весёлым медведем — это другой инструмент (см. §5 BRANDING.md), здесь маскота нет.
Перед началом, если в рабочем каталоге есть BRANDING.md — прочитай его: бренд-токены могли поменяться. Значения ниже — снимок дизайн-кода v0.1; если файл свежее, он главнее.
Шаг 1. Прочитай и пойми статью
Если дан URL — выфетчи и прочитай. Если markdown-файл — прочитай целиком. Определи:
- Заголовок — как звучит в посте (для верхней строки обложки).
- Подзаголовок / тезис — одна фраза, которую пост доказывает (meta-description часто уже её содержит). Это вторая строка обложки.
- Центральная метафора — то единственное, что обложка должна показать. Не пересказ статьи, а её ядро. Примеры: «надёжность = диалог двух сторон», «burn-rate = скорость утечки денег», «SLO = чертёж». Если метафор несколько — выбери одну, самую несущую.
- Канал/подпись — по умолчанию
Мишка на сервере · @jtprogru_channel.
Критерий хорошей метафоры: её можно нарисовать схемой из 3–5 объектов так, что смысл читается без чтения статьи. Если для понимания нужен абзац текста — метафора не та.
Шаг 2. Спроектируй концепт обложки
Опиши пользователю словами, что будет на обложке, до рисования:
🎨 Концепт обложки
Метафора: ...
Композиция: что слева / в центре / справа, что их связывает
Где горит акцент (янтарь): ровно на смысловом центре статьи
Текст на картинке: заголовок + тезис + подпись
Принципы композиции (из §0 BRANDING.md — «технический скелет + тёплая подача»):
- Холодная база, один тёплый акцент. Структурные/нейтральные элементы — графит и серый. Янтарь (
#fb923c) горит только на смысловом центре — там, где у статьи кульминация. Не больше одного смыслового очага акцента.
- Много воздуха. Не заполняй холст под завязку. Сетка-фон тихая, элементы дышат.
- Симметрия только когда она смысловая (например, две равноправные стороны диалога).
- Без маскота — это эссе/концепт-обложка (§5).
Жди реакции пользователя на концепт, прежде чем рисовать. Если он сразу просит «рисуй» — рисуй.
Шаг 3. Нарисуй SVG по бренд-токенам
Рисуй на canvas 1050×480 (формат обложек блога). Все значения ниже — дефолты; если пользователь просит другой акцент/формат — переопредели, но по умолчанию держи их.
Цвет (§2 BRANDING.md) — дефолты
| Роль | HEX | Где |
|---|
| Фон (верх градиента) | #1e2327 | сине-графитовая база, theme-color блога |
| Фон (низ градиента) | #181c20 | мягкий вертикальный градиент |
| Поверхности / карточки | #252b30 | боксы, подложки (--bg-elev dark) |
| Бренд-акцент (декор) | #fb923c | только смысловой центр: заливки, бордеры, очаг |
| Акцент-текст (тёмная тема) | #fdba74 | акцентные подписи, ~9:1 контраст, AAA |
| Тёмный край акцента | #c2410c | основание пламени, «сгоревшая» зона |
| Основной текст | #e6e1d9 | заголовок, метки боксов (--fg dark) |
| Приглушённый текст | #9aa0a4 | тезис, мета, нейтральные стороны (--fg-muted dark) |
| Границы / сетка | #333b41 | разделители, тихая сетка-фон (--border dark) |
Один акцент. Никаких cyan/teal/фиолетовых «вторых брендов». Если нужно различать сущности — различай нейтральными оттенками серого и формой, а не вторым ярким цветом. Семантические цвета callouts (§2) на обложках не используются.
Типографика (§3 BRANDING.md) — дефолты
- Заголовок и проза — humanist sans:
font-family="'PT Sans', sans-serif". Заголовок ~25px font-weight="700", тезис ~13px #9aa0a4.
- Технические метки (
SRE, SLO, error budget, имена сущностей) — 'JetBrains Mono', monospace. Mono — только на коротких тех-акцентах, не на прозе (§3: mono в прозе «кричит лог-файл»).
- Подпись канала — mono,
#fdba74, ~11px.
- Регистр естественный, без КАПСА (кроме коротких тех-аббревиатур вроде
SRE).
Геометрия и чистота
- Внешний фон — прямые края, без
rx. <rect x="0" y="0" width="680" height="430"> заливает весь холст. Никакого скругления внешнего фона — скруглённый угол на тёмном фоне даёт полупрозрачную кромку, которая читается как гало. Скругление (rx="8..12") разрешено только у внутренних боксов.
- Никаких фильтров. Запрещены
<filter>, feGaussianBlur, feDropShadow, любые blur()/тени. Глубину делай слоями непрозрачных фигур и градиентами заливки, не размытием.
- Градиенты — допустимы (
<linearGradient>) для фона, пламени, «горящих» зон. Это не противоречит чистоте: гало даёт именно размытие/тень и альфа-кромка, а не градиент-заливка.
- Текст по вертикали в боксах —
dominant-baseline="central" + y в центре бокса.
- Контраст ≥ AA (§8): любой текст читаем на своей подложке. Тезис
#9aa0a4 на графите — проверяй, что не проваливается; заголовок всегда #e6e1d9.
Референс-шаблон (проверенная обложка «Надёжность строится в диалоге»)
Полный готовый пример лежит рядом: reference/reliability-is-a-conversation.svg — открой его, если нужен живой образец композиции «две стороны + горящий очаг в центре». Скелет ниже — отправная точка структуры; заменяй метафору, держи бренд-каркас:
<svg width="680" height="430" viewBox="0 0 680 430" role="img" xmlns="http://www.w3.org/2000/svg">
<title>ЗАГОЛОВОК ПОСТА</title>
<desc>Одно предложение: что показывает обложка.</desc>
<defs>
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#1e2327"/><stop offset="100%" stop-color="#181c20"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="680" height="430" fill="url(#bgGrad)"/>
<g stroke="#333b41" stroke-width="0.5" opacity="0.5">
<line x1="0" y1="100" x2="680" y2="100"/>
</g>
<text x="340" y="55" text-anchor="middle" font-family="'PT Sans', sans-serif"
font-size="25" font-weight="700" fill="#e6e1d9">ЗАГОЛОВОК</text>
<text x="340" y="80" text-anchor="middle" font-family="'PT Sans', sans-serif"
font-size="13" fill="#9aa0a4">тезис статьи одной фразой</text>
<text x="340" y="400" text-anchor="middle" font-family="'JetBrains Mono', monospace"
font-size="11" fill="#fdba74">Мишка на сервере · @jtprogru_channel</text>
</svg>
Шаг 4. Сохрани и (опционально) проверь чистоту
Сохрани файл как <slug-поста>.svg в /mnt/user-data/outputs/ (или в covers/, если работаешь в репозитории темы). Имя — по slug поста, латиница и дефисы, например reliability-is-a-conversation.svg.
Проверка «нет гало» (рекомендуется). Растеризуй на непрозрачном фоне и убедись, что PNG выходит без альфа-канала и без светлой кромки по периметру:
import cairosvg
cairosvg.svg2png(url='cover.svg', write_to='_check.png',
output_width=1360, output_height=860, background_color='#1e2327')
from PIL import Image
im = Image.open('_check.png')
assert im.mode == 'RGB', f'есть альфа-канал: {im.mode}'
w, h = im.size
print('углы:', [im.getpixel(p) for p in [(0,0),(w-1,0),(0,h-1),(w-1,h-1)]])
PNG здесь — только для самопроверки, не финальный артефакт. Отдаёшь пользователю SVG.
Шаг 5. Отдай результат
Через present_files отдай .svg. Краткий отчёт:
✅ Обложка готова: reliability-is-a-conversation.svg
🎨 Метафора: ... (одна фраза)
🔥 Янтарь горит на: ... (смысловой центр)
🅰 Бренд: один акцент #fb923c на графите, PT Sans + JetBrains Mono, без гало
⚠️ Что проверить:
- Заголовок на картинке = заголовок поста? (если сократил — скажи)
- Тезис помещается в одну строку на 680px? (если длинный — предложи перенос/сокращение)
Если уместно — предложи опции: горизонтальный 1200×630 под og:image, версия без текста заголовка (чтобы не дублировать <title> поста), конвертация в AVIF/WebP.
Правила, которые нельзя нарушать
- Только один тёплый акцент.
#fb923c/#fdba74 и его тёмный край #c2410c. Никаких cyan, teal, фиолетовых, зелёных как «второго бренда». Это ядро дизайн-кода (§2).
- Внешний фон без скругления и без фильтров. Прямые края на весь холст; ноль
<filter>/blur/тени. Иначе по краю появляется гало.
- Mono — только тех-метки, проза — humanist sans. Не верстай весь текст моноширинным (§3).
- Без маскота. Это концептуальная обложка эссе (§5). Медведь сюда не ставится.
- Не выдумывай заголовок. Бери из статьи. Если сокращаешь ради ширины — скажи пользователю.
- Контраст ≥ AA. Любая текстовая пара проверяема; не клади приглушённый текст на тёмное так, что он пропадает (§8).
- BRANDING.md главнее этого снимка. Если в каталоге есть свежий
BRANDING.md — токены бери из него; значения здесь — дефолт на случай его отсутствия.
- Дефолты переопределяемы. Если пользователь явно просит другой акцент, формат или добавить маскота — выполняй, но по умолчанию держи бренд-каркас.
Справка по бренд-токенам (дефолты, снимок BRANDING.md v0.1)
| Назначение | Токен | HEX (dark) |
|---|
| Фон страницы | --bg | #1e2327 |
| Поверхность | --bg-elev | #252b30 |
| Текст основной | --fg | #e6e1d9 |
| Текст приглушённый | --fg-muted | #9aa0a4 |
| Граница / сетка | --border | #333b41 |
| Акцент декор | --accent-400 | #fb923c |
| Акцент-текст (dark) | --accent-300 | #fdba74 |
| Акцент-край | --accent-700 | #c2410c |
Шрифты: проза — PT Sans (humanist sans, дефолт §3); тех-метки и код — JetBrains Mono. Формат обложки: 680×430. Канал по умолчанию: Мишка на сервере · @jtprogru_channel.
