Разработка фронтенда интернет-магазина через Qwen 3.6 Plus и Qwen CLI
Проектом был фронтенд вымышленного магазина микрокомпьютеров, сделанный в период, когда Qwen 3.6 Plus был бесплатным с лимитом 1000 запросов в день. Автор сам выбрал стек — Typescript, Next, React, Zustand, Chakra и Jest — а работу разложил на роли агентов: «Архитектор», «Кодер», «Тестировщик», «Ревьюер» и «Контент-мейкер».
«Архитектор» подготовил md-документацию по архитектуре, компонентам, data-flow и плану реализации из 17 этапов, но файлы пришлось несколько раз переделывать: агент пытался писать код вместо проектирования и прятал его в комментариях. После добавления MCP для работы с файловой системой автор через «Архитектора» сделал скиллы для выбранного стека, а затем «Кодер» собрал базовую структуру проекта, зависимости, Zustand-сторы и layout.
Основной функционал — каталог, карточки товаров, страницы товара, избранного, корзины, контактов, «о компании» и 404 — был закрыт через агента-кодера, а тесты и заглушки текста сделали отдельные роли. Автор оставил за собой git, ревью каждого этапа и ручное тестирование; по его оценке, ручные правки заняли около 15% работы, но с агентами приходилось постоянно вести диалог, потому что они могли самовольно переходить к следующим этапам или делать не запрошенные задачи.
Коротко
- Pet-проект был сделан на Qwen 3.6 Plus и Qwen CLI за 4 дня по 2–3 часа, пока облачный Qwen давал 1000 бесплатных запросов в день.
- Работа была разложена на роли агентов: архитектор, кодер, тестировщик, ревьюер и контент-мейкер, но контроль оставался у автора.
- Стек проекта включал Typescript, Next, React, Zustand, Chakra и Jest; документация была разбита на architecture, components, data-flow и implementation.
- AI-агенты ускорили сборку фронтенда, но требовали постоянного диалога, ручного ревью, проверки коммитов и контроля переходов между этапами.
- Попытка добавить 3D-модель через Three.js дала слабый результат, поэтому в hero-section оставили обычный SVG вместо 3D-графики.
FAQ
Зачем автор делал интернет-магазин через Qwen 3.6 Plus и Qwen CLI, если это был не коммерческий проект?
Целью был тест возможностей Qwen на небольшом pet-проекте. Автор хотел проверить, как AI-агенты справляются с планированием, кодом, тестами и контентом.
Какая часть работы осталась за человеком при разработке фронтенда через AI-агентов?
Автор сам выбрал стек, добавил данные о товарах и изображения, вел git, проверял каждый коммит, делал ревью и ручное тестирование. Ручные правки он оценил примерно в 15%.
С какими ограничениями AI-агентов автор столкнулся во время разработки фронтенда интернет-магазина?
Агенты могли выходить за рамки роли, писать код вместо документации, начинать тесты без запроса или переходить к следующему этапу без подтверждения. Поэтому работа требовала постоянного контроля.
Читайте также
Как я локально тестировал новый Qwen 3.6 и Gemma 4
Как тимлид заменил десятки вкладок на файловую систему и Claude Code
Наглядный пример, зачем нужны AI-агенты
Мультиагентная разработка в Cursor: как заставить субагентов работать на большие проекты
Anthropic создала тестовый маркетплейс для торговли между AI-агентами
- Ролевая схема для AI-разработки через CLI: При работе с AI-агентами полезно заранее разделять роли: архитектор проектирует и пишет документацию, кодер реализует, тестировщик покрывает тестами, ревьюер проверяет код, контент-мейкер готовит тексты-заглушки. Такое разделение снижает хаос в agentic-разработке, но роли нужно явно ограничивать, иначе агент может начать выполнять чужую функцию.
[AI-разработка и agentic workflow]
Зарегистрированные пользователи видят только два тезиса.
Зарегистрироваться
Личный кейс разработки фронтенда интернет-магазина через Qwen 3.6 Plus и Qwen CLI: за 4 дня по 2–3 часа автор собрал pet-проект и проверил, как AI-агенты справляются с планированием, кодом, тестами и контентом.