Привет всем.
Расскажу про свой личный опыт разработки через Qwen 3.6 Plus и Qwen ClI. И да, статья полностью написана человеком.
Это небольшой pet-проект, сделанный в момент, когда Qwen 3.6 Plus был бесплатным с лимитом в 1000 запросов в день. Проект представляет из себя фронтенд вымышленного интернет-магазина по продаже микрокомпьютеров.
Цель была протестировать возможности Qwen. На весь проект у меня ушло 4 дня по 2-3 часа.
День 1. Планирование
Началось все с чата Qwen, где я спрашивал как лучше организовать работу с агентами через CLI, а также уточнял неясные для меня моменты.
В результате диалога появилось несколько ролей для агентов с небольшим описанием для каждой роли:
«Архитектор». Проектирует, разбивает проект на шаги, создает документацию для других агентов;
«Кодер». Собственно пишет код;
«Тестировщик». Пишет тесты;
«Ревьюер». Проводит ревью «Кодера»;
Контент-мейкер». Делает тексты-заглушки для сайта.
Я сам выбрал стек - Typescript, Next, React, Zustand, Chakra, Jest.
Далее в чате я набрал промпт, где собственными словами описал то, что хочу получить и попросил сделать уточняющий промпт для роли «Архитектора».
Обработав этот промпт, «Архитектор» сделал несколько md-файлов:
architecture - описание архитектуры проекта;
components - подробное описание компонентов;
data-flow - взаимосвязь компонентов через mermaid-диаграммы;
implementation - план реализации с поэтапной разбивкой (всего получилось 17 этапов)
Эти файлы пришлось переделать несколько раз. В первом варианте «Архитектор» сам начал писать код, а после уточнения роли еще и попытался прятать код в комментариях.
Далее я добавил mcp для работы с файловой системой и через «Архитектора» сделал скиллы для всего стека.
День 2. Подготовка
На второй день я вручную добавил информацию о товарах и картинки (с bananaPi).
Также я решил, что оставлю за собой всю работу с git и буду самостоятельно проверять каждый коммит (в итоге «Ревьюером» я воспользовался лишь один раз).
В этот день свою работу начал «Кодер», который установил все необходимые зависимости, сделал парсинг md-файлов, сторы Zustand и базовый layout.
День 3. Основной функционал
В этот день через «Кодера» был завершен весь основной функционал:
компоненты товаров;
главная страница;
страница товара;
страница избранного;
страница корзины;
страница контактов;
страница «о компании»;
404;
«Тестировщик» написал все тесты, а «Контент-мейкер» тексты-заглушки.
После каждого этапа я вручную и тщательно проводил ревью, а также вручную тестировал результаты работы. Я убедился в том, что с агентами нужно постоянно вести «диалог» и спрашивать почему они пришли к тому или иному решению, можно ли сделать лучше.
Стоит отметить, что «Кодер» иногда своевольничал и делал то, что его не просили (например, начинал писать тесты), а также «перепрыгивал» на следующий этап без подтверждения.
Крайне любопытно было читать рассуждения агентов. Особенно, меня поразил момент, когда «Кодер» при попытке исправить гидратационную ошибку выдал примерно следующие: «Стоп. Я несколько раз пытаюсь исправить баг через однотипные решения. Нужен совершенно иной подход».
День 4. Дополнительные фичи и полировка.
В этот день я решил посмотреть как «Кодер» работает с 3D (Three.js). В hero-section главной страницы я попробовал добавить 3D-модель микрокомпьютера. Однако результаты оказались посредственными (видимо общие модели пока плохо работают 3D графикой) и пришлось довольствоваться обычным SVG.
Также были добавлены некоторые фишки и завершено ручное тестирование.
Итог. За 4 дня работы удалось сделать вполне нормальный фронт для Интернет-магазина. Еще год назад я крайне скептически относился к возможностям ИИ в кодинге, однако нейросети в этом плане удивительно быстро развиваются. В своем проекте я фактически совместил роли техлида и ручного тестировщика. Всю остальную работу выполнили агенты (ручные правки — примерно 15%).
Главное, что я усвоил, программирование при при помощи ИИ — это нахождение баланса между скоростью и пониманием проекта, что с агентами нужно быть в постоянном диалоге.
Жаль, что Alibaba закрыла бесплатный доступ к облаку.
Значит будем пробовать локальные модели :-)