Спецификации вместо промптов: как мы перестраиваем фронтенд-разработку с помощью ИИ

Спецификации вместо промптов: как мы перестраиваем фронтенд-разработку с помощью ИИ

Использование ИИ в разработке давно вышло за рамки генерации простых функций. Для крупного финтеха это вопрос системной интеграции и безопасности. В ИТ-кластере «СВОЙ Тех» мы ищем способы оптимизировать Time-to-Market. В этом материале — опыт работы с легаси-кодом, интеграция с Figma через MCP-протокол и переход к Spec Driven Development.

Системный подход вместо хайпа

Мы рассматриваем ИИ как производственный инструмент, разделяя процесс на чёткие этапы: от оценки задачи до self-review. Основная проблема обычных чатов — потеря контекста из-за лимитов, непонимание архитектуры и API-контрактов.

Чтобы преодолеть эти ограничения, мы внедрили связку Plan-First и Spec Driven Development (SDD). Процесс включает два ключевых этапа:

  • Этап планирования (Plan-First): ИИ-агент анализирует задачу и формирует верхнеуровневый план. Это позволяет заранее синхронизировать видение системы и избежать архитектурных ошибок.
  • Создание спецификации (Spec): На основе утверждённого плана формируется детальная спецификация. Она становится «единым источником истины» — помогает сохранять контекст и упрощает дальнейшее развитие проекта.

Команда сначала определяет поведение, интерфейсы и требования, а только потом приступает к реализации. ИИ генерирует план и обновляет спецификацию с учётом бизнес-логики и текущего кода. Разработчик валидирует результат, корректирует слабые места и лишь затем разрешает генерацию кода.

Технологический стек: «Мозг» и «Руки»

Мы используем топовые LLM: Claude 4.7 Sonnet, Opus 4.6 и GPT-5.3 CODEX. Работа с ними организована через три основных инструмента:

  1. Cursor: IDE на базе VS Code. Позволяет выполнять всё в одной среде — от анализа кода до отладки интерфейса в браузере. Это наши «руки» для работы с файлами.
  2. OpenCode: собственное CLI-решение. Лёгкое и быстрое, используется для итераций, анализа решений и как база знаний по проекту.
  3. ChatGPT: выступает в роли «мозга». Здесь мы анализируем Best Practices и настраиваем сложные системные промпты, которые затем внедряем в Cursor.

Автоматизация связи «дизайн — код» через MCP

Фронтенд требует точной верстки. Поэтому мы внедрили Model Context Protocol (MCP) — открытый стандарт, который даёт ИИ доступ к внешним сервисам, как «органы чувств»:

  • Интеграция с Figma: агент получает параметры макетов напрямую, что исключает расхождения в дизайне и сокращает правки.
  • Связка с Sentry: ИИ работает с ошибками в реальном времени. Он анализирует stacktrace, находит связанные участки кода и предлагает исправления.

С помощью Cursor Browser мы тестируем и правим интерфейс прямо в IDE. Это экономит время на верстке и первичном тестировании компонентов.

Безопасность и детерминированность

В финтехе безопасность критична. У нас строгие правила: персональные данные клиентов не передаются во внешние ИИ-системы. Используются только внутренние агенты, работающие через прослойки и фильтры.

Агент видит структуру кода и логику, но не имеет доступа к чувствительной информации. Все действия ИИ детерминированы внутренними регламентами и контролируются на каждом этапе.

Верификация и контроль качества

После выполнения задачи запускается многоуровневая верификация:

  • Qodo: независимый ревьюер, проверяющий код по внутренним стандартам.
  • Расширенный self-review: разработчик запускает автотесты, сверяет реализацию с макетами в Figma и проходит QA-чеклист. Используются формализованные команды: findings → plan → todos.

Итоговый план задачи прикрепляется к тикету. Это позволяет ревьюеру видеть не просто код, а структуру решений и ход реализации. Подход ускоряет ревью и повышает его качество.

  • MCP-интеграция с GitLab: система оценивает изменения по сценариям и оставляет комментарии к Merge Request.

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

Итоги и профит

Внедрение этих решений во фронтенд-разработку дало прирост производительности на 10–15% с учётом затрат на обучение и инфраструктуру.

Однако требования к разработчикам выросли. Теперь важно не только писать код, но и эффективно управлять инструментами автоматизации. Разработка с ИИ становится новым стандартом — и мы активно формируем этот тренд.

Читать оригинал