# web-asset-generator

Генерирует фавиконки, PWA-иконки и мета-картинки Open Graph по логотипу, эмодзи или тексту. Пригодится при подготовке веб-приложения к публикации и оформлении сниппетов для соцсетей.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 933 установки · ★ 523
- Автор: alonw0
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/alonw0/web-asset-generator/tree/HEAD/skills/web-asset-generator/SKILL.md
- Обновлён: 2026-01-28
- HTML: https://affpapa.org/nevibecode/skills/web-asset-generator

## Что делает

Скилл автоматизирует сборку графики для сайта. Он запускает скрипты `scripts/generate_favicons.py` и `scripts/generate_og_images.py`, создавая фавиконки под разные разрешения (16x16, 32x32, 96x96 и `favicon.ico`), PWA-иконки для мобильных экранов и карточки Open Graph для соцсетей. Исходником может служить файл логотипа, слоган или выбранный эмодзи.

Агент ведёт диалог через интерактивный инструмент `AskUserQuestion`, предлагая кликабельные варианты вместо ручного ввода. Скилл помогает выбрать палитру: можно передать точные HEX-коды или взять фон по умолчанию `#4F46E5` с белым текстом. После рендеринга картинок помощник выдаёт готовые HTML-теги и предлагает встроить их в проект, определяя файлы вроде `next.config.js` или `astro.config.mjs`.

Для работы скриптов в окружении обязательно нужен Python. Если исходного логотипа нет, утилита подберёт эмодзи по описанию проекта через флаг `--suggest` и соберёт графику.

## Требования
- Работает с: LinkedIn

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add alonw0/web-asset-generator --skill web-asset-generator -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/web-asset-generator/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/web-asset-generator/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add alonw0/web-asset-generator --skill web-asset-generator -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/web-asset-generator/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add alonw0/web-asset-generator --skill web-asset-generator -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/web-asset-generator/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install alonw0/web-asset-generator web-asset-generator
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/web-asset-generator/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add alonw0/web-asset-generator --skill web-asset-generator -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/alonw0/web-asset-generator --path skills/web-asset-generator
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/web-asset-generator/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add alonw0/web-asset-generator --skill web-asset-generator -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/alonw0/web-asset-generator/tree/HEAD/skills/web-asset-generator/SKILL.md

## Когда брать
- Сгенерировать комплект фавиконок (favicon.ico, PNG 16x16, 32x32, 96x96)
- Создать PWA-иконки для экранов iOS и Android (180x180, 192x192, 512x512)
- Подготовить мета-изображения Open Graph для Facebook, LinkedIn и карточек Twitter (1200x675)
- Превратить эмодзи или текстовый слоган в набор веб-графики при отсутствии логотипа
- Сформировать правильные мета-теги HTML для вставки в разметку проекта

## Примеры запросов агенту
- Сгенерируй фавиконки и PWA-иконки из нашего логотипа logo.png
- Подготовь картинку Open Graph для Твиттера и Фейсбука с текстом 'AI Coding Assistant' на фиолетовом фоне
- Создай комплект веб-иконок для кофейни на основе эмодзи ☕

## Похожие
- [favicon-generator](https://affpapa.org/nevibecode/skills/favicon-generator.md) — скилл · 1100 установок
- [favicon-gen](https://affpapa.org/nevibecode/skills/favicon-gen.md) — скилл · 2200 установок
- [open-graph](https://affpapa.org/nevibecode/skills/open-graph.md) — скилл · 1200 установок
- [web-3d-asset-pipeline](https://affpapa.org/nevibecode/skills/web-3d-asset-pipeline.md) — скилл · 58 установок
- [progressive-web-app](https://affpapa.org/nevibecode/skills/aj-geddes-progressive-web-app.md) — скилл · 522 установки
- [web-frameworks](https://affpapa.org/nevibecode/skills/web-frameworks.md) — скилл · 372 установки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md