Если вы читаете эту статью, вам зачем-то понадобилось сгенерировать код с помощью ИИ-агента. И, скорее всего, вы поискали в интернете и нашли, что есть какой-то там бесплатный ИИ-агент Qwen-Code. Вот что пишут о Qwen Code его создатели:

«Qwen Code — это агентский инструмент для программирования, который работает в вашем терминале и помогает превращать идеи в код быстрее, чем раньше»

Не слишком-то развёрнуто, верно? В этом руководстве мы за несколько минут научимся пользоваться Qwen Code и сделаем собственный небольшой проект с домашней страничкой. Важно: мы используем этот ИИ-агент для быстрой разработки сайтов, но в целом с qwen-code вы можете генерировать код на Python, C++ или любом другом языке. Или даже просто работать с файловой системой и выполнять команды в терминале!

Что понадобится для старта:

Приступим!

Пошаговая инструкция

Откройте редактор кода VS Code, перед вами появится новое окно. Чтобы наш проект лежал отдельно и не взаимодействовал ни с чем другим, нужно создать папку и открыть её в VS Code. Для этого выберите File > Open Folder:

В моём случае папка называется Qwen1, слева видно пока пустое окно для файлов. Справа обычная стартовая страница Visual Studio Code, но скоро это изменится. В этом проекте мы не будем создавать файлы вручную и доверим всё Qwen Code.

Откройте новый терминал, пункт Terminal > New Terminal. Если никогда им не пользовались, не бойтесь, нам почти ничего не понадобится в нём делать.

Терминал откроется где-то рядом, например, как на рисунке снизу. Впечатайте qwen и нажмите Enter.

Если Qwen Code установлен, ваш терминал снизу превратится примерно в такое окно. Сверху мы видим логотип Qwen и его версию. На момент написания статьи доступна версия 0.8.2, в вашем случае может быть более актуальная. Ниже нас ждёт самое главное — поле для ввода запроса (там, где написано Type your message).

Важно: в некоторых случаях Qwen Code может попросить авторизоваться, то есть войти через ваш аккаунт. Для этого откроется браузер, сделайте там всё, что он просит, и вернитесь в VS Code.

Давайте для начала попросим Qwen Code создать несколько файлов для нашего проекта. Введем такой запрос (он хорошо работает и по-русски, и по-английски) и нажмем Enter:

создай структуру простого проекта на html, css, js для домашней странички. она должна быть актуальна для 2026 года, укажи все нужные meta-теги, но пока не заполняй содержимое страницы.

Через несколько секунд, в зависимости от скорости вашего интернета, Qwen Code предложит применить изменения в несколько файлов. На скриншоте он предлагает записать 46 строчек в файл index.html. Вы можете принимать его варианты кода по одному за раз (тогда нажмите Yes, allow once), принять сразу всё, что он придумал во все файлы (Yes, allow always) или предложить изменения (No, suggest changes). В нашем учебном проекте мы примем все изменения автоматически, но в будущем внимательно следите, что какой код написал ИИ-агент.

В результате всего за несколько секунд мы получили готовую структуру проекта — файл index.html с заполненным тегом <head> и мета-тегами, файл style.css для стилей и main.js для кода. Также qwen-code создал заглушки для фавиконок.

Сам ИИ-агент хвастается о своей работе так:

1. Современный HTML5-шаблон (index.html):

  • Семантическая структура HTML
  • Комплексные мета-теги для SEO и социальных сетей
  • Мета-тег viewport для адаптивного дизайна
  • Мета-теги Open Graph и Twitter Card
  • Предварительная загрузка критически важных ресурсов
  • Поддержка модульных скриптов

2. Современный CSS (css/style.css):

  • CSS-сброс стилей
  • Пользовательские свойства CSS (переменные) для темизации
  • Адаптивная типографика
  • Утилитарные классы
  • Поддержка тёмного режима с использованием prefers-color-scheme
  • Поддержка уменьшенной анимации для доступности

3. Современный JavaScript (js/main.js):

  • Синтаксис модулей ES6
  • Слушатель события DOMContentLoaded
  • Современные функции JavaScript
  • Экспортируемые модули

Если мы попытаемся открыть эту страницу в браузере, ничего не получится — ведь мы сами попросили не добавлять ничего. То есть мета-теги есть, но в <html> пока пусто. Давайте это исправим и попросим Qwen Code сгенерировать еще немного кода.

Запрос будет таким:

дополни файл index.html так, будто это проект домашней страницы разработчика сайтов по имени Серёжа Джуновский. добавь шаблонные блоки с информацией об опыте, ссылки на портфолио, соцсети, галерею сайтов и подвал

И содержимое действительно добавилось. Но из-за того, что изначально qwen-code смог создать стили только в базовом варианте, всё пока выглядит странно. Давайте попросим его улучшить:

Введём запрос:

улучши стили в style.css, чтобы они соответствовали добавленным блокам,выглядели интересно и современно, расположение по центру, колонка 820 пикселей, адаптация для мобильных

В нашем случае работа заняла почти 30 секунд, но результат порадовал: мы с нуля получили страничку о себе, на которую раньше понадобилось бы несколько часов. Смотрите сами:

В дальнейшем вы можете экспериментировать сами. Одним запросом можно сменить тему оформления, попросить заполнить блоки на основе вашего настоящего резюме, добавить ссылки на картинки или сделать что угодно ещё, на что хватит фантазии. Надеемся, это руководство вам пригодилось и вы получили важный навык генерации кода с помощью ИИ.

Другие материалы: