Как за неделю собрать фронтенд без фронтендера: AI-ассистент и дизайн-система

08.02.2026 • Хабр

Тимлид из Ви.Tech описал, как команда без выделенного фронтендера собрала MVP-интерфейс за неделю, опираясь на AI-ассистента и дизайн-систему на Vue/TypeScript. Главный итог: скорость дала не «магия AI», а рамки, ревью и готовые UI-компоненты.

Фронтендера в команде не было, а бизнесу нужен был экран для просмотра задолженностей по ордерам.
MVP-интерфейс сделали за неделю на корпоративном стеке Vue 3 + TypeScript и с дизайн-системой.
В качестве инструментов упомянуты Cursor и Claude; ассистенту давали контекст в виде Markdown-документа с UI-правилами.
В правилах фиксировались запреты (без сторонних UI-библиотек, минимум inline-стилей, слой client/service для API) и обязательные требования (DS-компоненты, типизация, синхронизация фильтров с query-параметрами URL, toast для ошибок).
Автор разделяет работу: AI собирал каркас и бойлерплейт, люди закрывали интеграцию с API, фильтры, пограничные случаи и ревью.
По результату релиз вышел в срок к концу квартала; критичных инцидентов не было, остались мелкие доработки по валидациям.

Почему это важно: Кейс показывает, как AI-ассистент может ускорять продуктовую разработку, когда интерфейс нужен быстро, а фронтовые ресурсы заняты. В описании акцент сделан на правила + дизайн-система + ревью: они ограничивают вариативность генерации и повышают повторяемость результата. Это снижает риск появления разрозненных UI-паттернов, когда разные подсказки и контексты приводят к разным решениям.

На что обратить внимание: В тексте подчёркивается, что ассистент периодически забывал ограничения и пытался тянуть лишние библиотеки или другой паттерн, поэтому качество держалось на ревью и правилах. Отдельно выделена синхронизация фильтров с URL, потому что пользователи ожидают воспроизводимый результат по ссылке, а не только локальное состояние. Остаются неясности по конкретному набору фильтров и тому, была ли пагинация серверной, что влияет на UX и нагрузку на API. Также отмечается риск «красивого» TypeScript, который не совпадает с реальными DTO, если сложные ответы не перепроверять.

Коротко

История показывает, что без правил AI легко «изобретает» новый стиль и паттерны; в кейсе это решали через единый документ требований и ограничений.
Когда UI собирается из готовых компонентов дизайн-системы, уменьшается пространство для фантазии модели и проще держать единый UX и доступность.
Отдельный риск — рассинхронизация фильтров и URL: пользователям важно делиться ссылкой на тот же набор параметров, а не на локальное состояние.
В тексте AI сравнивают с джуном: код может работать, но «врать» в типах и пропускать пограничные случаи, поэтому роль ревью не исчезает.
Подход описан как неуниверсальный: без дизайн-системы и минимальных соглашений по структуре проекта результат быстро становится разношерстным.

FAQ

Зачем этот кейс важен командам, которым нужен интерфейс «вчера»: какой механизм помог собрать MVP на корпоративном стеке без выделенного фронтендера?

В тексте показано, что ускорение дали заранее описанные правила проекта, дизайн-система и ревью, а AI использовался как ускоритель рутины.

Как автор описывает разделение ответственности между AI-ассистентом и командой в одном из проектов, где делали экран задолженностей по ордерам?

AI собирал каркас страниц, верстку на компонентах дизайн-системы, типы и бойлерплейт; команда брала интеграцию с API, фильтры, пограничные случаи, согласование с пользователями и ревью.

Какие ограничения и «грабли» проявлялись в процессе по описанию автора, включая забывание ограничений, синхронизацию фильтров и обработку ошибок?

Автор отмечает «уезжающий» контекст, попытки добавить лишние библиотеки, фокус на «happy path», проблемы с URL-синхронизацией фильтров и необходимость вручную дорабатывать ошибки, пустые состояния и типы.

Когда, по тексту, такой подход может не подойти для команды: какие условия делают генерацию UI через ассистента менее предсказуемой и более рискованной?

По тексту, без дизайн-системы и минимальных соглашений по структуре, линту и слою API AI будет постоянно «изобретать UI»; для критичных по безопасности и комплаенсу интерфейсов нужен более строгий контроль.

PubMag