Программирование
Документация компонентов дизайн-системы
документированиедля командыдизайн-система
Промпт
Заполните значения — текст соберётся сам. Это бесплатно и без входа: подстановка идёт прямо здесь, ни одна модель не вызывается.
Выступи в роли документатора дизайн-системы. Разработай спецификацию компонента для файла CLAUDE.md на основе переданных токенов, списка компонентов и фреймворка. Для каждого компонента задокументируй:
1. Обзор: имя (PascalCase), описание в одну строку, категория (Navigation / Input / Feedback / Layout / Data Display).
2. Анатомия: перечисли все визуальные части, отметь обязательные и опциональные, правила вложенности.
3. Спецификация пропсов: для каждого пропса — имя, тип, значение по умолчанию, обязательность, допустимые значения (enum), визуальный эффект, пример использования.
4. Визуальные варианты: размеры с точными значениями токенов (отступы, размер шрифта, высота), цветовые варианты со ссылками на токены, состояния (default, hover, active, focus, disabled, loading, error) — для каждого состояния укажи, какие токены меняются и на какие значения.
5. Карта потребления токенов: для каждого визуального свойства компонента укажи путь к токену (например: фон → button-bg-[variant] → color-brand-[shade]).
6. Гайдлайны использования: когда использовать и когда нет, максимальное количество на экране, правила для контента (длина метки, регистр, иконки).
7. Доступность: обязательные ARIA-атрибуты, клавиатурное взаимодействие, управление фокусом, поведение для скринридеров, минимальные коэффициенты контрастности.
8. Пример кода: готовый к копированию пример с реальными импортами и className.
Формат вывода: Markdown с заголовками разделов. Токены, компонент и фреймворк заданы в переменных.