visual-style — скилл для Claude Code: что делает и как установить
Создаёт, извлекает и переносит дизайн-системы через файлы visual-style.md. Помогает задать единую палитру, шрифты и сетку для видео, слайдов или макетов.
npx skills add calesthio/OpenMontage --skill visual-style -a claude-codeЧто делает visual-style
Скилл сохраняет параметры визуального стиля в одном файле visual-style.md. Внутри фиксируются роли оттенков, шрифтовые пары, структура сетки и характер анимации. Инструмент умеет строить описание с нуля через интерактивный диалог, а также вытягивать стили из сетевых адресов, видеорядов или страниц PDF-руководств.
Для передачи правил в другие среды используются коннекторы. С их помощью спецификация превращается в инструкции для видеогенератора HeyGen, веб-слайдов, paper.design или макетов Figma. Кроме собственных наборов доступна галерея готовых тем, включающая графику Сола Басса, верстку Невилла Броуди и палитру Game Boy Color.
Базовым элементом формата выступает поле style_prompt_full: сторонние инструменты считывают его целиком как основную инструкцию. В файле запрещено хранить бинарные данные, поэтому любые медиафайлы придётся держать на внешних серверах в виде прямых веб-ссылок.
Какие задачи решает
- составить дизайн-систему с нуля через пошаговый опрос
- извлечь палитру и правила вёрстки из PDF-брендбука
- передать параметры фирменного стиля в видеоагент HeyGen
- оформить HTML-презентацию в швейцарском типографическом стиле
Примеры запросов агенту
- Собери файл visual-style.md в палитре Game Boy Color для веб-слайдов
- Извлеки цвета и правила шрифтов из файла brand-guide.pdf в visual-style.md
- Примени текущий visual-style.md к генерации видео через коннектор HeyGen
Как установить visual-style
1Через Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill visual-style -a claude-code2Вручную: положить файлы
~/.claude/skills/visual-style/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/visual-style/
1Через Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill visual-style -a codex2Вручную: положить файлы
.agents/skills/visual-style/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill visual-style -a cursor2Вручную: положить файлы
.cursor/skills/visual-style/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install calesthio/OpenMontage visual-style2Вручную: положить файлы
.github/skills/visual-style/SKILL.md1Через Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill visual-style -a gemini-cli2Командой платформы
gemini skills install https://github.com/calesthio/OpenMontage --path .claude/skills/visual-styleВручную: положить файлы
.devin/skills/visual-style/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add calesthio/OpenMontage --skill visual-style -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о visual-style
Как установить visual-style в Claude Code?
Выполните команду npx skills add calesthio/OpenMontage --skill visual-style -a claude-code.
Что делает скилл visual-style?
Он генерирует, анализирует и конвертирует переносимые дизайн-системы в формате visual-style.md. Спецификацию можно отдавать агентам для сборки роликов, вёрстки веб-слайдов или разметки стилей в Figma.
Какие готовые темы входят в галерею?
В каталог включены стили Мюллера-Брокманна, Невилла Броуди, Сола Басса, палитра Game Boy Color и пресет HeyGen AI Video.
