ДизайнерСредний
Описание для дизайн-системы
Документация компонента дизайн-системы
ChatGPTClaudeGemini207 копирований
Заполните переменные
Значения автоматически подставляются в текст промпта
Задокументируй компонент дизайн-системы:
**Компонент:** [компонент]
**Контекст:** [контекст]
Документация:
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**
Открыть в AI
Пример результата
Button
Описание
Кнопка — интерактивный элемент для выполнения действий. Используется для отправки форм, навигации и запуска процессов.
Когда использовать:
- ●Главное действие на странице
- ●Отправка форм
- ●Подтверждение действий
Когда НЕ использовать:
- ●Для навигации (используй Link)
- ●Для второстепенных действий (используй TextButton)
Анатомия
┌─────────────────────────┐
│ [icon] Label [icon] │
└─────────────────────────┘
↑ ↑
Leading icon Trailing icon
(optional) (optional)Варианты
| Variant | Использование |
|---|---|
| Primary | Главное действие |
| Secondary | Второстепенное действие |
| Tertiary | Менее важное действие |
| Danger | Удаление, отмена |
Примеры применения
- дизайн-система
- документация
- компоненты
Дизайнер