Claude UI: как сделать интерфейс приложения в артефактах 2026

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

Артефакты: где в Claude появляется рабочий интерфейс

Под интерфейсом в Claude обычно понимают одно из двух: либо окно самого чата (боковое меню, проекты, настройки), либо интерфейс, который вы делаете руками Claude. Здесь про второе. Инструмент для этого один и встроенный: артефакты. Claude выносит в отдельное окно результат, который считает самостоятельным, обычно от 15 строк, и который вы захотите редактировать и переиспользовать (справка Anthropic).

В артефакт попадают несколько типов содержимого:

• интерактивные компоненты React, это и есть готовый интерфейс с состояниями и кликами;
• одностраничные сайты на HTML;
• картинки SVG, схемы и диаграммы;
• код на любом языке и текстовые документы в Markdown.

Артефакты работают на тарифах Free, Pro, Max, Team и Enterprise, но постоянное хранилище и подключение внешних сервисов по MCP доступны только на платных (справка Anthropic). Если окно артефакта не появляется вообще, проверьте настройки: возможность выполнения кода и создания файлов должна быть включена (справка Anthropic).

Как устроено само окно чата, где лежат проекты и стили, рассказывает обзор интерфейса claude.ai, повторяться не будем.

Первый экран по шагам

1. Откройте новый чат. Смешивать сборку интерфейса с другими задачами в одной переписке не стоит, Claude начнёт тянуть в код лишний контекст.
2. Опишите экран одним абзацем: что за приложение, какие блоки идут сверху вниз, что на них нажимается и что при этом происходит.
3. Дождитесь окна артефакта справа и потыкайте результат руками: нажмите каждую кнопку, заполните каждое поле, проверьте, что ничего не ломается.
4. Дайте одну правку за раз и дождитесь новой версии. Пять пожеланий в одном сообщении обычно дают экран, в котором сломались два из них.
5. Откройте код кнопкой в правом нижнем углу окна артефакта, скопируйте его или скачайте файл.

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

По теме: Claude Design и дизайн через ИИ: как использовать в 2026

Как описать интерфейс, чтобы не переделывать пять раз

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

• задача экрана: что человек делает на этой странице и с чем уходит;
• блоки сверху вниз: заголовок, кнопка действия, список, итоги, подвал;
• данные для примера: сколько строк показать и какие они, иначе Claude придумает свои и обычно неудачные;
• состояния: список пуст, идёт загрузка, ошибка, действие выполнено. Без этого пункта интерфейс красив ровно до первого пустого списка;
• поведение на телефоне: одна колонка, крупные кнопки, что скрывается на узком экране;
• ограничения: без обращений к интернету, без внешних библиотек, всё в одном файле.

Готовый скелет описания, который можно скопировать и переделать под себя:

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

Просите Claude перечислить, что он менял в новой версии. Так вы за секунду видите, что вместе с цветом кнопки уехала логика списка, а не находите это через двадцать правок.

Правки по шагам: язык, который Claude понимает

Интерфейс правится описанием желаемого поведения, технические термины не нужны. Работают конкретные короткие просьбы, где видно объект правки и результат:

• «Сделай главную кнопку крупнее и на всю ширину на телефоне, остальное не трогай»;
• «Добавь тёмную тему с переключателем в шапке, тема запоминается на время сессии»;
• «Покажи заглушку, когда список пуст: короткая фраза и кнопка добавления»;
• «Уменьши отступы между карточками вдвое, шрифт заголовка оставь как есть»;
• «Сделай так, чтобы на узком экране таблица прокручивалась вбок, а не ломала страницу».

Фраза «остальное не трогай» экономит больше всего времени. Если правка всё же испортила экран, вернитесь к прежней версии артефакта переключателем версий и переформулируйте просьбу точнее. Общую структуру запросов, от роли до критериев результата, объясняет статья про промпты для Claude.

Как забрать код себе и где его держать

1. В окне артефакта переключитесь на код и скопируйте его или скачайте файл.
2. Для HTML-страницы этого достаточно: сохраните её как index.html, откройте двойным кликом и убедитесь, что вне чата всё работает так же.
3. Для компонента React код нужно положить в проект: попросите Claude в том же чате собрать вокруг компонента минимальный проект и объяснить, какие файлы куда класть.
4. Дальше правки удобнее вести в редакторе: Claude Code работает с папкой проекта целиком и не переписывает файл заново на каждую мелочь.
5. Публикацию в интернете делайте отдельным шагом, когда экран уже устраивает.

Есть и путь без переноса: кнопка публикации даёт артефакту публичную ссылку, открыть и потыкать его можно без регистрации. Два условия стоит знать заранее: отмена публикации необратима, повторно опубликовать тот же артефакт нельзя, а на тарифах Team и Enterprise ссылкой делятся только внутри команды (справка Anthropic).

По теме: Чат Claude: как устроен интерфейс claude.ai и функции в 2026

Где артефакты упираются в потолок

Артефакт это витрина и логика внутри одного файла. Всё, что живёт снаружи, ограничено:

• произвольных обращений к внешним API у артефактов нет, данные приходится держать внутри кода (Anthropic); на платных тарифах часть внешних сервисов подключается через MCP;
• постоянное хранилище есть, но с рамками: до 20 МБ на артефакт, только текст, без картинок и файлов, и работает оно у опубликованного артефакта (справка Anthropic);
• ИИ внутри приложения возможен: артефакт умеет обращаться к самому Claude без ключей и настройки, при этом расход считается тому, кто пользуется приложением, а не автору (Anthropic);
• своя база данных, регистрация пользователей, приём оплаты и почтовые рассылки в артефакте не делаются, для этого код выносят наружу (инструкция Anthropic);
• тяжёлая логика на много экранов внутри одного файла становится неуправляемой, переносить в проект лучше раньше, чем позже.

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

Частые вопросы

Есть ли у Claude отдельный конструктор интерфейсов, который надо скачать?

Нет. Отдельной программы для сборки интерфейсов у Anthropic нет: всё происходит в обычном чате, а результат открывается в окне артефакта. Скачивается по итогу только код, который вы забираете себе.

Получится ли собрать интерфейс на бесплатном тарифе?

Да, артефакты поддерживаются в том числе на Free. Ограничения бесплатного тарифа другие: общий объём переписок за период и недоступность постоянного хранилища с подключением сервисов по MCP (справка Anthropic).

Почему вместо окна с интерфейсом приходит просто код в чате?

Чаще всего просьба звучит слишком мелко: короткий кусок кода Claude в артефакт не выносит. Помогает прямая формулировка вида «собери рабочий экран целиком, одним файлом, чтобы я мог его сразу потыкать». Если и это не сработало, проверьте в настройках возможность выполнения кода и создания файлов.

Сохранится ли приложение после закрытия чата?

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

Можно ли отдать такой экран заказчику как готовую работу?

Как прототип и демонстрацию идеи, да, это нормальная практика. Как боевой продукт, только после переноса в проект: там появляются данные, домен, формы и всё, что артефакт по устройству не покрывает.