Привет! Начинаем серию статей-туториалов по видео Александра Сербула, руководителя больших данных, высоконагруженных систем и машинного обучения в компании Битрикс24.

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

Сегодня разберём основы работы с Claude Desktop и коротко расскажем про основные фронтенд-технологии. Специально для этого мы подготовили сайт-библиотеку с основными визуальными компонентами сайтов: app-117900122a91.vibecode.bitrix24.tech/

Сами программировать не будем — всю работу проводит ИИ-агент, а мы пишем запросы и контролируем результат.

Простыми словами: что такое фронтенд, сайт и компоненты

Чтобы было немного проще работать и не путаться в похожих вещах, сначала введём несколько базовых определений. Запоминать их необязательно, но если в середине статьи вам захочется внести ясность, можно вернуться сюда и перечитать.

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

Фронтенд — это только видимая часть сайта или веб-приложения. То есть страницы, кнопки, меню, формы для заполнения, с которыми может взаимодействовать пользователь — это всё фронтенд.

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

Компонент — отдельная часть интерфейса, из которой собирается страница. Компонентом может быть кнопка, карточка товара, всплывающее окно. Разработчик может использовать один и тот же готовый компонент в нескольких местах сайта.

Мы сегодня сделаем простой сайт. В нём будет только фронтенд и некоторые компоненты, которые мы подсмотрим на другом сайте-библиотеке. 

Некоторые технические подробности: что такое JavaScript, React, Vite, Tailwind и TypeScript

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

Ниже — краткое описание нескольких основных технологий, которые часто используют при разработке фронтенда.

JavaScript — язык программирования, который помогает делать страницы интерактивными. Благодаря JavaScript сайт может реагировать на действия пользователя, например открывать меню или показывать уведомления.

TypeScript — это расширение JavaScript, которое добавляет более строгую проверку кода. Это помогает раньше находить ошибки и делает проект понятнее, даже для ИИ-агента.

React — это бесплатная и самая популярная библиотека для создания интерактивных компонентов и веб-страниц. Можно сказать, что это инструмент для создания интерфейсов из готовых компонентов. Он помогает разработчику описать, из каких частей состоит страница и как она должна меняться при действиях пользователя.

Vite — технология для запуска и сборки фронтенд-проекта. Vite помогает быстро открыть проект на компьютере во время разработки, а потом подготовить его к публикации.

Tailwind нужен для настройки внешнего вида интерфейса. С его помощью разработчик устанавливает для компонентов отступы, цвета, размеры, шрифты и другие визуальные свойства.

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

Почему мы выбрали именно эти инструменты: это один из самых популярных современных наборов для веб-интерфейсов. Все технологии бесплатные и открытые, с большими сообществами. Это проверенный стек, на котором работают тысячи команд по всему миру.

Что такое shadcn/ui и что подготовили мы

Это популярный независимый открытый проект с готовыми компонентами для React-интерфейсов. Он помогает быстрее собрать аккуратный интерфейс и добавить кнопки, таблицы и другие элементы. 

Главная особенность shadcn/ui в том, что компоненты добавляются прямо в код проекта, поэтому их можно менять под свой дизайн и задачи.

Наш коллега Александр Сербул собрал отдельный сайт, где можно посмотреть на 50 основных компонентов в интерактивном режиме:

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

• Вы видите большое количество доступных возможностей, которые можно использовать, и можете выбрать среди них нужные.

• ИИ-ассистент тоже знает, что такое shadcn/ui, и если вы попросите его добавить, например, плавающие подсказки Tooltip или Switch-переключатели, он вас поймёт.

Что нужно для работы

Для статьи нам понадобится приложение Claude Desktop с минимальной оплаченной подпиской. Приложение нужно скачать с официальной страницы и установить себе на компьютер.

Кроме Claude Desktop, есть ещё несколько программ, которые должны быть установлены в системе, чтобы сегодняшний проект работал:

• Node.js позволяет запускать JavaScript на компьютере, а не только в браузере. В таком React-проекте, как у нас, Node.js нужен для установки библиотек, запуска проекта во время разработки и подготовки финальной сборки.

• Git Bash, терминал команд для Windows. Он понадобится агенту, чтобы скачивать проект, переходить между папками, запускать установку зависимостей и выполнять другие команды из инструкции. На macOS и Linux такой терминал уже есть, поэтому скачивать ничего не нужно.

• Python — это язык программирования, который иногда нужен вспомогательным инструментам внутри проекта. Сам React-проект может быть написан на JavaScript и TypeScript, но некоторые зависимости при установке могут использовать Python для сборки. Ещё Python может использовать агент для быстрой проверки гипотез при разработке.

Шаг 1: готовим место для проекта и настраиваем агента

В статье работаем в Claude Desktop во вкладке Code: через неё Claude действует как ИИ-агент для разработки проекта.

Внизу окна можно настроить несколько вещей. У нас настройки такие: 

1. Разрешение на внесение изменений — для скорости выставляем режим Auto, чтобы не проверять технические вещи на каждом шаге. Мы будем проверять только результаты и только визуально на локально запущенном сайте.

2. Рабочую модель берём самую мощную из доступных на сегодня — Opus 4.8.

3. Размер контекста выставляем максимальный, чтобы агент помнил как можно больше из нашей беседы. Мы использовали режим Max — можно также выбрать режим Fast, в котором модель думает быстрее, но и тратит больше токенов.

Ещё одна вещь, которую нужно сделать до начала работы — в какой папке можно создать проект и работать над ним:

Claude спросит, можно ли доверять этой папке — подтвердите, что доверять можно:

Шаг 2: просим агента создать сайт

Для начала мы просто скопируем промпт с сайта с React-компонентами:

Сделай пустой минимальный сайт на React/Vite/Tailwind с компонентами shadcn/ui, пока без TypeScript, мы его добавим отдельно

Обратите внимание, что мы задаём довольно точный набор инструментов в запросе — иначе Claude начнёт уточнять, как нужно работать, или выберет технологии на своё усмотрение. Мы сразу зададим точный и надёжный стек.

Проверить, установлено ли в системе всё нужное, можно на вкладке Терминала:

В терминале можно ввести такие команды — они универсальные для всех систем:

node -v

python3 --version

Если программы установлены, терминал покажет текущую версию.

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

Шаг 3: запускаем превью

Чтобы посмотреть, каким получается наш сайт, нужно запустить превью по специальной кнопке вверху.

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

Через некоторое время можно будет посмотреть результат:

Шаг 4: добавляем компоненты на сайт

Попробуем пойти по сценарию и скопировать следующий промпт про создание Menubar:

Вставляем промпт в окно работы с Claude и ждём результат:

В конце работы агент даёт подробный отчёт о проделанной работе, включая ссылки на файлы в проекте, которые он менял и код которых можно посмотреть:

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

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

Когда агент создал сайт, то в отчёте расписал структуру проекта, то есть из каких файлов и папок состоит наш сайт:

Всё это можно посмотреть на вкладке Files:

Шаг 5: вносим правки через визуальные схемы

Агенту можно помочь, если точно указать, что именно мы хотим сделать. Один из вариантов сделать такое уточнение — сделать рисунок прямо на скриншоте браузера в окне предпросмотра. На картинке ниже в окне браузера мы выделили меню красным прямоугольником и добавил стрелку вправо. Если после этого внизу нажать Add to chat, агент добавит эту картинку в промпт:

После этого можно дописать словами, что нужно сделать, и отправить этот запрос агенту:

Можно сделать по-другому — выбрать конкретный элемент на странице, и тогда Claude сохранит о нём данные и передаст их в запрос:

Шаг 6: создаём новую версию сайта

Теперь попробуем более сложный запрос: попросим агента переделать дизайн сайта и добавить туда изображения и новые элементы shadcn/ui:

Над окном предпросмотра можно увидеть надпись localhost:5173 — по этому адресу в браузере будет открываться наш сайт. Следить за изменениями можно там:

В моём случае агенту понадобилось несколько минут, чтобы поменять дизайн и добавить несколько элементов:

В качестве последнего действия на сегодня добавим светлую тему и ещё пару shadcn/ui-компонентов: календарь и возможность выбора даты. Эти элементы называются Calendar и Date Picker.

На этом запросе у меня закончился 5-часовой лимит на использование Claude на моём тарифе, но агент всё равно закончил изменения:

Что сделаем дальше

Claude — сильный помощник для разработки: он хорошо ориентируется во многих технологиях, может писать код, объяснять ошибки и предлагать варианты решения. Некоторые вещи ИИ пока даются не так хорошо — например, проектирование архитектуры приложений. А другие задачи нейросети пока не умеют делать полностью самостоятельно, поэтому им нужны дополнительные инструменты.

В следующих статьях мы продолжим создавать приложения на React с Claude Desktop и расскажем о других полезных вещах: как добавить систему контроля версий, автотесты, подготовиться к деплою и развернуть своё приложение в интернете, чтобы им могли пользоваться другие люди.

А пока — почитайте и посмотрите на shadcn/ui-компоненты, которые можно будет использовать в будущем приложении:
app-117900122a91.vibecode.bitrix24.tech/