Описание для разработчика
Спецификация дизайна для передачи в разработку
Средний0 копирований51 просмотров
Заполните переменные
Значения автоматически подставляются в текст промпта
Промпт
Подготовь спецификацию дизайна:
**Компонент/Экран:** [компонент]
**Figma ссылка:** [ссылка]
Спецификация:
1. **Обзор**
- Что это
- Где используется
- Связанные компоненты
2. **Структура**
- Иерархия элементов
- Именование (BEM/atomic)
- Z-index слои
3. **Размеры и отступы**
| Элемент | Width | Height | Padding | Margin |
|---------|-------|--------|---------|--------|
4. **Типографика**
| Элемент | Font | Size | Weight | Line-height |
|---------|------|------|--------|-------------|
5. **Цвета**
| Элемент | State | Color token |
|---------|-------|-------------|
6. **Анимации**
- Что анимируется
- Duration
- Easing
7. **Адаптив**
- Breakpoints
- Изменения
8. **Состояния и логика**
9. **Edge cases**
Пример результата
## Спецификация: Модальное окно подтверждения
### Обзор
Модальное окно для подтверждения критических действий (удаление, отмена подписки).
### Структура
```
.modal-overlay
└── .modal
├── .modal__icon
├── .modal__title
├── .modal__description
└── .modal__actions
├── .btn--secondary
└── .btn--danger
```
### Размеры
| Элемент | Desktop | Mobile |
|---------|---------|--------|
| Modal width | 400px | 100% - 32px |
| Padding | 24px | 16px |
| Icon size | 48px | 40px |
| Gap между кнопками | 12px | 12px |
### Типографика
| Элемент | Token | Value |
|---------|-------|-------|
| Title | heading-md | 18px/600/24px |
| Description | body-sm | 14px/400/20px |...
Примеры применения
- •спецификация
- •handoff
- •разработка