Документация

Начало работы
Гармония цвета в каждом пикселе

Техническое руководство по интеграции Хромали в ваш дизайн-процесс. Настройте калибровку, подключите плагин и обеспечьте идеальную колористическую точность за 5 минут.

Установить плагин Смотреть API
Фрагмент кода конфигурации токенов Хромали
Быстрый старт

Интеграция за 3 шага

Хромали спроектирована для бесшовной встройки в существующие CI/CD пайплайны. Вам не нужно менять рабочий процесс — мы подстраиваемся под ваши инструменты.

Наша система использует легковесный агент для мониторинга цветовых отклонений в реальном времени, не нагружая локальную машину дизайнера.

1. Инициализация

Создайте проект в панели управления и получите уникальный API-ключ.

2. Подключение

Установите CLI-инструмент или плагин для вашего редактора кода.

3. Калибровка

Запустите первый аудит и примените базовый ICC-профиль.

Установка плагина

Поддерживаемые среды: Figma, Sketch, VS Code и Webflow. Выберите ваш инструмент для установки.

⌘

Для macOS

Используйте Homebrew для установки агента Хромали. Это обеспечит доступ к системным цветам и профилям дисплея.

$ brew install chromali/tap/chromali-agent

⚡

Figma Plugin

Нативный плагин для Figma. Автоматически подтягивает токены и проверяет контрастность при изменении слоев.

Установить в Figma
⚙

NPM Package

Для веб-разработчиков. Библиотека для валидации CSS-переменных прямо в процессе сборки.

$ npm i @chromali/core

Интерфейс редактора токенов
Конфигурация

Создание первого токена

Токен в Хромали — это не просто HEX-код. Это объект, содержащий цветовое значение, метаданные профиля (ICC), контекст использования и правила доступности (WCAG).

Чтобы создать первый токен, перейдите в раздел "Design Tokens" и нажмите "Add New". Система предложит выбрать базовый профиль (sRGB, P3 или CMYK).

  • ✓ Автоматическая генерация теней
  • ✓ Проверка контраста по умолчанию
  • ✓ Версионирование изменений

Ссылки на API и интеграции

Программный доступ ко всем функциям платформы.

REST API

Полная документация по методам GET/POST для управления палитрами и профилями. Поддержка JSON и YAML.

Открыть Swagger Docs →

GraphQL

Гибкий запрос данных для сложных дизайн-систем. Получайте только те токены, которые нужны вашему компоненту.

Перейти в Sandbox →

Webhooks

Оповещения в Slack или Jira при обнаружении критических цветовых отклонений в продакшене.

Настроить события →

Нужна помощь с настройкой?

Наша команда инженеров поможет вам адаптировать Хромали под специфику вашего бренда и оборудования.

Связаться с техподдержкой