You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
23 KiB
23 KiB
План спринтов — Брендбук О!Клиника
Недельные спринты. Каждый спринт = 1 рабочая неделя. Базовая дата начала: уточняется при старте разработки.
Обозначения
- FE — задача фронтенда (Next.js)
- BE — задача бэкенда (NestJS + Prisma)
- DB — изменения схемы базы данных
- Design — дизайн-решения, требующие согласования
Sprint 1 — Инициализация проекта + страница «Логотип» ✅ ЗАВЕРШЁН
Цель: Рабочее окружение, monorepo, базовая архитектура, первая живая страница брендбука — «Логотип».
Задачи — инфраструктура
- FE: Инициализация Next.js 16 (App Router, Tailwind 4, TypeScript) в
apps/web - BE: Инициализация NestJS 11 в
apps/api - DB: PostgreSQL 16 + Prisma 7, схема User + ExperimentalComponent
- Настройка Docker Compose (порт 5433 — 5432 занят на хосте)
- Настройка monorepo (pnpm workspaces)
- Создание
.env.example - Git: создание веток
developиsprint/1, подключён remote git.pirogov.ai - FE: Layout с боковой навигацией (все разделы, статус «скоро»)
- FE: Fira Sans подключён через next/font/google, CSS-токены бренда в globals.css
Задачи — страница «Логотип»
- Design: PNG логотипа извлечён из PDF программно (PyMuPDF + Pillow)
- FE: Прозрачная версия логотипа (удалён белый фон через numpy)
- FE: Страница
/foundation/logo - FE: Иерархия версий (Основной / Общий) с реальным изображением из PDF
- FE: Цветовые варианты: светлый / инвертированный (CSS filter) / на форме
- FE: Охранная зона с визуализацией отступов
- FE: Таблица минимальных размеров (до 46 р. и от 48 р.)
- FE: 6 правил недопустимого использования
- FE: Placeholder «Скачать вектор» (кнопка неактивна)
Фактические результаты
- Брендбук запущен локально на
http://localhost:3001 - Название клиники исправлено: «Клиника ухо, горло, нос им. проф. Е.Н.Оленевой»
- Инвертированный логотип корректно отображается (белый на тёмном фоне)
Технические решения Sprint 1
- PostgreSQL запущен на порту 5433 (5432 занят на хосте)
- Логотип хранится как PNG с прозрачным фоном (
public/logo/logo-transparent.png) - Инверсия логотипа: CSS
filter: brightness(0) invert(1)на прозрачном PNG - Next.js запускается на порту 3001 (3000 занят на хосте)
Sprint 2 — Цвета, типографика и оффлайн элементы (Brand Foundation) ✅ ЗАВЕРШЁН
Цель: Секция «Фундамент бренда» — цвета, оба шрифта, а также первый оффлайн-раздел.
Задачи — цвета
- Design: Зафиксировать HEX-эквиваленты всех цветов бренда (053M, 073M, 066M, 050M, 081M, 080M)
- FE: Создать CSS-переменные / дизайн-токены для всей цветовой палитры
- FE: Страница «Цвета» — палитра с кодами Oracal/Pantone, HEX, RGB, HSL, копирование в клик
- FE: Проверка контрастности пар цветов (WCAG AA/AAA)
- FE: Экспорт токенов в JSON (Figma-compatible)
Задачи — типографика
- FE: Страница «Типографика» — раздел DINPro (бренд/оффлайн) + раздел Fira Sans (веб)
- FE: Шкала размеров для обоих шрифтов: h1–h6, body, caption, label, overline
- FE: Чёткое указание: где DINPro, где Fira Sans
- FE: Живые примеры текста обоими шрифтами
Задачи — оффлайн элементы (справочный раздел)
- FE: Раздел «Оффлайн элементы» в навигации брендбука
- FE: Страница «Форма сотрудников» — схема размещения логотипа, таблица размеров
- FE: Страница «Бейджи» — размеры 70×30 мм, варианты (светлый/тёмный), состав текста
- FE: Страница «Внутренняя навигация» — шаблоны табличек, материалы, цвета Oracal
- FE: Страница «Брендирование транспорта» — макет трамвая, цветовая схема
- FE: Страница «Печатные материалы» — листовки, визитки, Telegram-бот
Фактические результаты
- Страница
/foundation/colors— 7 цветов с HEX/RGB/HSL/CSS-var и копированием, WCAG-контраст 7 пар, экспорт JSON - Страница
/foundation/typography— DINPro (оффлайн) + Fira Sans (веб), таблица применения, полные шкалы, живой пример - Страница
/offline/uniform— реальные фото из PDF (беж + синий вариант), таблица размеров, правила - Страница
/offline/badges— реальные фото из PDF (лицевая + оборотная), состав текста, пример - Страница
/offline/navigation— макеты из PDF (Кабинет 04, карточка врача), фото дверей с номерами (13, 31), указатели по этажам - Страница
/offline/transport— макет трамвая из PDF (оба вида, реальный рендер), таблица зон, цвета Oracal - Страница
/offline/print— убрана из навигации (нет данных из брендбука) - Sidebar: убраны «скоро» для Цветов, Типографики и всех страниц Оффлайн кроме Печати
- Версия обновлена до Sprint 2 · v0.2.0
- Деплой на Vercel: https://web-oclinica.vercel.app (production, бесплатно)
- Тайтлы страниц: единый формат «Раздел. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой»
Технические решения Sprint 2
- Страница «Цвета» —
"use client"для clipboard API и экспорта JSON - WCAG relative luminance вычисляется на клиенте, без зависимостей
- DINPro отображается с фоллбэком Arial (лицензионный шрифт)
- Реальные фото и макеты из PDF: PyMuPDF (fitz) — извлечение растровых изображений и рендер векторных страниц
- Рендер PDF страниц: 2.5–3.0x масштаб → JPEG, кроп до нужной области через Pillow
Ретроспектива Sprint 2 — LLM-контекст
- Docs: Создан
docs/LLM_CONTEXT.md— сводный файл дизайн-данных для LLM (v2.1) - TZ: Добавлено требование ФТ-03-LLM — LLM-блок на каждой странице брендбука
- FE: Добавить LLM-блоки на страницы Sprint 1–2 (логотип, цвета, типографика, оффлайн) — перенесено в Sprint 3
Результат спринта: Разделы «Цвета», «Типографика» и «Оффлайн элементы» полностью готовы с реальными материалами из брендбука.
Sprint 3 — Базовые компоненты: кнопки и поля ввода ✅ ЗАВЕРШЁН
Цель: Все варианты кнопок и форм-контролов в брендбуке. LLM-блоки на страницах.
Задачи — LLM-контекст
- FE: Добавить LLM-блок на страницу «Логотип» (
/foundation/logo) — v1.0 - FE: Добавить LLM-блок на страницу «Цвета» (
/foundation/colors) — v2.1 - FE: Добавить LLM-блок на страницу «Типографика» (
/foundation/typography) — v2.0 - FE: Создать переиспользуемый компонент
components/llm/LlmBlock.tsx(LlmBlock, LlmSection, LlmTable, LlmRules) - Docs: Обновить
docs/LLM_CONTEXT.mdпо итогам спринта — версия 3.0
Задачи — компоненты
- FE: Компонент Button (
components/ui/Button.tsx) — варианты primary/outline/teal/pill, размеры sm/md/lg, loading - FE: Компонент Input (
.bb-input) — text, password, focus/error/disabled, height 50px как на сайте - FE: Компонент Textarea (
.bb-textarea) — resize:vertical, min-height 100px - FE: Компонент Select (
.bb-select) — height 50px, кастомная стрелка SVG - FE: Компонент Checkbox (
.bb-checkbox) и Radio (.bb-radio) - FE: Компонент Toggle/Switch (
components/ui/Toggle.tsx) — React "use client", defaultChecked/disabled/label - FE: Страница
/components/buttons— 4 варианта по реальному сайту, размеры, состояния, «Где применяется», LLM-блок v2.0 - FE: Страница
/components/forms— все 6 контролов, контекст на сайте с макетом, LLM-блок v2.0 - FE: Копирование HTML/CSS кода в один клик (
components/ui/CodeCopy.tsx)
Фактические результаты
- 4 варианта кнопок — скопированы с реального сайта perm.oclinica.ru: primary(#FFA39C), outline(#BF9975), teal(#60959c), pill(#e9e4d4)
- 6 форм-контролов — input/textarea/select/checkbox/radio/toggle с полной документацией состояний
- Input/Select — height 50px, border 1px solid #ccc, border-radius 4px (entityform CSS с реального сайта)
- Макет формы на фоне #b8e6ed как «Узнайте стоимость операции» на oclinica.ru/lor
- LLM-блоки добавлены на логотип, цвета, типографику, кнопки, форм-контролы
- Компоненты: Button.tsx, Toggle.tsx, CodeCopy.tsx в
components/ui/ - Sidebar: Sprint 3 · v0.3.0, кнопки/формы убраны из «скоро»
- Деплой: https://web-oclinica.vercel.app (production)
Результат спринта: Раздел «Базовые компоненты» полностью готов. Стили соответствуют реальному сайту.
Sprint 4 — Карточки (Cards)
Цель: Все типы карточек, используемых на сайте.
Задачи
- Docs: Обновить
docs/LLM_CONTEXT.md— добавить спецификации карточек - FE: Добавить LLM-блок на страницу «Карточки»
- FE: Карточка врача (DoctorCard) — фото, имя, специализация, кнопка записи
- FE: Карточка услуги / заболевания
- FE: Карточка новости — превью, дата, заголовок, анонс, читать далее
- FE: Карточка отзыва — автор, текст, рейтинг (звёзды), дата
- FE: Карточка цены — услуга, стоимость, описание
- FE: Бейджи, теги, алерты (inline и toast)
- FE: Страница «Компоненты → Карточки» с документацией
Результат спринта: Все карточки задокументированы и показаны в брендбуке.
Sprint 5 — Hero-блок и CEO-текст
Цель: Ключевые верхние блоки страниц.
Задачи
- Docs: Обновить
docs/LLM_CONTEXT.md— добавить спецификации Hero и CEO-блоков - FE: Добавить LLM-блоки на страницы Hero и CEO-текст
- FE: Hero-блок вариант 1 — фон + заголовок + CTA
- FE: Hero-блок вариант 2 — иллюстрация сбоку
- FE: Hero-блок вариант 3 — с встроенной формой записи
- FE: Блок CEO-текст — фото руководителя, цитата, подпись
- FE: Блок «Преимущества клиники» — иконки + текст
- FE: Страница «Блоки → Hero и вступление»
- Design: Согласование вариантов Hero под разные страницы
Результат спринта: Hero и CEO-секция полностью задокументированы.
Sprint 6 — Врачи и профиль врача
Цель: Блоки и компоненты, связанные с врачами.
Задачи
- Docs: Обновить
docs/LLM_CONTEXT.md— добавить спецификации блоков врачей - FE: Добавить LLM-блок на страницу «Блоки → Врачи»
- FE: Блок «Наши врачи» — сетка карточек с фильтром по специализации
- FE: Блок «Врач — профиль» (полная страница): фото, биография, специализации, расписание
- FE: Компонент «Расписание / слоты записи»
- FE: Компонент навигации (header menu, breadcrumbs)
- FE: Пагинация
- FE: Страница «Блоки → Врачи»
Результат спринта: Все блоки о врачах готовы.
Sprint 7 — Отзывы и новости
Цель: Контентные блоки сайта.
Задачи
- Docs: Обновить
docs/LLM_CONTEXT.md— добавить спецификации блоков отзывов и новостей - FE: Добавить LLM-блок на страницу «Блоки → Отзывы и новости»
- FE: Блок отзывов — карусель
- FE: Блок отзывов — статичная сетка
- FE: Блок рейтинга (звёзды + количество отзывов)
- FE: Блок новостей — сетка превью (3 в ряд)
- FE: Блок новостей — горизонтальный список
- FE: Блок «Последние новости» для сайдбара
- FE: Блок услуг / заболеваний — иконки + список
- FE: Страница «Блоки → Отзывы и новости»
Результат спринта: Контентные блоки задокументированы.
Sprint 8 — Формы контакта и модальные окна
Цель: Все формы и диалоги взаимодействия с пациентом.
Задачи
- Docs: Обновить
docs/LLM_CONTEXT.md— добавить спецификации форм и модальных окон - FE: Добавить LLM-блок на страницу «Блоки → Формы и контакты»
- FE: Форма записи — короткая (имя, телефон)
- FE: Форма записи — расширенная (имя, телефон, специализация, врач, дата)
- FE: Форма записи в модальном окне
- FE: Контактная форма (имя, email, сообщение)
- FE: Блок «Контакт» — карта + адрес + часы работы
- FE: Модальное окно — информационное
- FE: Модальное окно — подтверждение
- FE: Страница «Блоки → Формы и контакты»
Результат спринта: Все формы и диалоги готовы.
Sprint 9 — Страницы: Главная и Заболевание
Цель: Первые две полноразмерные страницы в брендбуке.
Задачи
- FE: Страница «Главная» — сборка из утверждённых блоков
- FE: Страница «Заболевание» — Hero (мини), описание, врачи по теме, форма
- FE: Раздел «Страницы» в навигации брендбука
- FE: Адаптивность страниц (desktop / tablet / mobile)
- Design: Ревью и согласование страниц
Результат спринта: 2 страницы задокументированы в брендбуке.
Sprint 10 — Страницы: Врачи, Врач, Цены
Цель: Три страницы с ключевым контентом.
Задачи
- FE: Страница «Все врачи» — фильтры, сетка, пагинация
- FE: Страница «Врач (профиль)»
- FE: Страница «Цены» — фильтры, таблица, форма
- FE: Таблица цен с сортировкой
- FE: Адаптивность всех трёх страниц
- Design: Ревью страниц
Результат спринта: Ещё 3 страницы в брендбуке.
Sprint 11 — Страница Контакты и Экспериментальная секция (MVP)
Цель: Последняя страница + запуск механизма экспериментов.
Задачи
- FE: Страница «Контакты»
- BE + DB: Модели
Component,Page,Blockв Prisma - BE: CRUD API для компонентов (
/api/components) - BE: CRUD API для страниц (
/api/pages) - FE: Секция «Эксперименты» в брендбуке
- FE: Форма создания нового экспериментального компонента
- FE: Список экспериментальных компонентов со статусами
Результат спринта: Все страницы готовы, эксперименты — базовый функционал.
Sprint 12 — Полировка, финальный деплой и документация
Цель: Финальный релиз. Фронтенд уже живёт на Vercel с Sprint 2, Sprint 12 — финальная полировка и production-готовность бэкенда.
Задачи
- BE + FE: Полный smoke-тест всего брендбука
- FE: Мобильная адаптация — финальная проверка всех страниц
- FE: Accessibility-аудит (WCAG AA)
- Деплой BE: выбрать и настроить хостинг для NestJS + PostgreSQL
- Деплой: настроить автоматический деплой через Gitea Actions → Vercel (при пуше в
main) - Docs: Обновление
docs/DEPLOY.mdфинальными инструкциями - Design: Финальный ревью брендбука
Текущий статус деплоя
- Фронтенд: https://web-oclinica.vercel.app (Vercel Hobby, задеплоен в Sprint 2)
- Команда деплоя:
cd apps/web && vercel --prod --yes - Бэкенд: локально (Docker Compose), хостинг выбирается в Sprint 12
Результат спринта: Брендбук полностью готов, оба сервиса задеплоены, автодеплой настроен.
Сводная таблица
| Спринт | Тема | Ключевой результат |
|---|---|---|
| 1 | Инициализация + Логотип | Брендбук запускается, страница Логотипа готова |
| 2 | Цвета, Типографика, Оффлайн элементы | Фундамент + оффлайн раздел готовы |
| 3 | Кнопки и форм-контролы | Базовые компоненты готовы |
| 4 | Карточки | Все карточки задокументированы |
| 5 | Hero и CEO-текст | Ключевые блоки страниц готовы |
| 6 | Врачи | Блоки о врачах готовы |
| 7 | Отзывы и новости | Контентные блоки готовы |
| 8 | Формы и модальные окна | Все формы задокументированы |
| 9 | Страницы: Главная, Заболевание | 2 страницы в брендбуке |
| 10 | Страницы: Врачи, Цены | 3 страницы в брендбуке |
| 11 | Контакты + Эксперименты MVP | Все страницы + система экспериментов |
| 12 | Деплой и полировка | Брендбук живёт в продакшне |
Backlog (вне основных спринтов)
- Тёмная тема
- Экспорт компонентов в Figma
- Drag-and-drop конструктор страниц
- История версий экспериментальных компонентов
- Мультиязычность (если потребуется)
- Раздел «Логотип»: активация кнопки скачивания SVG (после получения вектора)