Описание для дизайн-системы
Документация компонента дизайн-системы
Средний0 копирований113 просмотров
Заполните переменные
Значения автоматически подставляются в текст промпта
Промпт
Задокументируй компонент дизайн-системы:
**Компонент:** [компонент]
**Контекст:** [контекст]
Документация:
1. **Описание**
- Что это и зачем
- Когда использовать
- Когда НЕ использовать
2. **Анатомия**
- Составные части
- Обязательные/опциональные
- ASCII-схема
3. **Варианты (Variants)**
- Размеры
- Состояния
- Стили
4. **Состояния (States)**
- Default
- Hover
- Active
- Disabled
- Focus
- Error
5. **Props/Properties**
| Prop | Type | Default | Description |
|------|------|---------|-------------|
6. **Примеры использования**
7. **Accessibility**
- ARIA
- Keyboard navigation
- Screen readers
8. **Do's and Don'ts**
Пример результата
## Button
### Описание
Кнопка — интерактивный элемент для выполнения действий. Используется для отправки форм, навигации и запуска процессов.
**Когда использовать:**
- Главное действие на странице
- Отправка форм
- Подтверждение действий
**Когда НЕ использовать:**
- Для навигации (используй Link)
- Для второстепенных действий (используй TextButton)
### Анатомия
```
┌─────────────────────────┐
│ [icon] Label [icon] │
└─────────────────────────┘
↑ ↑
Leading icon Trailing icon
(optional) (optional)
```
### Варианты
| Variant | Использование |
|---------|---------------|
| Primary | Главное действие |
| Secondary | Второстепенное действие |
| Tertiary | Менее важное действие |
| Danger | Удаление, отмена |...
Примеры применения
- •дизайн-система
- •документация
- •компоненты