Перейти к основному содержимому

Полный учебный курс

Frontend Developer + AI

AI-интерфейсы, streaming UX, approvals и generative UI

Траектория для frontend-разработчика: chat UI, streaming, state, human-in-the-loop, accessibility, безопасность браузерного контекста и production AI UX.

Завершите курс не просто с chat UI, а с production evidence pack для AI-интерфейса: явная state machine для streaming, schema-driven rendering, citations, границы approval, доступные обновления статуса, adversarial tests, quality telemetry и проверенный rollback.

0%0/10 уроков

Прогресс сохраняется локально в вашем браузере.

8–14 недель3 модулей10 уроков2 assessment

Система работы с курсом

Как проходить курс, чтобы остался проверяемый результат

1. Проектировать состояния до компонентов

Сначала опишите idle, submitting, streaming, validating, completed, cancelled, retryable error и terminal error. Кнопки, spinner и текст ответа должны быть проекцией контролируемого состояния системы, а не скрытой логикой нескольких boolean-флагов.

2. Отделять preview от validated result

Partial stream улучшает ощущение скорости, но не является финальным domain result. Безопасно рендерьте недоверенный текст, а structured output, citations и предложенные actions показывайте как подтвержденные только после schema и application-side validation.

3. Проверять без мыши и магии

Пройдите каждый lab с keyboard-only navigation, screen-reader announcements, медленной сетью, cancellation, malformed payload, duplicate events и prompt-injected content. Проверяйте observable UI state и side effects, а не только красивый screenshot.

4. Фиксировать UX evidence

Сохраняйте state-transition traces, accessibility audit, error recovery, открытие citations, approval decisions, время до first useful feedback и task completion. Одна median latency не показывает, понял ли пользователь состояние системы и сохранил ли контроль.

Правила курса

Не просто прочитал — а доказал

  • Streaming — это transport lifecycle, а не разрешение показывать partial output как подтвержденный результат.
  • Generative UI рендерит allowlisted schema; модель не передает произвольный component code, HTML или authority.
  • Approval без понятных action, target, consequence и decline path — театр согласия, а не human control.
  • Accessibility проверяется на переходах состояний, ошибках и recovery, а не только статическим scan готовой страницы.
  • После production UX/security incident минимизированный interaction trace становится permanent regression case.

Модуль 1

Общий AI Core

База для контролируемого и проверяемого взаимодействия с AI-системами.

РезультатРазработчик понимает ограничения моделей и умеет проверять AI-результаты.

  1. AI-грамотность и границы моделей

    Основной

    Возможности, галлюцинации, ограничения контекста, приватность и ответственное использование.

    Материал →

  2. Prompt и context engineering

    Основной

    Инструкции, примеры, ограничения, контекст и проверка результата.

    Предпосылки: AI-грамотность и границы моделей

    Материал →

  3. Structured outputs и evaluation

    Основной

    Схемы ответов, детерминированные проверки, тестовые сценарии и критерии приёмки.

    Предпосылки: Prompt и context engineering

    Материал →Ресурс →

Checkpoint после модуля

Базовый уровень доверенного взаимодействия

  • ✓ границы модели, privacy и authority объяснены в flow
  • ✓ structured result имеет schema и fallback
  • ✓ критическое утверждение можно отличить от source evidence

Scenario transfer lab

Transfer lab: контракт доверия для AI-ответа

Возьмите AI-ответ, который смешивает объяснение, факты и рекомендованное действие. Разделите текст модели, валидированные поля, citations, uncertainty и action proposal, чтобы пользователь видел происхождение информации и не воспринимал предложение как уже выполненное действие.

Deliverable

Response schema + annotated wireflow + content rules для loading, evidence, uncertainty, stale citation, validation failure и unavailable source.

Structured outputs →RAG citations →AI UX →Roadmap Frontend Developer + AI →
  • ✓ невалидный payload не попадает в privileged component
  • ✓ citation открывает конкретный источник или показывает явный unavailable state
  • ✓ uncertainty не маскируется декоративной уверенностью
  • ✓ action proposal визуально и семантически отделен от completed action

Модуль 2

Паттерны взаимодействия с AI

Интерфейсные паттерны для вероятностных систем и длительных AI-взаимодействий.

РезультатИнтерфейс корректно показывает streaming, uncertainty, approvals и ошибки.

  1. Chat UI и streaming-ответы

    Основной

    SSE, частичный вывод, отмена, повторы и optimistic states.

    Материал →

  2. Human-in-the-loop и approval UI

    Основной

    Подтверждение действий, контекст риска, undo и audit trail для значимых AI-действий.

    Материал →

  3. Accessibility для AI-интерфейсов

    Рекомендуемый

    Screen readers, управление фокусом, обновления статуса и progressive disclosure.

    Материал →

  4. Проект: production AI assistant interface

    Проектpractice + assessment

    Streaming chat с цитатами, approvals, состояниями ошибок и accessibility.

    Предпосылки: Chat UI и streaming-ответы, Human-in-the-loop и approval UI

    Материал →Практикум →Assessment →

Checkpoint после модуля

Устойчивый AI-интерфейс

  • ✓ streaming lifecycle имеет явные transitions, cancellation и retry policy
  • ✓ generated UI ограничен allowlisted schema
  • ✓ approval показывает действие, target, последствия и позволяет отказаться без side effect

Scenario transfer lab

Transfer lab: streaming, cancellation и approval state machine

Создайте assistant interface для длинного ответа и предложенного tool action. Воспроизведите медленный stream, disconnect, duplicate chunk, cancel во время генерации, malformed final payload и повторное открытие approval после изменения target state.

Deliverable

Executable UI + state-transition table + automated component/e2e tests + trace, связывающий request, stream, validation, approval и authoritative action result.

Streaming и backpressure →Human in the loop →Tool-calling contracts →Практикум production AI interface →
  • ✓ late или duplicate events не возвращают UI в ложное состояние
  • ✓ cancel останавливает presentation и имеет определенный backend reconciliation path
  • ✓ partial output не отмечается completed до final validation
  • ✓ approval повторно проверяет target и permission непосредственно перед side effect

Модуль 3

Безопасность и production UX

Безопасность браузера, доверие, explainability, structured rendering и телеметрия качества.

РезультатAI-интерфейс имеет безопасные actions, evidence, fallbacks и измеримое качество UX.

  1. Prompt injection и безопасность браузера

    Основной

    Недоверенный контент, XSS-границы, approvals инструментов и защита от утечки данных.

    Материал →

  2. Generative UI и structured rendering

    Основной

    Компоненты на основе схем, validation, ограниченный rendering и безопасные fallbacks.

    Материал →

  3. Milestone: trustworthy AI frontend

    Контрольная точкаpractice + assessment

    Доступный, наблюдаемый и безопасный AI experience, готовый к production review.

    Предпосылки: Prompt injection и безопасность браузера, Generative UI и structured rendering

    Материал →Практикум →Assessment →

Checkpoint после модуля

Production UX gate

  • ✓ keyboard и screen-reader сценарии проходят acceptance checks
  • ✓ prompt injection и unsafe rendering имеют regression cases
  • ✓ quality, task-success и UX telemetry могут остановить rollout и активировать rollback

Scenario transfer lab

Transfer lab: accessibility, adversarial UX и release gate

Проверьте готовый flow как probabilistic interface, а не статичную страницу. Добавьте keyboard-only и screen-reader сценарии, reduced motion, narrow viewport, prompt-injected source, unsafe URL, citation mismatch, timeout и rollback на предыдущую schema version.

Deliverable

Versioned UX evaluation set + accessibility report + security regression suite + canary dashboard и runbook с stop, fallback и rollback criteria.

Prompt-injection guardrails →AI evaluation →AI incident response →Карта знаний →
  • ✓ изменения статуса объявляются без перехвата focus
  • ✓ недоверенный model/source content не создает executable markup или unsafe navigation
  • ✓ eval отдельно измеряет task completion, recovery, evidence use и accessibility
  • ✓ schema incompatibility или severe regression активирует documented fallback или rollback

Capstone contract

Capstone: доверенный production AI assistant interface

Соберите end-to-end AI-интерфейс, где streaming, evidence, structured rendering и consequential actions имеют явные контракты. Докажите, что пользователь понимает состояние системы, может проверить источники, отменить или отклонить действие, восстановиться после failure и доступно завершить ключевую задачу.

Что сдать

  • — interaction/state model для request, stream, validation, approval, action result, cancellation, retry и terminal states
  • — versioned response и generative-UI schemas с allowlisted components, безопасным text/URL rendering и backward-compatible fallback
  • — evidence UX с citations, freshness/unavailable states, uncertainty и четким разделением model proposal и authoritative result
  • — approval contract с actor, action, target, parameters, risk context, expiry, permission recheck и audit event
  • — автоматизированные accessibility, component, e2e и adversarial tests для keyboard, screen reader, injection, malformed, duplicate и stale events
  • — UX evaluation set и telemetry для task completion, recovery, validation failure, approval outcome и time to first useful feedback
  • — canary, feature flag, fallback и rollback runbook с проверками schema/version compatibility

Когда это можно считать готовым

  • ✓ каждое visible state соответствует определенному system state и имеет доступное имя или announcement
  • ✓ partial или malformed output не превращается в validated fact, component или completed action
  • ✓ пользователь может проверить evidence, безопасно отказаться, отменить flow и восстановиться после retryable failure
  • ✓ недоверенный content не обходит rendering, navigation, permission или approval boundaries
  • ✓ release gate блокирует severe accessibility, security, evidence-integrity или task-completion regressions
  • ✓ rollback восстанавливает совместимый UI/schema envelope без потери audit trail незавершенных actions

Финальная практика и assessment

Курс завершается практическим артефактом и рубрикой приёмки. Результат считается готовым после прохождения acceptance criteria, а не только после чтения материалов.

Проект: production AI assistant interface →Milestone: trustworthy AI frontend →Открыть roadmap →