Когда я впервые запустил /dataviz в Claude Code, результатом была розовая с зелёным простыня. Как будто ИИ-ассистент решил устроить дискотеку на панели метрик. Проблема не в том, что модель не умеет рисовать — она рисует, пока ей не скажешь «стоп». Встроенный скилл /dataviz (живущий в файле SKILL.md внутри репозитория) — попытка Anthropic причесать этот хаос. Но работает он не магией, а вполне конкретной процедурой, валидатором цветов на базе OKLCH и набором запретов, нарушать которые — значит получить график, от которого будет тошнить арт-директора.
Я потратил неделю, разбирая исходный SKILL.md из официального репозитория Anthropic (версия от июня 2026) и общаясь с командой Claude Code на их Discord. Ниже — всё, что я вытащил. Без прикрас, с примерами кода и реальными шишками.
1. Что прячется за /dataviz: SKILL.md под микроскопом
Скиллы в Claude Code — это текстовые файлы в каталоге .claude/skills/. Каждый такой файл — детальный промпт, который подгружается в контекст при вызове команды /skill_name. Скилл /dataviz не исключение. Он весит около 15 KB (на момент 12.07.2026) и содержит:
- Описание задачи — «Ты — эксперт по визуализации данных. Твоя цель — создавать доступные, точные и эстетичные графики».
- Процедуру из 7 шагов — жёсткая последовательность действий, отступать от которой модель не имеет права.
- Список запретов — 6 категорий действий, которые модель блокирует на уровне промпта.
- Валидатор палитры — встроенная логика проверки цветов на контрастность и цветовую слепоту, завязанная на цветовое пространство OKLCH.
- Примеры кода — шаблоны для Vega-Lite, Matplotlib, Plotly.
Звучит как обычный промпт? Только на первый взгляд. Процедура и валидатор написаны так, чтобы модель не могла их проигнорировать — иначе падает тест (да, скилл сам запускает валидацию после генерации).
Важно: Скилл /dataviz существует только в версии Claude Code ≥ 2.5 (релиз июнь 2026). В более старых версиях его нет. Если вы застряли на предыдущей, как описано в гайде по Claude Code 2.0, — обновляйтесь.
2. 7 шагов процедуры: как /dataviz обрабатывает каждую просьбу
Представьте, что вы кидаете в чат: «нарисуй распределение времени ответа по эндпоинтам». Что делает модель?
1 Определи тип графика и метрики
Модель анализирует данные (из контекста, файла или результата запроса) и выбирает тип визуализации: line chart для временных рядов, bar chart для сравнения, heatmap для корреляции. Без этого шага никуда — скилл явно запрещает угадывать тип «на глаз» без анализа данных.
2 Проверь данные на пригодность
Тут модель смотрит: не пустая ли таблица, нет ли NaN, не пытаются ли ей скормить строки вместо чисел. Если данные кривые — скилл требует остановиться и запросить уточнение у пользователя. Не советую игнорировать этот шаг: генерация графика по мусору закончится тем, что /dataviz вернёт ошибку.
3 Выбери цветовую палитру по OKLCH
Это мозг скилла. Модель не может взять первый попавшийся синий. Она обязана:
- Использовать палитры из предустановленного набора (например,
cividis,tableau10для дискретных,viridisдля непрерывных). - Если данных нет в наборе — сгенерировать цвета в пространстве OKLCH, гарантируя равномерную яркость и насыщенность.
- Проверить каждый цвет на контраст с фоном (минимум 4.5:1 для текста, 3:1 для элементов).
- Имитировать цветовую слепоту (протанопия, дейтеранопия) — если два цвета неразличимы, модель меняет палитру.
4 Сгенерируй код визуализации
Модель пишет код на Python (Matplotlib, Plotly, Seaborn) или Vega-Lite (для интерактивных графиков). Выбор библиотеки зависит от контекста: если файл уже использует Matplotlib — продолжит с ним. Иначе приоритет Vega-Lite из-за компактности JSON.
5 Запусти код в изолированном рантайме
Claude Code выполняет Python-код внутри самого окружения (через subprocess с таймаутом 30 секунд). Результат — bytes PNG или SVG. Если код упал — модель возвращается на шаг 4 с сообщением об ошибке.
6 Повторная валидация палитры
Скилл берёт сгенерированное изображение (если это SVG — парсит его, если PNG — анализирует через библиотеку palette-checker, встроенную в Claude Code). Если хоть один цвет не соответствует критериям OKLCH — модель возвращается на шаг 3. Жёстко, но честно.
7 Выведи inline-результат с caption
Финальный шаг: модель вставляет HTML с изображением (base64) и текстовым пояснением: что за данные, какие цвета, какие инсайты. Если пользователь запросил интерактив — вставляет Plotly HTML с div. Всё это без перезагрузки сессии — спасибо механизмам памяти Claude Code, про которые я писал в отдельной статье.
3. 6 запретов: за что /dataviz не берётся (и правильно делает)
В скилле есть явный блок FORBIDDEN. Я перевел его в человеческий язык. Нарушение этих правил грозит тем, что Claude Code откажется выполнять команду или сгенерирует заглушку.
| Запрет | Почему? |
|---|---|
| 1. Не использовать rainbow colormap | Радуга визуально дезинформирует (изменение оттенка ≠ изменение значения). Для дальтоников — катастрофа. |
| 2. Не рисовать 3D-графики без явной просьбы | 3D искажает восприятие данных. Скилл разрешает 3D только если пользователь трижды настаивает. |
| 3. Не применять сглаживание к категориальным данным | Сглаженная линия создаёт иллюзию непрерывности. Данные по месяцам — только столбцы. |
| 4. Не использовать более 5 цветов в одной легенде | Человек путается, если цветов больше 5±2. Лучше группировать или использовать визуализацию с оттенками серого. |
| 5. Не выводить огромные табличные сырые данные вместо графика | Пользователь просит визуализацию, а не csv. Модель обязана нарисовать, а не выгрузить. |
| 6. Не врать про конфиденциальность | Если данные содержат PII (персональные данные), модель должна предупредить и предложить анонимизировать. Запрет на авто-публикацию куда-либо. |
Самый частый конфуз — запрет №1. Я видел, как разработчики вручную просили cmap='rainbow', модель отказывалась, и сессия шла на перезапуск. Вместо этого используйте viridis или cividis — они доступны и контрастны. Если вам нужно собрать свою палитру, горячие клавиши Claude Code помогут переключать режимы валидации.
4. Валидатор палитры OKLCH: как это выглядит в коде
Скилл /dataviz не просто просит модель быть вежливой с цветами. Он содержит валидатор, написанный на Python, который Claude Code запускает перед рендером. Вот его логика (я восстанавливал по поведению и тестам):
# Упрощённая версия валидатора, который живёт в SKILL.md
import colorsys
def validate_oklch(hex_color: str) -> dict:
"""Проверяет один цвет на соответствие критериям."""
# 1. Конвертируем в OKLCH (тут используется библиотека colour-science)
# 2. Проверяем Lightness: должна быть между 0.2 и 0.9 для цветных элементов
# 3. Проверяем Chroma: не выше 0.32 (иначе слишком насыщенно)
# 4. Проверяем Hue: допускаются любые, но если два цвета Hue ближе 15° — предупреждение
pass
def check_pair_contrast(fg: str, bg: str) -> int:
"""Возвращает WCAG contrast ratio."""
# Использует формулу относительной яркости из sRGB -> лямбда
pass
В реальности скилл вызывает внешний Python-скрипт color_validator.py, который лежит в .claude/hooks/. Если скрипт вернул ошибку — генерация графика отменяется. Это позволяет Anthropic обновлять логику валидации без переустановки Claude Code.
5. Пошаговая настройка и использование /dataviz за 5 минут
Теперь к практике. Чтобы включить скилл, нужно сделать три вещи:
1 Убедись, что Claude Code версии ≥ 2.5
claude --version. Если меньше — обновляй через pip install --upgrade claude-code. Не забудь про netrc или ключ — в гайде по настройкам всё расписано.
2 Проверь наличие скилла
В проекте (корень репозитория) должна быть папка .claude/skills/dataviz.SKILL.md. Если нет — скачай из официального репозитория anthropic/claude-code-skills (команда claude skills install dataviz появилась в июльском релизе).
3 Вызови /dataviz
В сессии Claude Code напиши /dataviz и опиши задачу. Например: /dataviz Покажи распределение ошибок по сервисам за последние 24 часа (данные в файле errors.json). Модель подхватит файл, пройдёт 7 шагов и вернёт инлайновый график.
Важно: скилл работает только в пределах одной сессии. Если вы закрыли терминал — контекст теряется. Чтобы сохранить настройки палитры между сессиями, используйте конфигурационный файл, как советуют в скрытых настройках Claude Code.
6. Типичные ошибки и грабли (набито на своей шкуре)
Ошибка 1: Пытаться использовать /dataviz без данных в контексте. Модель зависает на шаге 2, запрашивая данные. Всегда прикрепляйте файл или ссылайтесь на переменные.
Ошибка 2: Просить интерактивный дашборд с кучей фильтров. /dataviz не умеет создавать многостраничные приложения — это его граница. Для такого нужно использовать Claude Code в связке с Plotly Dash, но это уже отдельная история.
Когда я тестировал скилл на датасете из 50 колонок, модель дважды впадала в рекурсию на шаге 3 (выбор палитры). Причина: слишком много категорий — больше 20. Решение: попросить агрегировать данные до 10 групп. Если вам нужно больше — скилл не справится, придётся писать кастомный валидатор. Об этом я рассказывал в статье про 5 правил контроля в production — там прямая аналогия: не давайте модели задачи, которые она не может решить за один проход.
7. FAQ: 5 вопросов, которые мне задают после воркшопов
1. Могу ли я заменить палитру по умолчанию на свою?
Да. В SKILL.md есть секция CUSTOM_PALETTES. Добавьте свою палитру в формате JSON (массив hex-кодов) — модель будет использовать её при валидации. Только убедитесь, что цвета проходят проверку контраста.
2. /dataviz замедляет Claude Code?
Заметил прирост времени на 2-4 секунды из-за валидации. Но если у вас проект с сотнями графиков — лучше отключать валидатор через флаг --no-validate (экспериментальная опция с июля 2026).
3. Почему модель иногда рисует Matplotlib, а не Plotly?
Если вы в сессии уже использовали Matplotlib — контекст влияет. Скилл приоритезирует ту библиотеку, которая уже загружена. Можно явно сказать «используй Vega-Lite».
4. Работает ли /dataviz с данными из SQL-запросов?
Косвенно. Модель может выполнить SQL через claude tools (если настроен плагин к базе) и потом передать результат в /dataviz. Это два шага: сначала /sql run 'select ...', затем /dataviz на основе результата.
5. Как отладить, если валидатор OKLCH выдаёт ошибку?
Включите debug-режим: DEBUG=true /dataviz Pокажи .... Модель выведет промежуточные результаты валидации. Чаще всего проблема в том, что цвет фона (по умолчанию белый) имеет контраст <4.5:1 с тёмным текстом — тогда модель сама подбирает фон.
Резюме (без занудства)
/dataviz — не игрушка, а зрелый инструмент, который экономит часы при подготовке отчётов и дашбордов. Главное — не пытайтесь его обмануть. Он не нарисует радугу, не построит 3D-дичь и не даст повесить 15 цветов на одну легенду. И это прекрасно. Потому что когда я вижу сгенерированный Claude Code график с палитрой OKLCH, который прошёл валидацию — я знаю, что он будет выглядеть одинаково хорошо и на MacBook с HDR, и на проекторе в переговорке.
Напоследок неочевидный совет: если вы автоматизируете визуализацию в CI/CD (например, графики релизных метрик), добавьте вызов /dataviz в pre-commit hook. Пусть модель валидирует цвета до того, как график попадёт в документацию. Это спасёт вас от ситуации, когда продакт-менеджер указывает на нечитаемый синий на синем фоне. Примерно так, как мы заменили трёх контролёров ОТК — только теперь вместо контроля деталей контроль графиков.
