Разработка фронтенда интернет-магазина через Qwen 3.6 Plus и Qwen CLI

Личный кейс разработки фронтенда интернет-магазина через Qwen 3.6 Plus и Qwen CLI: за 4 дня по 2–3 часа автор собрал pet-проект и проверил, как AI-агенты справляются с планированием, кодом, тестами и контентом.

Проектом был фронтенд вымышленного магазина микрокомпьютеров, сделанный в период, когда 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-агентов автор столкнулся во время разработки фронтенда интернет-магазина?

Агенты могли выходить за рамки роли, писать код вместо документации, начинать тесты без запроса или переходить к следующему этапу без подтверждения. Поэтому работа требовала постоянного контроля.

Читайте также

  1. Как я локально тестировал новый Qwen 3.6 и Gemma 4
  2. Как тимлид заменил десятки вкладок на файловую систему и Claude Code
  3. Наглядный пример, зачем нужны AI-агенты
  4. Мультиагентная разработка в Cursor: как заставить субагентов работать на большие проекты
  5. Anthropic создала тестовый маркетплейс для торговли между AI-агентами
Ключевые инсайты из новости (по версии ChatGPT)
  • Ролевая схема для AI-разработки через CLI: При работе с AI-агентами полезно заранее разделять роли: архитектор проектирует и пишет документацию, кодер реализует, тестировщик покрывает тестами, ревьюер проверяет код, контент-мейкер готовит тексты-заглушки. Такое разделение снижает хаос в agentic-разработке, но роли нужно явно ограничивать, иначе агент может начать выполнять чужую функцию.
    [AI-разработка и agentic workflow]
Для получения полного доступа оформите подписку PubMag PRO.
Зарегистрированные пользователи видят только два тезиса.
Зарегистрироваться
Инсайты автоматически генерируются с помощью искусственного интеллекта на основе текста статьи.
← Назад в лентуЧитать оригинал →
✈️ Подписывайтесь на мой Telegram-канал — там еще больше интересного про AdTech, MarTech, AI и многое другое!