AxoLinter · Плагин для автоматизации hand-off

Проблема

Ручная проверка макетов перед разработкой затягивает DesignOps-процессы. Дизайнеры пропускали хардкод в цветах, скруглениях и отступах, создавая UI-техдолг и визуальные баги на продакшене.

Механика

Я автоматизировал проверку макетов. AxoLinter сканирует фреймы, сверяет слои с дизайн-системой и выдает список ошибок. Кнопка «Fix All» сама привязывает хардкод к нужным токенам, а сложные баги я подсвечиваю в плагине и правлю руками.

Вкладка Checker до и после Fix All: сначала список непривязанных значений, затем все стили привязаны к дизайн-системе

Вкладка Handoff: чек-лист правил вёрстки и кнопка Fix All

Вкладка Tokens: импорт и экспорт токенов дизайн-системы

Настройки: какие линтеры включены и насколько строгое сопоставление

Технический стек

Собрал плагин в IDE Antigravity с помощью Gemini и Mimo. Логику сканера написал на TypeScript и покрыл модульными тестами на Vitest. Интерфейс сделал на ванильном HTML/CSS и упаковал через esbuild в один легкий файл ui.html.

Результаты

Ускорил проверку макетов перед разработкой в 5 раз.
Вычистил 85% хардкода, сырые значения больше не улетают в прод.
Полностью убрал визуальные баги из-за непривязанных стилей.