arazor72
/
brand_book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Цифровой бренд бук клиники. Описание элементов сайта: цвета, шрифты, блоки, формы, страницы
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.
30 Commits
7 Branches
0 Tags
7.7 MiB
 
 
 
Tree: 52f04f9f5d
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '52f04f9f5d'
${ noResults }
brand_book/docs/SPRINTS.md

26 KiB
Raw Blame History

План спринтов — Брендбук О!Клиника

Недельные спринты. Каждый спринт = 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-shadow 0 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 — Все блоки текущего сайта

Цель: Задокументировать ВСЕ блоки страницы perm.oclinica.ru/lor за один спринт. Источник: скриншот страницы + CSS сайта.

Блоки с реального сайта (сверху вниз)

Шапка и навигация → /components/navigation

  • FE: Топ-бар: адрес «Б. Цитная, 3», ссылки на разделы, телефон /342/ 255-53-84, кнопка «Заказать звонок» (pill)
  • FE: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н. ОЛЕНЕВОЙ»
  • FE: Главное меню: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты
  • FE: Убрать soon у /components/navigation в Sidebar

Hero-баннер → /blocks/hero

  • FE: Левая часть: белый блок, заголовок «ЭНДОСКОПИЧЕСКОЕ...», 3 пункта с галочками, кнопка «Узнать стоимость операции» (primary)
  • FE: Правая часть: фото врача, фон #b8e6ed
  • FE: Под баннером: кнопки соцсетей + счётчик просмотров

Вводный текст (CEO-блок) → /blocks/ceo

  • FE: Текст специализации клиники, вопросы-стимулы в формате Q&A (— У вас болит ухо?...)

Блок врачей → /blocks/doctors

  • FE: Заголовок «Приём ведут опытные ЛОР врачи»
  • FE: 3 стат-блока: «Ежедневно 27 врачей», «6 кандидатов наук», «Свыше 12 000 операций»
  • FE: Сетка карточек врачей (6 штук)

Блок отзывов → /blocks/reviews

  • FE: Заголовок «Отзывы о нас», подзаголовок
  • FE: Карусель: большая кавычка, текст отзыва, ссылка «Читать отзыв полностью», стрелки

Форма записи «Будьте здоровы!» → /blocks/contact-forms

  • FE: Фон #b8e6ed (бирюзовый), заголовок, поля: имя / телефон / выбор врача (select), чекбокс согласия, кнопка «Запишите меня!»

Форма «Узнайте стоимость операции» → на той же странице /blocks/contact-forms

  • FE: Белый фон, заголовок, поля: имя / телефон, чекбокс, кнопка «Перезвоните мне»

Блок новостей → /blocks/news

  • FE: Заголовок «Новости», 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости»

Footer (подвал) → /blocks/contact

  • FE: 4 колонки ссылок: О клинике / Заболевания / Вопрос-ответ / Операции
  • FE: Логотип внизу, адрес «Пермь, ул. Г. Звезда», иконки соцсетей, часы работы

Общее

  • FE: Добавить LLM-блоки v1.0 на каждую страницу блоков
  • FE: Убрать soon у всех блоков в Sidebar
  • Docs: Обновить docs/LLM_CONTEXT.md — секции по всем блокам

Результат спринта: Все блоки текущего сайта задокументированы.

Sprint 6 — Страницы (сборки из блоков)

Цель: Задокументировать полные страницы как сборки уже готовых блоков.

Задачи

  • Research: Изучить реальную страницу заболевания (напр. perm.oclinica.ru/lor/rinit) — какие блоки там, в каком порядке
  • Research: Изучить страницу /lor/doctors — фильтры, сетка, пагинация
  • FE: Страница /pages/home — полная главная (сборка блоков Sprint 5)
  • FE: Страница /pages/disease — страница заболевания (сборка по реальной /lor/rinit)
  • FE: Страница /pages/doctors — страница врачей с фильтрами и пагинацией
  • FE: Убрать soon у страниц в Sidebar
  • Docs: Обновить docs/LLM_CONTEXT.md

Результат спринта: 3 полные страницы задокументированы в брендбуке.

Sprint 7 — Дублирование компонентов и блоков

Цель: Возможность создавать дубли существующих компонентов и блоков для адаптации под конкретные страницы или разделы.

Концепция

Каждый задокументированный блок/компонент можно «продублировать» — получить копию с другим наполнением (другой врач, другое заболевание, другие тексты). Дубль хранится как вариант и отображается рядом с оригиналом.

Задачи

  • Design: Определить UI «дублирования» — кнопка Duplicate на каждой карточке блока/компонента
  • FE: Компонент DuplicateCard — обёртка над блоком с пометкой «Вариант» и именем
  • FE: На страницах компонентов (buttons, forms, cards) — кнопка «+ Создать вариант»
  • FE: Секция «Варианты» на каждой странице блока — список дублей с метками
  • FE: Статические варианты блоков (задаются в коде, не CRUD): например, Hero для раздела Аллергология
  • Docs: Обновить docs/LLM_CONTEXT.md — описание системы вариантов

Результат спринта: Система вариантов/дублей для компонентов и блоков.

Sprint 8 — Дублирование страниц

Цель: Возможность создавать дубли страниц — шаблон одной страницы адаптируется под другой раздел клиники (ЛОР → Аллергология → Сурдология).

Концепция

Страница заболевания для ЛОР-раздела — это шаблон. Аллергология использует те же блоки, но с другим контентом. Брендбук показывает этот шаблон и его варианты.

Задачи

  • Design: Определить структуру шаблона страницы — какие блоки обязательны, какие опциональны
  • FE: На странице /pages/disease — секция «Варианты этой страницы» с примерами для разных разделов
  • FE: Страница /pages/home — варианты для Аллергологии (другой Hero, другой CEO-текст)
  • FE: Компонент PageTemplate — отображение структуры страницы как схемы блоков
  • Docs: Обновить docs/LLM_CONTEXT.md — шаблоны страниц

Результат спринта: Шаблонная система страниц, варианты для разных разделов сайта.

Sprint 9 — Оставшиеся страницы: Цены, Контакты, Врач

Цель: Задокументировать оставшиеся страницы.

Задачи

  • Research: Реальная страница цен — структура таблицы, фильтры
  • Research: Реальная страница контактов — карта, адреса клиник, часы, схема проезда
  • Research: Страница профиля врача — структура, блоки
  • FE: Страница /pages/prices
  • FE: Страница /pages/contacts
  • FE: Страница /pages/doctor
  • Docs: Финальное обновление docs/LLM_CONTEXT.md

Результат спринта: Все страницы брендбука задокументированы.

Sprint 10 — Финальная полировка и деплой

Цель: Финальный релиз.

Задачи

  • FE: Полный smoke-тест всего брендбука
  • FE: LLM-блоки на всех страницах — проверка актуальности
  • FE: Мобильная адаптация — финальная проверка
  • Деплой: автоматический деплой через Gitea Actions → Vercel (при пуше в main)
  • Design: Финальный ревью брендбука

Текущий статус деплоя

Результат спринта: Брендбук полностью готов и задеплоен.

Сводная таблица

Спринт Тема Источник / Суть
1 Инициализация + Логотип PDF брендбука
2 Цвета, Типографика, Оффлайн элементы PDF брендбука + Oracal каталог
3 Кнопки и форм-контролы CSS реального сайта
4 Карточки, бейджи, алерты CSS реального сайта
5 ВСЕ блоки текущего сайта Все блоки /lor одним спринтом
6 Страницы (сборки) Главная + Заболевание + Врачи
7 Дублирование компонентов и блоков UI для создания вариантов блоков
8 Дублирование страниц Шаблоны страниц + варианты по разделам
9 Цены, Контакты, Врач Оставшиеся страницы по реальному сайту
10 Финальная полировка Smoke-тест + LLM-блоки + деплой

Backlog (вне основных спринтов)

  • Раздел «Логотип»: активация кнопки скачивания SVG (после получения вектора)
  • Экспериментальная секция — если потребуется CRUD API (NestJS + Prisma)
  • Тёмная тема — только если появится на реальном сайте
  • Мультиязычность — только если появится на реальном сайте