arazor72
/
mobile-app-prototip
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
прототип мобильного приложения Клиники ухо, горло, нос им. проф. Е.Н.Оленевой. подготволен совместно с Claude.ai design и Claude CLI
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.
11 Commits
1 Branch
0 Tags
589 KiB
 
 
 
 
Tree: 754722c5ae
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '754722c5ae'
${ noResults }
mobile-app-prototip/SPRINTS.md

18 KiB
Raw Blame History

Спринты

Документ для планирования и отслеживания работ по прототипу мобильного приложения Клиники УГН.

Как вести

  • Каждый спринт — отдельный заголовок ## Спринт N · даты
  • Задачи — чекбоксы - [ ] описание, ставим - [x] когда готово
  • По завершении спринта — короткое резюме в блоке Итоги
  • Нерешённое переносится в следующий спринт

Правила разработки

  • Документация = часть прототипа. При любом изменении экрана в src/screens/*.jsx — проверить и обновить соответствующую запись в src/docs.js (goal / tasks / rationale / variants). Эти описания показываются в плашке над телефоном и на экране «Документация», поэтому устаревшие формулировки мешают коллегам на ревью.
  • Новый экран → добавить запись в SCREEN_DOCS, выбрать категорию из ORDER (в getAllDocs), для compound-маршрутов (something:id) прописать кейс в resolveRouteForDoc.
  • Мелкие CSS-правки (цвета, отступы, иконки) документировать не нужно — в docs.js описывается intent, а не пиксели.
  • Варианты экрана с ctx (home cards/list/feed) — отдельная запись на каждый вариант (home:cards, home:list, home:feed).

Спринт 1 · 19 апр 2026

Цель: развернуть прототип ЛОР-клиники из дизайн-бандла Claude Design и закрыть базовые пробелы.

План

  • Распаковать дизайн-бандл, перенести на Vite + React (20 экранов)
  • iOS / Android рамки + Tweaks-панель (экраны, устройство, компоновка, акцент, шрифт, плотность, масштаб)
  • Экран результата эндоскопии: 2×2 снимков, заключение, рекомендации, PDF, полноэкранный просмотр
  • Статьи: список с фильтрами по тегам + детальная страница (hero, body-блоки, автор, связанные)
  • Главная 2: универсальный поиск, тайлы, статистика клиники
  • Поиск: врачи / услуги / симптомы / статьи / приёмы с реальной фильтрацией
  • Контакты: телефон, два адреса с мокапами зданий и мини-карт
  • Цены: поиск + пиллы-категории, группировка, диапазон
  • Развернуть на публичный URL (surge / netlify) и отправить коллегам
  • Собрать первичный фидбек по прототипу

Итоги

заполнить в конце спринта

Спринт 2 · 19 апр 2026

Цель: превратить одиночный чат в центр всех коммуникаций с клиникой — AI-помощник, врач, администратор.

Итоги. Закрыт. Чат стал списком из трёх диалогов (AI-помощник, врач, администратор), каждая карточка ведёт в отдельную конверсацию с разными UI-акцентами. Таббар автоматически скрывается в подэкранах chat:<id>.

План

  • Экран chat — список диалогов: AI-помощник (featured), врач, администратор
  • Данные: три чата в data.js (kind, участники, сообщения, online, непрочитанные, время последнего сообщения)
  • AI-помощник: расширенный диалог с напоминаниями о лекарствах, чипсы с подсказками ответов
  • Чат с регистратурой: запросы справок, переносы приёмов, счета
  • Экран chat:<id> — конверсация: разный аватар/статус/UI-акценты для AI, врача, оператора
  • Видеозвонок-кнопка только у врача; suggested replies только у AI
  • Переадресация: сурджен в «Восстановлении» → chat:doctor-syndaev
  • Tweaks: добавить три варианта чата в список экранов

Задел на Спринт 3

  • Экран онбординга (первый запуск)
  • Пустые состояния для всех вкладок
  • Анимации переходов между экранами
  • Реальные аватары врачей и иконки
  • Сравнение результатов эндоскопии с предыдущим
  • Раздел «Программа лояльности» (бонусы, уровни)
  • Детальная карточка услуги (с описанием и подготовкой)
  • Форма обратной связи / отзыв о враче
  • Тёмная тема

Итоги

заполнить в конце спринта

Спринт 3 · 20 апр 2026

Цель: применить новую палитру из дизайн-системы (скрин от 20.04) и добавить её как 4-й вариант в Tweaks.

Входные цвета: #ffffff #fffde4 #f2fee6 #d4f6f8 #e9e4d4 #ffa39c #63bac3 #29aee3 #93908f — sky-blue primary + coral accent + warm pastels.

План

  • Расширить схему ACCENT_OPTIONS: добавить accent, accentDark, accent50 (чтобы палитра меняла и красный акцент, а не только primary + warm)
  • Обновить applyTheme — устанавливать --c-accent, --c-accent-dark, --c-accent-50 из палитры
  • Проставить accent-поля в существующих палитрах (тил/терра/марин) → сохранить текущий красный #E04E44
  • Добавить 4-ю палитру Лагуна: primary #29AEE3, accent #FFA39C, warm #E9E4D4
  • Пристроить три оставшихся цвета из скрина: #f2fee6 → success-50, #93908f → fg-4, #63bac3 → primary-300 (с видимым применением в бордере Clinic Stats card на Home V2)
  • Добавить 5-ю палитру Бриз — вариант Лагуны с приглушённым primary #63BAC3 (яркий #29AEE3 переехал в p300, warm/accent/success/fg-4 наследуются от Лагуны)
  • Визуальная проверка всех экранов в новой палитре: кнопки, чипы, CTA, прогресс восстановления, успех-галочка, таббар-бейджи

Спринт 4 · 20 апр 2026

Цель: служебные экраны для разработчиков — визуализация дизайн-системы прямо в прототипе, чтобы переключая палитру сразу видеть все цвета и их применение.

План

  • Пробросить текущую палитру через ctx.palette (чтобы dev-экраны могли прочитать все поля)
  • Экран DEV · Палитра: таблица всех цветов (primary / warm / accent / status / neutrals / text), у каждой строки — свотч, название роли, CSS-переменная, hex-код, краткое описание применения
  • Экран DEV · Примеры: реальные компоненты (кнопки, чипы, карточки, текстовая иерархия, статусы) с подписями «какая CSS-переменная используется»
  • Добавить оба экрана в SCREEN_OPTIONS Tweaks
  • Динамический рендер: при переключении палитры значения hex обновляются автоматически

Спринт 6 · 20 апр 2026

Цель: вариант Главной для пациентов с хроническими заболеваниями — поддержание понимания «что со мной происходит», ежедневных задач по здоровью и связи с врачом/AI-помощником. Выведено как Таймлайн X (X = «хроник»).

План

  • Добавить в data.js блок chronic — диагноз, стадия, ключевые метрики (дни без обострений, комплаенс, обострения в году), ежедневные/плановые задачи, рекомендации, история наблюдения (visits)
  • Экран HomeTimelineXScreen в screens-home.jsx: health-status hero, задачи сегодня (daily + scheduled), промо-блок связи (AI + врач), вертикальный таймлайн истории, ближайший приём, рекомендации горизонтально, CTA записи, статьи
  • Добавить timelineX в HOME_OPTIONS (App.jsx) и в HOME map (PhoneApp.jsx)
  • Описание в src/docs.js под ключом home:timelineX (соблюдение конвенции из Спринта 5)

Спринт 9 · 21 апр 2026

Цель: ввести переключатель дизайн-системы в Tweaks (раздел «Дизайн»: «Клод» / «Прозрачная карточка») и начать перерабатывать экраны в стиле «Светлой плитки» (primary-50 карточки, круглые teal-иконки, крупные h1, тонкие бордеры primary-100, минимум градиентов).

Идея. «Клод» — текущий нейтральный дизайн (Spacious gradient + разные tint-карточки). «Прозрачная карточка» — унифицированный стиль на базе «Светлой плитки»: каждая сущность в primary-50 карточке со скруглением 16, шапки — белая кнопка-назад в primary-50 кружке, плитка-первее-списка.

Инфраструктура

  • TWEAKS_DEFAULT.design = 'claude' + DESIGN_OPTIONS (App.jsx)
  • Группа «Дизайн» в TweaksPanel (2 кнопки)
  • ctx.design прокинут в PhoneApp.renderScreen
  • В plate-режиме главная всегда = HomeSplashScreen (homeVariant форсится на splash)
  • Механизм fallback: экраны без plate-версии показываются в Клоде

Plate-версии экранов

  • Главная — HomeSplashScreen (уже готов из Спринта 8, базовый эталон)
  • Профиль — ProfilePlateScreen (паспорт + 2 быстрые кнопки QR/Карта + 4 секции списком plate-карточек)
  • Приёмы — ApptsPlateScreen (табы как pill-сегмент, карточка приёма с «Активно», чипы даты/времени/адреса)
  • Детали приёма — ApptDetailPlateScreen (крупное время в plate-hero + заключение с белыми вложенными pane)
  • Электронная карта — MedcardPlateScreen (паспорт + pill-табы + все 5 табов в plate-стиле)

Задел на следующий спринт

  • Врачи (список + карточка врача) в plate-стиле
  • Флоу записи (specs/doctor/time/confirm/success) в plate-стиле
  • Чаты (список + конверсация) в plate-стиле
  • Результаты (список + аудио + эндоскопия) в plate-стиле
  • Восстановление, тест слуха — в plate-стиле
  • Уведомления, QR — в plate-стиле
  • Статьи, контакты, цены, поиск — в plate-стиле
  • docs.js — отдельные записи для plate-вариантов если стилистика существенно отличается от Клода

Итоги

заполнить в конце спринта

Спринт 8 · 21 апр 2026

Цель: добавить в Tweaks 5-й вариант главной по макету Stitch — приветственный экран с тёплой карточкой записи и плиткой 2×2 «Полезная информация».

Итоги. Закрыт. Реализован HomeSplashScreen (screens-home.jsx) + вспомогательный SplashTile. В процессе название варианта переименовано из «Сплэш» → «Светлая плитка» (id=splash) — более понятно на русском. Имя пациента тянется из patient.shortName, ближайший приём из appointments. Доступ: Tweaks → «Главный экран» → «Светлая плитка». Стал базой для дизайн-системы «Прозрачная карточка» в Спринте 9.

План

  • HomeSplashScreen в screens-home.jsx: шапка (аватар + «Главная» + колокольчик), крупный h1 «Добрый день, {имя}!», поиск врача, секция «Записи на прием» (ближайшая + мои приёмы + warm-CTA записи), «Услуги и консультации» 2×1, «Полезная информация» 2×2
  • Вспомогательный компонент SplashTile — круглая teal-иконка + sub/main
  • Имя пациента — из patient.shortName (единый источник правды с Профилем и Медкартой)
  • Подключить в HOME_OPTIONS (App.jsx) и в HOME-map (PhoneApp.jsx) как splash → «Светлая плитка»
  • Описание home:splash в src/docs.js (цель, задачи, design-решения, варианты)

Спринт 7 · 21 апр 2026

Цель: превратить экран «Медкарта» в полноценную электронную карту пациента — единую точку правды о здоровье, связанную двусторонне с карточками прошедших приёмов и с Профилем.

План

  • Расширить data.js: блок patient (ФИО, ДР, полис, СНИЛС, № карты, первый визит, лечащий врач) + блок medcard (allergies с severity/reaction, chronicConditions с МКБ-кодом, vaccinations, surgeries, prescriptions active/past)
  • Дополнить appointments past-визиты полями diagnosis, diagnosisCode, conclusion, prescriptions[], resultIds[] + добавить визит a5 (септопластика Синдяева 12 апр)
  • Переписать MedcardScreen: hero-паспорт с QR-кнопкой, 5 табов (Общее / Посещения / Назначения / Прививки / Операции), карточки посещений ведут в appt:<id>
  • ApptDetailScreen: блок «Заключение» теперь тянет данные из a.diagnosis/conclusion/prescriptions/diagnosisCode, добавлены CTA «В медкарте» и «Результаты обследований»
  • ApptsTabScreen: на вкладке «Прошедшие» primary-CTA «Электронная карта» (вместо «Записаться»)
  • ProfileTabScreen: шапка читает patient, пункт «Электронная карта» с featured-стилем и счётчиками (посещения / аллергии / диагнозы), новый чип «Карта №XXX» рядом с QR
  • Обновить docs.js: medcard и appt — отразить двустороннюю связь и новую структуру карты

Итоги

заполнить в конце спринта

Спринт 5 · 20 апр 2026

Цель: документация прототипа внутри самого прототипа — чтобы на ревью с коллегами можно было сразу увидеть цель и design-решения по любому экрану.

План

  • Общий слой данных src/docs.js — словарь описаний по screen-id: title, category, goal, tasks[], rationale[], variants
  • Helper getScreenDoc(screenId, ctx) — резолвит варианты home (cards/list/feed) и compound-экраны
  • Toggle «Описания» в Tweaks (вкл/выкл)
  • Плашка-описание над телефоном в режиме single (только когда тоггл ON) — category + title + 1 строка goal
  • Тап по плашке → модал-оверлей поверх сцены с полным описанием (задачи, design-решения, варианты, CTA «Закрыть»)
  • Отдельный экран docs (Вариант 4) — список всех экранов по категориям с collapsible-описаниями и кнопкой «Открыть экран»
  • Наполнить описаниями все ~30 экранов прототипа

Итоги

заполнить в конце спринта