cathrynlavery/diagram-design
Developer toolsЭта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал
38 типов редакционных диаграмм для Claude Code, Codex и Pi. Самостоятельный HTML + SVG. Без теней. Без «русалочьей грязи».
Обзор
14 типов. Один навык Клода Кода. Ваш бренд за 60 секунд — навык читает ваш сайт и накладывает цвета + шрифты на каждую диаграмму. Нет Figma. Нет стандартных округлых коробок. Нет 30-минутных сессий выбора цвета. Я пишу на littlemight.com (и провожу BestSelf.co на стороне). Каждый раз, когда мне нужна была схема — архитектурный эскиз, блок-схема, пирамида самых важных — я спрашивал Клода и получал в ответ какой-нибудь стандартный закруглённый квадрат, совсем не похожий на остальную часть сайта. Я либо спорил с Figma 30 минут, либо просто пропускал схему. Поэтому я создал для этого навык Claude Code. Четырнадцать типов, редакционное качество, соответствуют вашему бренду за 60 секунд, читая ваш сайт. Самый качественный ход обычно — удаление. Каждый узел занимает своё место. Акцентный цвет зарезервирован для 1–2 предметов, на которые читатель должен обратить внимание в первую очередь. Плотность цели: 4/10. Все 14 диаграмм выпускаются в трёх вариантах: минимальное освещение, минимальное темнота и полноценное редакционное освещение.
Обзор (машинный перевод)
Навык агента, который рисует диаграммы в виде одного автономного файла HTML + SVG в вашем бренде. 45 типов диаграмм. Без теней. Без «русалочки».
Веб-сайт · Галерея · Журнал изменений
Установка · Что это делает · Быстрый старт · Соответствуйте вашему бренду · Импорт · Экспорт · Вклад
Навыки NPX: Добавьте Cathrynlavery/Diagram-Design
Спросите своего агента простыми словами:
- *“Сделай мне архитектурную схему моего приложения: фронтенд, бэкенд, база данных, кэш Redis.” *
- *“Мне нужен квадрант, показывающий проекты Q2 по воздействию и усилиям.” *
- *“Дайте мне последовательность вызова предъявителя с обновлением токена на 401.” *
- “Встроенный дизайн диаграммы для https://yoursite.com” (вытягивает вашу палитру и шрифты, чтобы каждая диаграмма после этой совпадала с вашим сайтом)
Агент выбирает тип, указывает план и записывает один файл [[T1], который можно открыть дваждым кликом.
Установка
Работает с любым хостом, который читает Agent Skills, включая Cursor, Claude Code, Codex, Qoder, GitHub Copilot, Gemini CLI, Cline, Windsurf и Amp:
В Claude Code маркетплейс плагинов предоставляет обновления и команды слэша:
Официальные сборки выходят только из этого репозитория.
Эта страница переведена автоматически. Технические детали смотрите в оригинале.
README
Показан фрагмент оригинального README. Открыть оригинал.
Ask your agent in plain words:
- “Make me an architecture diagram of my app: frontend, backend, database, Redis cache.”
- “I need a quadrant showing Q2 projects by impact vs effort.”
- “Give me a sequence of a bearer call with token refresh on 401.”
- “Onboard diagram-design to https://yoursite.com” (pulls your palette and fonts so every diagram after this one matches your site)
The agent picks the type, states its plan, and writes one .html file you can open by double-clicking.
Install
Рекомендуемые инструменты
Попробуйте другой запрос или уберите фильтр.
Установка
npx skillfish add cathrynlavery/diagram-design