Навык агента для Claude Code, Codex и подобных сред кодинг-агентов. Генерирует изображения каруселей для Сяохуншу / Рэднот и парные обложки ВиЧат 21:9 + 1:1 из статей, текстов, скриншотов, заметок о продуктах, субтитров или фотографий.
Две визуальные системы в одном рабочем процессе:
- Редакционная. Сдержанные макеты в духе Монокль / Кинфолк / Сериал. Лучше всего для повествования, стиля жизни, путешествий, чтения, кино и личных наблюдений.
- Швейцарский интернациональный. Сетка прежде всего, один якорный цвет, острые линии, экстремальный контраст шрифта. Лучше всего для обзоров продуктов, данных, фреймворков, туториалов и инструментов ИИ.
Родственный проект guizang-ppt-skill. Общий визуальный язык, раздельное обслуживание. PPT решает «горизонтальный свайп-докладов»; этот решает «статические изображения для ленты».
30-секундный старт
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
Или вставьте это агенту ИИ с доступом к оболочке:
Установи для меня guizang-social-card-skill. Клонируй https://github.com/op7418/guizang-social-card-skill в ~/.claude/skills/guizang-social-card-skill, затем проверь, что существуют SKILL.md, assets/ и references/.
Если уже установили, обновите:
Обнови для меня guizang-social-card-skill. Перейди в ~/.claude/skills/guizang-social-card-skill, выполни git pull, затем сообщи последний коммит.
Затем попросите своего агента:
Сделай мне карусель для Сяохуншу в швейцарском стиле из этой статьи, 5 карточек, синий IKB.
Другие полезные запросы:
Сделай мне набор для Сяохуншу 3:4 из этого обзора продукта, с заголовками в редакторском стиле.
Преврати эту статью в пару обложек для ВиЧат: 21:9 герой + 1:1 карточка для поделиться, визуально согласованно.
У меня 3 фотографии кемпинга — сделай мне карусель для Сяохуншу с упором на изображения.
Преврати этот текст гайда по игре в набор для Сяохуншу; подтяни немного арта из Уолхейвен.
Что вы получите
- 🖋 Две визуальные системы: Редакционная для атмосферы и повествования, Швейцарская для фактов и структуры, объединённые одним рабочим процессом
- 📐 3 размера холста:
.poster.xhs1080×1440 (Сяохуншу 3:4),.poster.wide2100×900 (ВиЧат 21:9),.poster.square1080×1080 (ВиЧат 1:1) - 🧩 28 скелетов макетов: 16 Редакционных (
M01-M16, включая обложку с доминированием изображения, Конвейер, До/После) + 12 Швейцарских (S01-S12, включая Башню KPI, Гистограмму H, Матрицу + Героя) - 🎨 10 предустановок тем: 6 Редакционных (Классика чернил, Индиго фарфоровый, Лесные чернила, Крафтовая бумага, Дюна, Темные чернила полуночи) + 4 Швейцарских якорных цвета (Синий Клейна IKB, Лимонный, Лимонно-зелёный, Оранжевый безопасности)
- 🖼 Процесс поиска изображений: сначала изображения пользователя; иначе каскадным методом Unsplash → Pexels → Flickr CC → Wallhaven → прямой поиск, загружаются локально с автогенерируемым
SOURCES.md - 🌫 Фон с потоковым чернилом WebGL: редакторские геройские страницы могут содержать анимацию чернил в реальном времени; можно отключить для слабых устройств или режима скриншота
- 🪧 Наложение изображений + безопасность лиц: изображения на полный экран должны иметь маску; зоны размещения текста должны избегать объекта. Жёсткие правила в
references/image-overlay.md - 🧰 Инструменты украшения скриншотов: 9 фонов WebP с реальной текстурой (5 Редакционных / 4 Швейцарских), в сочетании с утилитами
.frame-shot/.device-browser/.device-phone - 🗺 Компонент карты: MapLibre + OSM реальные тайлы, несколько точек + соединители, для путеводителей
- ✅ Валидатор:
validate-social-deck.mjsавтоматически определяет переполнение, нарушения ограничений шрифта, разрывы плотности по 4-м полосам и столкновения с нижним колонтитулом - 📄 Однофайловый HTML + рендеринг Playwright: без сборочного конвейера;
node render.mjsвыводит PNG напрямую
Подходит / Не подходит
✅ Подходит: карусели для Сяохуншу / пары обложек для ВиЧат / обложки Моментов / обложки Каналов / визуальные материалы для статей / страницы туториалов / сводки данных / путеводители / обзоры продуктов / объяснения со скриншотами
❌ Не подходит: горизонтальные свайп-деки (используйте guizang-ppt-skill) / генерация длинных видео / чистая ретушь фото / редактирование простого текста без макета
11 категорий Сяохуншу
Разбиты по «кругу компетенции» — см. references/category-cookbook.md:
Сильные сквозные (копия / структура / изображения все в зоне ответственности):
- Путешествия, карьера, рекомендации (после указания поджанра)
Сильные в копии и структуре, изображения зависят от пользователя или подбираемого арта:
- Игры, кино, еда (рецепты), макияж (туториалы), фитнес, дом, мода (подборки)
Вне зоны ответственности, объявляется заранее (не будем натягивать):
- Живые снимки OOTD / дримкор / градинг эмуляции плёнки / реальный тест кожи макияжа — всё, что сильно зависит от фотографии или пост-продакшена
Типичные сценарии
| Задача | Рекомендуемый подход |
|---|---|
| Длинная статья → карусель для Сяохуншу | Извлеките ключевые выводы; Редакционная для темпа повествования, Швейцарская для разбивки данных |
| Обзор продукта / подведение итогов инструмента | Швейцарский + синий IKB, предпочтительнее S09 Башня KPI / S10 Гистограмма H |
| Путешествия / стиль жизни | Редакционная + Темные чернила полуночи или Дюна, M16 Обложка с доминированием изображения для героя на полный экран |
| Пара обложек для ВиЧат | Отрендерить тот же контент дважды: .poster.wide 21:9 + .poster.square 1:1, визуально согласованно |
| Туториал со скриншотами / пошаговое руководство по инструменту | .frame-shot + .device-browser, предпочтительнее Швейцарская сетка |
| Гайд по игре / обзор фильма | Редакционная + Темные чернила полуночи, подтянуть игровой арт из Уолхейвен для героя на полный экран |
| Сводка данных / итоги года | Швейцарский + Лимонный или Оранжевый безопасности, комбинация матрицы и учётной книги |
Почему однофайловый HTML в PNG
- Дружественно к агентам: HTML + CSS — это текст, агенты могут писать, читать, редактировать и проверять напрямую
- Точность макета: CSS Grid + строгие правила шрифта / отступов / сетки значительно превосходят возможности Markdown в макетировании
- Открытый поиск изображений: подключайтесь к Unsplash / Pexels / Wallhaven / Mapbox / OSM / любому веб-ресурсу
- Проверяемое качество:
validate-social-deck.mjsвыполняет замеры DOM через Playwright, а не догадки - Простая доставка:
output/*.pngпоставляется напрямую — без деплоев, без инструментов экспорта
Поддержка платформ
| Платформа | Статус | Примечания |
|---|---|---|
| Claude Code | Поддерживается | Нативный рабочий процесс навыка, идеально для генерации и итерации карточек |
| Codex | Поддерживается | Хорошо для генерации длинных карточек, поиска изображений, визуального QA |
| Cursor / другие локальные агенты | Работает | Требуется чтение/запись файловой системы + выполнение оболочки |
| Простой чат-бот | Не рекомендуется | Без файловой системы и конвейера рендеринга невозможно надёжно поставлять изображения |
Установка
Вариант 1: Установка одной строкой (рекомендуется)
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
Вариант 2: Вставьте это ИИ
Установи для меня навык
guizang-social-card-skillдля Claude Code. Шаги:
- Убедись, что существует
~/.claude/skills/(создай, если нет)- Выполни
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill- Проверь:
ls ~/.claude/skills/guizang-social-card-skill/должен показатьSKILL.md,assets/,references/- Сообщи, когда будет готово. Позже, говоря что-то вроде «сделай мне карусель для Сяохуншу», активируешь этот навык.
Вставьте блок выше в Claude Code / Cursor / любого агента ИИ с доступом к оболочке.
Вариант 3: Ручной CLI
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
Как его активировать
После установки Claude Code автоматически определяет навык. Фразы-триггеры:
- "Сделай мне карусель для Сяохуншу / Rednote"
- "Сделай мне карточки Rednote"
- "Сделай обложку ВиЧат 21:9 герой + 1:1 карточка для поделиться"
- "Сгенерируй социальные карточки / карточки в журнальном стиле"
- "Преврати эту статью в карусель-туториал"
- "Сделай обзор для Сяохуншу в швейцарском стиле / карточки в стиле IKB"
Рабочий процесс
Навык представляет собой структурированный рабочий процесс. Агент проходит 7 шагов:
- Приём — зафиксировать 4 вещи: целевая платформа / стиль / исходный контент / изображения пользователя. Когда изображения недоступны, предложи A/B/C один раз (снимай сам / сгенерируй ИИ / найди онлайн); не переспрашивай
- Стиль и Тема — выбери Редакционный или Швейцарский, затем одну из 10 предустановок тем. Собственные шестнадцатеричные значения не допускаются
- Выбор макета — выбери / вставь / адаптируй копию из 28 скелетов макетов. 16 Редакционных / 12 Швейцарских
- Подготовка ресурсов — найди изображения (Unsplash / Pexels / Flickr CC / Wallhaven / прямой поиск), загрузи локально + создай
SOURCES.md; спроси, нужно ли указывать источники - Компоновка и рендеринг — скопируй шаблон-заготовку → замени
<!-- POSTERS_HERE -->→node render.mjs - Доставка и обзор — сначала покажи PNG, спроси "посмотри сам или хочешь запустить валидатор?" — автоматическая проверка не запускается
- Итерация — примени обратную связь пользователя, подкорректируй встроенные стили или поменяй макеты / изображения, отрендери заново
Полная спецификация в SKILL.md. Подробности в соответствующих references/*.md.
Валидатор
node validate-social-deck.mjs path/to/task-dir
6 правил, основанных на реальном замере Playwright, а не статическом сканировании:
- R1 Переполнение — любая секция, выходящая за пределы
.poster, немедленно проваливается - R2 Ограничения шрифта — комбинации размера и насыщенности
.h-xl/.h-display, превышающие определения заготовки - R3 Столкновение с нижним колонтитулом — контент, вдавливающийся в нижний колонтитул / номер страницы
- R4 Плотность по 4 полосам — холст высотой 1440 делится на 4 горизонтальные полосы; каждая должна содержать контент или иметь заявленную причину для пустого пространства
- R5 Переполнение фрейма — дочерние элементы
.frame-img/.frame-shot, выходящие за фрейм - R6 Швейцарская идентичность — швейцарские шаблоны с встроенным
font-weight >= 700предупреждают (нарушает правило «больше размер — тоньше начертание»)
SKILL.md, Шаг 7 явно указывает, что валидатор не запускается автоматически — дождитесь, пока пользователь посмотрит изображения, экономя десятки секунд на каждом круге.
Предустановки тем
Выбирайте из references/theme-presets.md. Собственные шестнадцатеричные значения не допускаются — защита эстетики важнее свободы выбора.
Редакционные (6)
| Тема | Тона | Лучше всего для |
|---|---|---|
| 🖋 Классика чернил | #0a0a0b / #f1efea | Общее по умолчанию, коммерческие темы, когда сомневаешься |
| 🌊 Индиго фарфоровый | #0a1f3d / #f1f3f5 | Технологии, исследования, ИИ, техническая документация |
| 🌿 Лесные чернила | #1a2e1f / #f5f1e8 | Природа, устойчивое развитие, отдых на природе, нон-фикшн |
| 🍂 Крафтовая бумага | #2a1e13 / #eedfc7 | Ностальгия, гуманитарные науки, чтение, литература |
| 🌙 Дюна | #1f1a14 / #f0e6d2 | Искусство, дизайн, творчество, мода |
| ⚫ Темные чернила полуночи | #0e0d0c / #ece2cf / #d4a04a | Ключевой арт игр / ночные сцены / кинематографичные обложки / Black Myth · Elden Ring-стиль тёмных тем |
Швейцарские (4)
| Тема | Якорный цвет | Лучше всего для |
|---|---|---|
| 🔵 Синий Клейна IKB | #002FA7 | Общее по умолчанию, коммерческие запуски, продукты ИИ, фреймворки |
| 🟡 Лимонный | #FFD500 | Молодёжь, спорт, розница, потребительские товары, Y2K |
| 🟢 Лимонно-зелёный | #C5E803 | Экология, здоровье, Gen Z, зелёные бренды |
| 🟠 Оранжевый безопасности | #FF6B35 | Оповещения, новости, промышленность, энергичные темы |
Чтобы переключить тему, просто замените атрибут <section class="poster" data-theme="..."> на шаблоне-заготовке; всё CSS разрешается через var(--...).
Структура каталога
guizang-social-card-skill/
├── SKILL.md ← Основной файл навыка: 7-шаговый рабочий процесс
├── README.md ← README на китайском
├── README.en.md ← Этот файл
├── HANDOFF.md ← Документ передачи: факты + история версий
├── PRODUCT.md ← Документ продукта: мышление + решения + дорожная карта
├── validate-social-deck.mjs ← Валидатор макета Playwright
├── assets/
│ ├── template-editorial-card.html ← Редакционный шаблон (6 тем / 3 холста)
│ ├── template-swiss-card.html ← Швейцарский шаблон (4 акцента / 3 холста)
│ ├── magazine-bg-webgl.js ← Фон с потоковым чернилом WebGL
│ └── screenshot-backgrounds/ ← 9 фонов для сцены скриншотов (WebP)
│ ├── style-a/ ← 5 Редакционных
│ └── style-b/ ← 4 Швейцарских
└── references/
├── platform-specs.md ← Платформа × разрешение × именование
├── style-system.md ← Жёсткие правила и антипаттерны для обоих стилей
├── theme-presets.md ← Все 10 палитр подробно
├── layout-recipes.md ← 28 скелетов макетов (M01-M16 + S01-S12)
├── components.md ← Шрифт / карточки / отступы / иконки
├── background-systems.md ← Системы фона: поток чернил / сетка / бумажные слои
├── portrait-fill.md ← Стратегия пустого пространства для доски 3:4
├── content-planning.md ← Хуки / разбивка на страницы / сжатие текста
├── category-cookbook.md ← Таблица маршрутизации 11 категорий Сяохуншу
├── image-overlay.md ← Правила маски для полноэкранных изображений + безопасность лиц
├── screenshot-treatment.md ← Утилиты `.frame-shot` + украшение скриншотов
├── map-component.md ← Картографический компонент `.map-block` MapLibre
├── title-shortener.md ← Стратегия короткого заголовка для обложки 1:1
├── production-workflow.md ← Конвейер рендеринга Playwright
└── qa-checklist.md ← Чек-лист качества
Основные принципы дизайна
- Сдержанность вместо крикливости — сдержанные палитры выделяются в насыщенной ленте
- Структура вместо украшений — иерархию несут шрифт / контраст / сетка, а не тени или карточки
- Макеты вместо свободы — сначала выбирай, потом адаптируй; не придумывай страницы вне 28 скелетов
- Сначала изображения пользователя — при приёме предложи A/B/C один раз; не переспрашивай о съёмке своих
- Маска + избегание — полноэкранные изображения всегда имеют маску; зоны текста должны обходить объект (лица / продукты / текстово-насыщенные области)
- Больше размер — тоньше начертание — в швейцарском стиле размер
.h-xlрастёт → насыщенность должна снижаться. Редакционный стиль следует тому же правилу - Без автовалидации — дайте пользователю сначала посмотреть, затем спросите перед проверкой; экономит десятки секунд на каждом круге
- Навык — это продукт, а не промпт — имеет PRODUCT.md, номера версий, CHANGELOG, границы возможностей
- Локальные тесты не попадают в git — все демо / тесты размещаются в
local-tests/, добавлены в .gitignore
Визуальные референсы
- Макеты и межбуквенные интервалы журналов Монокль / Кинфолк / Сериал
- Системы сеток Массимо Виньелли / Helvetica Forever / Швейцарского интернационального типографического стиля
- Соотношения изображения к тексту и человеческая портретность изданий Apartamento / The Gentlewoman
- Примеры из Сяохуншу / Rednote, где сдержанность побеждает ленту
- Практика социальных карточек Guizang
Дорожная карта
- Больше тестов для граничных случаев ограничений шрифта при длинном редакторском контенте
- Больше швейцарских макетов данных (дополнительные скелеты диаграмм)
- После генерации изображения: активно спрашивать, делать ли локальные правки / перегенерировать всё изображение
- Больше рекомендованных пакетов макетов для конкретных категорий (сейчас 7 из 11 сильные сквозные)
- Версия WorkBuddy, готовая для маркетплейса
Участие
Ошибки, проблемы с макетами, запросы на новые макеты — приветствуются Issues и PR. Приоритеты изменений:
- При редактировании шаблонов также обновите таблицу соответствия в
references/components.md(размеры / отступы / насыщенность) - При добавлении макетов добавьте полный рецепт в
references/layout-recipes.md(ограничения текста + минимальная плотность) - При добавлении цветов темы также обновите блок
[data-theme="..."]в шаблоне-заготовке +references/theme-presets.md - При добавлении швейцарских правил также обновите соответствующее правило в
validate-social-deck.mjs - Ошибки, с которыми вы столкнулись, заносите в
references/qa-checklist.md - Тесты и демо живут в
local-tests/— не загрязняйте корень навыка
Лицензия
AGPL-3.0 © 2026 op7418
Этот проект лицензирован под GNU AGPL-3.0. Ключевые моменты:
- Требуется указание авторства — Сохраняйте уведомление об авторских правах
- Производные должны быть открыты — Любая изменённая версия, форк или перераспространение должны быть выпущены под AGPL-3.0 (или совместимой лицензией) с предоставлением полного исходного кода
- Сетевое использование считается распространением — Даже если вы только запускаете изменённую версию как SaaS / веб-сервис без распространения кода, вы всё равно должны опубликовать исходный код (это делает AGPL строже, чем GPL)
- Никакого закрытого, проприетарного или платного распространения
Полные условия в LICENSE.