# Design Project — PhotoPlaces

> Документация текущего стиля (first_style) и навык для генерации дизайн-систем.

## Структура проекта

```
design_project/
├── README.md                                  # Этот файл
└── photoplaces_first_style-design-system.md   # Текущий стиль (документация)
```

## photoplaces_first_style — Текущий стиль

Документация того, что уже реализовано в коде:

| Раздел | Содержимое |
|--------|------------|
| Архитектура | Tailwind-only, без модульного CSS |
| Цвета | Тёмная тема, зелёный brand (`#22c55e`) |
| Шрифт | Системный стек (-apple-system, Segoe UI) |
| Паттерны | Стандартные инпуты, кнопки, модалки |
| Компоненты | Header, Modal, Card, Badge, Admin |

### Ключевые особенности
- **Glassmorphism** — `bg-white/10 backdrop-blur-md`
- **Brand-цвет** — зелёный (`#22c55e`)
- **Тёмная тема** — `#060606` → `#0f172a` → `#1e293b`
- **Стандартный инпут** — `border-white/10 bg-white/5 focus:border-green-500`

## Навык design-system-generator

Навык для генерации дизайн-систем位于 `.opencode/skills/design-system-generator/SKILL.md`.

### Назначение
Генерирует полные дизайн-системы для проектов:
- Анализ текущего кода (цвета, компоненты, стили)
- Цветовая палитра (primary, secondary, accent, neutrals, functional)
- Типографика (шрифты, размеры, иерархия)
- Сетка и отступы (grid, spacing, breakpoints)
- Компоненты (Button, Input, Card, Modal, Badge, Toast, Tabs)
- Анимации и переходы (durations, easings, keyframes)
- Правила и принципы дизайна
- Токены для Figma (JSON)
- CSS-переменные (light/dark темы)
- Tailwind config

### Использование
Навык активируется автоматически при запросах на генерацию дизайн-систем.

## Использование

### Для дизайнеров (Figma)
1. Импортируй JSON-токены через Tokens Studio
2. Все цвета, типографика и отступы автоматически создадутся как variables

### Для разработчиков
1. Скопируй CSS-переменные в `globals.css`
2. Используй Tailwind config из раздела 10
3. Применяй Tailwind-классы из описания компонентов

### Для нетехнических людей
- Читай разделы "Описание" и "Рекомендации" для понимания логики дизайна

## Контакты

- Проект: PhotoPlaces
- Дата создания: 02.07.2026
- Версия: 1.1