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.
25 KiB
25 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→ версия 4.0 - FE: Добавить LLM-блок на страницу «Карточки» — v1.0
- FE: Карточка врача (DoctorCard) — фото 110×160px, имя, специализация, стаж, кнопка outline
- FE: Карточка услуги / заболевания (ServiceCard) — иконка + заголовок + описание
- FE: Карточка новости — превью, дата, заголовок, анонс, hover #eef4d1 (CSS сайта)
- FE: Карточка отзыва — рейтинг SVG-звёзды, 4-строчный clamp, фон #eef4d1
- FE: Карточка цены — услуга + стоимость + highlighted-вариант
- FE: Бейджи (6 вариантов), теги (default/active), алерты (info/success/warning/error)
- FE: Страница
/components/cardsс документацией и LLM-блоком
Фактические результаты
- 5 типов карточек: DoctorCard, NewsCard, ReviewCard, PriceCard, ServiceCard
- NewsCard hover — bg
#eef4d1+ box-shadow0 0 16px #9e9e9a(1:1 с реальным CSS сайта) - ReviewCard — фон
#eef4d1из CSS сайта, WebkitLineClamp: 4 - Бейджи — 6 вариантов (primary/success/warning/danger/neutral/outline-blue)
- Алерты — info (#dff0fa), success (#d1fae5), warning (#fef3c7), error (#fee2e2)
- Исправлены цвета Oracal — точные RGB из каталога для всех 6 плёнок
- Деплой: https://web-oclinica.vercel.app (production)
Результат спринта: Все карточки задокументированы. Цвета Oracal исправлены по каталогу.
Принцип документирования (Sprint 5+)
Правило: Брендбук документирует только то, что реально существует на сайте
perm.oclinica.ru. Никаких придуманных вариантов, никаких новых стилей. Процесс: сначала изучаем реальный сайт → потом воспроизводим в брендбуке.
Sprint 5 — Шапка (Header) и навигация
Цель: Задокументировать реальную шапку сайта perm.oclinica.ru/lor как она есть.
Задачи
- Research: Изучить реальную шапку сайта — скриншот, CSS, HTML
- FE: Страница
/components/navigation— документация реальной навигации сайта- Логотип в шапке (размер, положение)
- Главное меню: Клиника, ЛОР врачи, Заболевания, Вопрос-ответ, ЛОР операции, Сурдология, Цены, Контакты
- Телефоны в шапке
- Кнопки «Записаться на прием» и «Заказать звонок» (цвета, стили взятые из CSS)
- FE: Убрать
soonу/components/navigationв Sidebar - FE: Добавить LLM-блок v1.0
- Docs: Обновить
docs/LLM_CONTEXT.md— секция Navigation
Результат спринта: Шапка и навигация задокументированы по реальному сайту.
Sprint 6 — Hero-баннер и блок преимуществ
Цель: Задокументировать реальный баннер страницы /lor и блок преимуществ — ровно так, как они есть.
Задачи
- Research: Скриншот + CSS баннера с perm.oclinica.ru/lor
- FE: Страница
/blocks/hero— реальный баннер:- Фото врача-хирурга на фоне #b8e6ed
- Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
- 3 преимущества (безопасность, без внешних разрезов, скорость восстановления)
- Кнопка «Узнать стоимость операции» (primary #FFA39C)
- FE: Блок «Преимущества клиники» на той же странице:
- 4 иконки + текст: кандидаты наук, оборудование, династия врачей, количество пациентов
- FE: Добавить LLM-блок v1.0
- Docs: Обновить
docs/LLM_CONTEXT.md
Результат спринта: Hero и блок преимуществ задокументированы по реальному сайту.
Sprint 7 — Вводный текст (CEO-блок) и блок услуг
Цель: Задокументировать вводный текст от клиники и блок заболеваний/услуг.
Задачи
- Research: Изучить вводный текст на /lor (секция после баннера) — структура, стили
- FE: Страница
/blocks/ceo— вводный текст:- Структура секции (заголовок, описание специализации, вопросы-стимулы)
- Типографика, цвета, отступы — взятые с реального сайта
- Research: Блок заболеваний / услуг — как выглядит список (иконки/текст/карточки?)
- FE: Блок «Услуги и заболевания» на странице
/blocks/services - FE: Добавить LLM-блоки v1.0
- Docs: Обновить
docs/LLM_CONTEXT.md
Результат спринта: Вводный блок и услуги задокументированы по реальному сайту.
Sprint 8 — Врачи: блок на главной + страница списка
Цель: Задокументировать все блоки, связанные с врачами, по реальному сайту /lor/doctors.
Задачи
- Research: Изучить страницу perm.oclinica.ru/lor/doctors — CSS, HTML, скриншоты
- FE: Страница
/blocks/doctors— блок «Наши врачи»:- Сетка карточек врачей (реальная вёрстка с сайта)
- Фильтры: по адресу клиники, стоимости приёма, стажу, специализации
- Пагинация — если есть на сайте
- FE: Страница
/pages/doctors— полная страница врачей как сборка блоков - FE: Добавить LLM-блоки v1.0
- Docs: Обновить
docs/LLM_CONTEXT.md
Результат спринта: Все компоненты страницы врачей задокументированы.
Sprint 9 — Отзывы и новости
Цель: Задокументировать блоки отзывов и новостей — только то, что реально на сайте.
Задачи
- Research: Изучить блок отзывов на /lor — реальная вёрстка (список? карусель? что именно?)
- Research: Изучить страницу /lor/news — структура списка новостей
- FE: Страница
/blocks/reviews— блок отзывов как на сайте - FE: Страница
/blocks/news— блок новостей как на сайте (список с датами + пагинация) - FE: Добавить LLM-блоки v1.0
- Docs: Обновить
docs/LLM_CONTEXT.md
Результат спринта: Блоки отзывов и новостей задокументированы по реальному сайту.
Sprint 10 — Формы записи и контакт
Цель: Задокументировать реальные формы и блок контактов.
Задачи
- Research: Модальная форма записи на приём — реальная с сайта (структура, поля, стили)
- Research: Блок «Контакт» — адрес, телефоны, карта, часы работы
- FE: Страница
/blocks/contact-forms— форма записи (реальная с сайта) - FE: Страница
/blocks/contact— блок контактной информации - FE: Добавить LLM-блоки v1.0
- Docs: Обновить
docs/LLM_CONTEXT.md
Результат спринта: Формы и контакт задокументированы по реальному сайту.
Sprint 11 — Страницы: Заболевание + Главная (сборки)
Цель: Задокументировать полные страницы как сборки из задокументированных блоков.
Задачи
- Research: Выбрать реальную страницу заболевания (напр. /lor/rinit) — изучить все её блоки
- FE: Страница
/pages/disease— сборка блоков по реальной странице заболевания - FE: Страница
/pages/home— сборка блоков по главной странице /lor - FE: Раздел «Страницы» в навигации — убрать soon
- Docs: Обновить
docs/LLM_CONTEXT.md
Результат спринта: 2 реальные страницы задокументированы в брендбуке.
Sprint 12 — Страницы: Цены + Контакты
Цель: Задокументировать страницы цен и контактов.
Задачи
- Research: Реальная страница цен на сайте — структура, таблица, фильтры
- Research: Реальная страница контактов — карта, адреса, часы, схема проезда
- FE: Страница
/pages/prices— по реальной странице цен - FE: Страница
/pages/contacts— по реальной странице контактов - FE: Полный smoke-тест брендбука
- Docs: Финальное обновление
docs/LLM_CONTEXT.md
Текущий статус деплоя
- Фронтенд: https://web-oclinica.vercel.app (Vercel Hobby, задеплоен в Sprint 2)
- Команда деплоя:
cd apps/web && vercel --prod --yes - Бэкенд: локально (Docker Compose), хостинг выбирается позднее
Результат спринта: Брендбук полностью задокументирован по реальному сайту.
Сводная таблица
| Спринт | Тема | Источник |
|---|---|---|
| 1 | Инициализация + Логотип | PDF брендбука |
| 2 | Цвета, Типографика, Оффлайн элементы | PDF брендбука + Oracal каталог |
| 3 | Кнопки и форм-контролы | CSS реального сайта perm.oclinica.ru |
| 4 | Карточки | CSS реального сайта perm.oclinica.ru |
| 5 | Шапка и навигация | Реальная шапка perm.oclinica.ru |
| 6 | Hero-баннер + Преимущества | Реальная страница /lor |
| 7 | Вводный текст + Услуги | Реальные блоки /lor |
| 8 | Врачи | Реальная страница /lor/doctors |
| 9 | Отзывы и Новости | Реальные блоки /lor + /lor/news |
| 10 | Формы записи + Контакт | Реальные формы и контакты с сайта |
| 11 | Страницы: Заболевание + Главная | Сборки по реальным страницам |
| 12 | Страницы: Цены + Контакты | Реальные страницы + финальный smoke |
Backlog (вне основных спринтов)
- Раздел «Логотип»: активация кнопки скачивания SVG (после получения вектора)
- Экспериментальная секция — если потребуется CRUD API (NestJS + Prisma)
- Тёмная тема — только если появится на реальном сайте
- Мультиязычность — только если появится на реальном сайте