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

Привет всем.

Расскажу про свой личный опыт разработки через Qwen 3.6 Plus и Qwen ClI. И да, статья полностью написана человеком.

Это небольшой pet-проект, сделанный в момент, когда Qwen 3.6 Plus был бесплатным с лимитом в 1000 запросов в день. Проект представляет из себя фронтенд вымышленного интернет-магазина по продаже микрокомпьютеров.

Цель была протестировать возможности Qwen. На весь проект у меня ушло 4 дня по 2-3 часа.

День 1. Планирование

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

В результате диалога появилось несколько ролей для агентов с небольшим описанием для каждой роли:

1. «Архитектор». Проектирует, разбивает проект на шаги, создает документацию для других агентов;

2. «Кодер». Собственно пишет код;

3. «Тестировщик». Пишет тесты;

4. «Ревьюер». Проводит ревью «Кодера»;

5. Контент-мейкер». Делает тексты-заглушки для сайта.

Я сам выбрал стек — Typescript, Next, React, Zustand, Chakra, Jest.

Далее в чате я набрал промпт, где собственными словами описал то, что хочу получить и попросил сделать уточняющий промпт для роли «Архитектора».

Обработав этот промпт, «Архитектор» сделал несколько md-файлов:

1. architecture — описание архитектуры проекта;

2. components — подробное описание компонентов;

3. data-flow — взаимосвязь компонентов через mermaid-диаграммы;

4. implementation — план реализации с поэтапной разбивкой (всего получилось 17 этапов)

Эти файлы пришлось переделать несколько раз. В первом варианте «Архитектор» сам начал писать код, а после уточнения роли еще и попытался прятать код в комментариях.

Далее я добавил mcp для работы с файловой системой и через «Архитектора» сделал скиллы для всего стека.

День 2. Подготовка

На второй день я вручную добавил информацию о товарах и картинки (с bananaPi).

Также я решил, что оставлю за собой всю работу с git и буду самостоятельно проверять каждый коммит (в итоге «Ревьюером» я воспользовался лишь один раз).

В этот день свою работу начал «Кодер», который установил все необходимые зависимости, сделал парсинг md-файлов, сторы Zustand и базовый layout.

День 3. Основной функционал

В этот день через «Кодера» был завершен весь основной функционал:

1. компоненты товаров;

2. главная страница;

3. страница товара;

4. страница избранного;

5. страница корзины;

6. страница контактов;

7. страница «о компании»;

8. 404;

«Тестировщик» написал все тесты, а «Контент-мейкер» тексты-заглушки.

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

Стоит отметить, что «Кодер» иногда своевольничал и делал то, что его не просили (например, начинал писать тесты), а также «перепрыгивал» на следующий этап без подтверждения.

Крайне любопытно было читать рассуждения агентов. Особенно, меня поразил момент, когда «Кодер» при попытке исправить гидратационную ошибку выдал примерно следующие: «Стоп. Я несколько раз пытаюсь исправить баг через однотипные решения. Нужен совершенно иной подход».

День 4. Дополнительные фичи и полировка.

В этот день я решил посмотреть как «Кодер» работает с 3D (Three.js). В hero-section главной страницы я попробовал добавить 3D-модель микрокомпьютера. Однако результаты оказались посредственными (видимо общие модели пока плохо работают 3D графикой) и пришлось довольствоваться обычным SVG.

Также были добавлены некоторые фишки и завершено ручное тестирование.

Итог. За 4 дня работы удалось сделать вполне нормальный фронт для Интернет-магазина. Еще год назад я крайне скептически относился к возможностям ИИ в кодинге, однако нейросети в этом плане удивительно быстро развиваются. В своем проекте я фактически совместил роли техлида и ручного тестировщика. Всю остальную работу выполнили агенты (ручные правки — примерно 15%).

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

Жаль, что Alibaba закрыла бесплатный доступ к облаку.

Весь проект

Значит будем пробовать локальные модели 🙂