Какие преимущества и недостатки написания собственного UI kit?

Что проверяют

Способны ли вы принять инженерное решение с учётом стоимости, а не из любви к своему коду. Следом обычно спрашивают, что бы вы выбрали для конкретного проекта и есть ли промежуточный вариант.

Как отвечать

Покажите, что вариантов три, а не два: готовая библиотека со своим дизайном (Ant Design, Vuetify), headless-примитивы без стилей (Radix, React Aria, Headless UI) с вашей стилизацией и полностью свой набор. Средний путь сейчас самый популярный: shadcn/ui копирует в проект компоненты на Radix, и дальше вы правите их как свои.

Плюсы своего UI kit:

• точное соответствие дизайн-системе: токены цветов, отступов и типографики из макетов ложатся один в один, без войны с чужими стилями и !important;
• размер бандла: в сборку попадает только нужное;
• контроль над API и обновлениями: мажорная версия чужой библиотеки не ломает полпродукта.

Минусы обычно весомее:

• доступность: фокус, клавиатурная навигация, ARIA-атрибуты, ловушка фокуса в модалке, работа со скринридером. Для Select, Combobox или выбора даты это недели работы, поэтому доступность чаще берут у headless-библиотеки;
• стоимость поддержки: документация (обычно Storybook), визуальные регрессионные тесты, версионирование и публикация пакета, миграции для команд-потребителей;
• владелец: без ответственных кит быстро расходится с макетами и обрастает копиями компонентов в продуктовых репозиториях.

Вывод формулируйте через условие: свой кит оправдан, когда есть дизайн-система, несколько продуктов на ней и люди на поддержку. Одному продукту с небольшой командой разумнее взять готовую или headless-библиотеку и настроить тему.

Где спотыкаются

Сводят преимущество к уникальному дизайну. Уникальный вид даёт и темизация готовой библиотеки, аргумент должен быть про масштаб и контроль.

Забывают про доступность целиком. Самописный выпадающий список на div без ролей и управления фокусом это главная причина, почему своё выходит хуже готового.

Спорят в режиме «всё своё или всё чужое» и не знают промежуточных вариантов вроде headless-библиотек.