Claude Info
Дизайн

Генератор изображений для Xiaohongshu

iamzifei/xiaohongshu-images-skill

Claude Skill для преобразования markdown, HTML или текста в стилизованные HTML-страницы с AI-обложками и последовательными скриншотами в формате 3:4 для публикации на Xiaohongshu (小红书).

Установка

terminal
bash
pip install playwright

README

Xiaohongshu Images Skill

Claude Code skill, который преобразует markdown, HTML или текстовый контент в красиво оформленные HTML-страницы с AI-сгенерированными обложками, а затем делает последовательные скриншоты в соотношении 3:4 для публикации на Xiaohongshu.

Возможности

  • Обработка контента: принимает markdown, HTML или обычный текст
  • AI-обложки: генерирует иллюстрации в редакционном стиле с помощью скилла /baoyu-cover-image
  • Стилизованный HTML: создаёт красиво оформленные HTML-страницы с современной типографикой
  • Захват скриншотов: делает последовательные скриншоты в соотношении 3:4, оптимизированные для Xiaohongshu
  • Умные границы текста: гарантирует, что текст не обрезается на скриншотах

Установка

Требования

  • Python 3.8 или выше
  • Claude Code CLI
  • Скилл /baoyu-cover-image, установленный в ~/.claude/skills/

Настройка

  1. Скопируйте или склонируйте скилл в директорию Claude skills:
bash
# Копирование в глобальные скиллы
cp -r xiaohongshu-images-skill ~/.claude/skills/

# Или симлинк для разработки
ln -s /path/to/xiaohongshu-images-skill ~/.claude/skills/xiaohongshu-images-skill
  1. Установите зависимости Python:
bash
pip install playwright
playwright install chromium
  1. Убедитесь, что скилл baoyu-cover-image установлен:
bash
# Проверьте наличие скилла
ls ~/.claude/skills/baoyu-cover-image/SKILL.md

Использование

Через Claude Code

Вызовите скилл в Claude Code:

/xiaohongshu-images

Затем предоставьте контент:

  • Вставьте markdown/HTML напрямую
  • Укажите путь к файлу: /path/to/article.md
  • Укажите URL для получения контента

Пример

markdown
/xiaohongshu-images

# Заголовок статьи

Вводный абзац, объясняющий тему...

## Раздел 1

Содержимое раздела 1 с подробным объяснением...

## Раздел 2

Дополнительный контент с примерами...

Результат

Скилл генерирует файлы в ~/Dev/obsidian/articles/<date-title>/:

  • xhs-preview.html — стилизованная HTML-страница предпросмотра
  • _attachments/cover-xhs.png — AI-сгенерированная обложка
  • _attachments/xhs-01.png, xhs-02.png, ... — последовательные скриншоты

Структура директорий

xiaohongshu-images-skill/ ├── SKILL.md # Основное определение скилла ├── README.md # Этот файл ├── prompts/ │ └── default.md # Стандартный промпт для HTML/CSS-стилизации ├── scripts/ │ └── screenshot.py # Захват скриншотов └── .gitignore Выходная директория (за пределами папки скилла): ~/Dev/obsidian/articles/<date>-<title>/ ├── xhs-preview.html # Стилизованная HTML-страница предпросмотра ├── imgs/ # Создаётся скиллом baoyu-cover-image │ ├── prompts/ │ │ └── cover.md # Промпт для обложки │ └── cover.png # Сгенерированная обложка (перемещается в _attachments/) └── _attachments/ # Папка вложений в стиле Obsidian ├── cover-xhs.png # Обложка (перемещена из imgs/cover.png) ├── xhs-01.png # Скриншот страницы 1 ├── xhs-02.png # Скриншот страницы 2 └── ...

Кастомизация

Пользовательские шаблоны промптов

Создайте собственные шаблоны стилизации в директории prompts/:

  1. Создайте новый .md-файл (например, prompts/minimal.md)
  2. Опишите спецификации HTML/CSS
  3. Вызовите с указанием: «Используй минималистичный шаблон для этой статьи»

Изменение стилей

Отредактируйте prompts/default.md для настройки:

  • Размеров и цветов карточек
  • Семейств и размеров шрифтов
  • Иерархии типографики
  • Стилизации блоков кода
  • Брейкпоинтов адаптивности

Конфигурация

Настройки скриншотов

Стандартные размеры скриншотов (соотношение 3:4 для Xiaohongshu):

  • Ширина: 1080px
  • Высота: 1440px
  • Масштаб: 2x (качество Retina)

Для изменения отредактируйте scripts/screenshot.py:

py
SCREENSHOT_WIDTH = 1080
SCREENSHOT_HEIGHT = 1440

Скрипты

screenshot.py

Делает последовательные скриншоты HTML-страниц.

bash
python scripts/screenshot.py ~/Dev/obsidian/articles/<date>-<title>/xhs-preview.html

Результат: ~/Dev/obsidian/articles/<date>-<title>/_attachments/xhs-01.png, xhs-02.png и т.д.

Возможности:

  • Автоматическая прокрутка страницы
  • Умное определение границ текста
  • Отсутствие обрезки текста на границах
  • Вывод в соотношении сторон 3:4

Устранение неполадок

Проблемы с обложкой

  • Убедитесь, что скилл /baoyu-cover-image установлен и работает
  • Проверьте, что скилл имеет доступ к моделям генерации изображений
  • Попробуйте запустить /baoyu-cover-image напрямую для отладки

Проблемы со скриншотами

  • Установите браузеры Playwright: playwright install chromium
  • Проверьте корректность путей к файлам
  • Убедитесь, что HTML-файл валиден и доступен

Загрузка шрифтов

Если шрифты не загружаются на скриншотах:

  • Увеличьте время ожидания в screenshot.py
  • Проверьте доступность Google Fonts
  • Рассмотрите использование локальных шрифтов

Лицензия

MIT License — подробности в файле LICENSE.

Связанные скиллы

  • baoyu-cover-image — генерация обложек (обязательная зависимость)
  • chinese-viral-writer — создание вирусного контента на китайском
  • wechat-article-formatter — форматирование статей для WeChat
  • wechat-article-publisher — автоматизация публикации в WeChat

Похожие скиллы

zanwei/design-dna

Design DNA

620
dominikmartn/hue

hue

446
bitjaru/styleseed

styleseed

317
rohitg00/awesome-claude-design

Awesome Claude Design

251