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 (путь к скрипту — от базовой директории скилла):

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

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

Обязательная 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>