howdeploy/kisa-stack/css-graphics

CSS Graphics — генерация графики средствами HTML/CSS/SVG

Hermes: команды запускай через terminal, временный HTML пиши файловым инструментом среды, готовый PNG/JPG отдавай в чат через MEDIA:/absolute/path.

Standalone скилл для создания графики. Пользователь описывает картинку текстом или дает референсное изображение — ты пишешь HTML/CSS/SVG и рендеришь в PNG/JPG через Puppeteer.

Все пути в этом скилле — относительно базовой директории скилла (она сообщается при загрузке скилла; в Claude Code это ~/.claude/skills/css-graphics/, в Codex — ~/.codex/skills/css-graphics/).

Первый запуск

Если Puppeteer еще не установлен, выполни из базовой директории скилла:

bash scripts/setup.sh

Режимы работы

Режим 1 — из текстового описания

Пользователь описывает что хочет увидеть → ты пишешь HTML/CSS/SVG → рендеришь.

Режим 2 — по референсному изображению

Пользователь дает изображение → ты читаешь его через Read tool → анализируешь цвета, формы, layout, типографику → воссоздаешь в CSS/SVG → рендеришь.

Процесс рендера

1. Write HTML-файл в .css-graphics-temp.html (в CWD пользователя)
2. Bash — запустить render.js (путь к скрипту — от базовой директории скилла):

``bash node <база скилла>/scripts/render.js \ --input .css-graphics-temp.html \ --output <имя-файла>.png \ --width <W> --height <H> ``

1. Bash — удалить временный файл: rm .css-graphics-temp.html
2. Сообщить пользователю путь к файлу и итоговые размеры

Обязательная HTML-структура

Каждый сгенерированный HTML обязан содержать:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
  </style>
  <!-- Google Fonts если нужны -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
</head>
<body>
  <!-- Контент здесь -->
</body>
</html>

• body занимает весь viewport — размеры задаются через --width/--height в render.js
• overflow: hidden — ничего не выходит за границы
• Google Fonts подключать через <link> с fallback на system-ui, sans-serif

CSS-техники для графики

• Градиенты: linear-gradient, radial-gradient, conic-gradient, множественные background
• Формы: border-radius, clip-path (polygon, circle, ellipse, path)
• Глубина: стекинг box-shadow, drop-shadow, backdrop-filter: blur()
• Текстуры: repeating-linear-gradient, SVG <pattern>, feTurbulence
• Анимации не нужны — рендерится статический скриншот

SVG-техники

• <defs> + <linearGradient> / <radialGradient> для заливок
• <path> с командами M, L, C, Q, A для произвольных форм
• <marker> для стрелок на линиях
• <text> с dominant-baseline и text-anchor для точного позиционирования
• <filter> — feGaussianBlur, feTurbulence, feDisplacementMap для эффектов
• <clipPath> и <mask> для вырезания

Стандартные размеры

Параметры render.js

Советы

• Для Retina-качества используй --scale 2 (по умолчанию) — итоговый файл будет вдвое больше viewport
• Для прозрачных PNG (иконки, стикеры) — --transparent + не задавай background на body
• Для JPEG используй расширение .jpg — автоматически уберет альфа-канал
• Для сложной типографики предпочитай Google Fonts — --wait 2000 чтобы шрифты загрузились
• Справочник техник: references/css-techniques.md (от базовой директории скилла)