photoplaces/design_project/README.md

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