Разберём основы работы с Claude Desktop и создадим простой сайт на React. Специально для этого подготовлен сайт-библиотека с основными визуальными компонентами: app-117900122a91.vibecode.bitrix24.tech. Всю работу проводит ИИ-агент — мы лишь формулируем задачи и проверяем, что получилось.

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

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

BТехнологии: JavaScript, React, Vite, Tailwind, TypeScript

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

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

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

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

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

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

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

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

• Node.js — позволяет запускать JavaScript на компьютере, а не только в браузере. В React-проекте нужен для установки библиотек, запуска во время разработки и финальной сборки.
• Git Bash — терминал команд для Windows. Нужен агенту, чтобы скачивать проект, переходить между папками, ставить зависимости и выполнять команды. На macOS и Linux терминал уже есть.
• Python — иногда нужен вспомогательным инструментам внутри проекта. Некоторые зависимости используют его при сборке, а агент — для быстрой проверки гипотез.

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

1. Разрешение на изменения — для скорости ставим режим Auto, чтобы не проверять технические детали на каждом шаге. Проверяем только результат — визуально на локально запущенном сайте.
2. Рабочая модель — берём самую мощную из доступных, Opus 4.8.
3. Размер контекста — максимальный, чтобы агент помнил как можно больше из беседы. Использовали режим Max (есть и Fast — думает быстрее, но тратит больше токенов).

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

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

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

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

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

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

node -v
python3 --version

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как последнее действие добавим светлую тему и ещё пару компонентов shadcn/ui — календарь и выбор даты (Calendar и Date Picker). На этом запросе закончился 5-часовой лимит на тарифе, но агент всё равно завершил изменения:

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

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

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

Источник: habr.com