blueprinter — скилл для Claude Code: что делает и как установить
Скилл создаёт строгие технические схемы и диаграммы на чистом HTML и CSS. Пригодится, когда нужна спецификация без теней и градиентов.
npx skills add yofine/skills --skill blueprinter -a claude-codeЧто делает blueprinter
Скилл заставляет агента оформлять архитектурные схемы, блок-схемы и спецификации в стиле чертежей. Никакого визуального шума вроде скруглений, теней или стеклянного размытия. Вёрстка строится на чётких линиях толщиной в 1 или 2 пикселя, монохромной базе и белых блоках.
Для разметки генератор применяет CSS Grid и Flexbox внутри контейнера diagram-canvas. Заголовки используют шрифт Inter или Helvetica, а системные пути, числа и код строго выводятся моноширинными шрифтами JetBrains Mono или Consolas. Связи между узлами оформляются тонкими прямыми линиями SVG.
Такой стиль сломается на маркетинговых презентациях, потому что намеренно ограничивает палитру. Акцентный цвет здесь допустим максимум один — например, красный для критических ошибок.
Какие задачи решает
- собрать архитектурную диаграмму сервиса на HTML и CSS
- оформить системную блок-схему в строгом инженерном стиле
- сгенерировать блок спецификации с моноширинными параметрами
- разметить связи между компонентами через прямые линии SVG
Примеры запросов агенту
- Создай архитектурную схему нашего API в стиле blueprinter
- Сделай блок-схему обработки очереди задач на HTML и CSS без градиентов и теней
- Сгенерируй спецификацию микросервисов в виде чертежа с моноширинными путями
Как установить blueprinter
1Через Skills CLI (Vercel)
npx skills add yofine/skills --skill blueprinter -a claude-code2Вручную: положить файлы
~/.claude/skills/blueprinter/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/blueprinter/
1Через Skills CLI (Vercel)
npx skills add yofine/skills --skill blueprinter -a codex2Вручную: положить файлы
.agents/skills/blueprinter/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add yofine/skills --skill blueprinter -a cursor2Вручную: положить файлы
.cursor/skills/blueprinter/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install yofine/skills blueprinter2Вручную: положить файлы
.github/skills/blueprinter/SKILL.md1Через Skills CLI (Vercel)
npx skills add yofine/skills --skill blueprinter -a gemini-cli2Командой платформы
gemini skills install https://github.com/yofine/skills --path blueprinterВручную: положить файлы
.devin/skills/blueprinter/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add yofine/skills --skill blueprinter -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о blueprinter
Как установить blueprinter в Claude Code?
Выполните команду npx skills add yofine/skills --skill blueprinter -a claude-code в терминале.
Что делает скилл blueprinter?
Он генерирует плоские диаграммы и системные схемы в виде чистого HTML и CSS кода. Вся вёрстка использует строгие рамки, монохромную палитру и системные переменные.
Какие шрифты и цвета использует blueprinter?
Основу составляют светлый фон #f8fafc, тёмный текст #0f172a и рамки цвета #cbd5e1. Текстовые метки выводятся через Inter, а технические данные и код — через JetBrains Mono.
