Курс

Мини-приложения одним промптом

МОДУЛЬ 1: ПЕРВЫЕ ШАГИ • Урок 2 из 3

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

ЧАСТЬ 1: Что такое мини-приложение

Мини-приложение — небольшой интерактивный инструмент, который работает прямо в браузере. Он сделан из трёх технологий: HTML (структура), CSS (внешний вид) и JavaScript (логика). Всё в одном файле — не нужно ничего устанавливать.

Что можно создать:
  • Таймер фокуса — засекает время, напоминает о перерывах
  • Мини-CRM — карточки клиентов с канбан-доской
  • Калькулятор ипотеки — платёж, переплата, график погашения
  • Трекер привычек — ежедневные отметки с серией дней подряд
  • Генератор договоров — заполнил форму, получил текст
  • Дневник тренировок — упражнения, веса, прогресс на графиках
  • ... и ещё 44 приложения из этого урока

ЧАСТЬ 2: Claude Artifacts — где это всё создаётся

🧠 Простыми словами:

Claude Artifacts — режим, когда Claude не просто описывает код, а сразу создаёт живое приложение с превью справа. Ты видишь результат мгновенно и можешь с ним взаимодействовать прямо в чате.

[ КАК ЭТО ВЫГЛЯДИТ ]

  1. Открываешь claude.ai (бесплатный аккаунт)
  2. Пишешь промпт — просишь создать приложение
  3. Экран делится пополам: слева чат, справа живое приложение
  4. Можешь нажимать кнопки, вводить текст — всё работает прямо там
  5. Просишь изменить цвет, добавить функцию — превью обновляется
  6. Скачиваешь готовый HTML-файл одной кнопкой
💡 Claude.ai vs Claude Code:

Claude.ai — веб-сайт, работает в браузере, ничего устанавливать не нужно. Идеально для мини-приложений.

Claude Code — расширение для редактора кода, для полноценных сайтов и сервисов. Этому посвящён весь остальной курс.

ЧАСТЬ 3: Как составить правильный промпт

Секрет не в магии — а в конкретике. Все промпты ниже написаны по единой структуре:

Создай [название] в Artifact. [описание функционала]. [Дизайн и требования]. localStorage.
💡 Ключевые фразы в каждом промпте:
  • «в Artifact» — включает режим живого превью
  • «без внешних библиотек» — один самодостаточный файл
  • localStorage — данные сохраняются между сессиями

ЧАСТЬ 4: 50 готовых промптов — копируй и пробуй

50 приложений 10 категорий Всё бесплатно Работает с бесплатным Claude
Калькулятор стоимости услуг #01
Создай интерактивный калькулятор стоимости ремонта квартир в Artifact. Пользователь выбирает: тип помещения, площадь, вид ремонта (косметический / капитальный / дизайнерский), опции (тёплый пол, потолки, электрика). Калькулятор показывает итоговую сумму с разбивкой по работам и материалам. Дизайн минималистичный, профессиональный. Кнопка «Оставить заявку» с формой. localStorage.
Генератор коммерческих предложений #02
Создай генератор КП в Artifact. Поля: название компании, логотип (загрузка или заглушка), клиент, список услуг с ценами, скидка, срок действия, условия. Живой предпросмотр в профессиональном шаблоне. Три варианта дизайна. Кнопка «Печать/PDF». localStorage сохраняет шаблон компании.
Конструктор прайс-листа #03
Создай редактор прайс-листа в Artifact. Категории услуг, названия, цены, описания, пометка «хит» или «новинка». Живой предпросмотр в красивом виде — как на сайте. Поиск и фильтр по категориям. Кнопка «Печать». Можно скинуть клиенту ссылку вместо PDF. localStorage.
Калькулятор себестоимости #04
Создай калькулятор себестоимости товара в Artifact. Вводишь: материалы (название, количество, цена), время работы, стоимость часа, накладные расходы (аренда, свет, доставка — раскидать на единицу). Считает: себестоимость, наценку, рекомендованную цену, маржу. Сохранение карточек товаров. localStorage.
Генератор ценников #05
Создай генератор ценников в Artifact. Вводишь: название товара, цена, старая цена (зачёркнутая), штрихкод (опционально), краткое описание. Выбираешь размер и шаблон. Предпросмотр сетки ценников на листе А4. Печать — вырезал и расставил. localStorage для сохранения каталога товаров.
Генератор QR-визитки #06
Создай генератор цифровой визитки в Artifact. Пользователь вводит: имя, должность, телефон, email, telegram, сайт. Приложение генерирует красивую визитку + QR-код (vCard формат). Человек сканирует QR — контакт сразу сохраняется в телефон. Три стиля дизайна. Кнопка печати.
Генератор договоров #07
Создай конструктор типового договора на оказание услуг в Artifact. Форма: исполнитель (ИП/физлицо, данные), заказчик, предмет договора, сроки, сумма, порядок оплаты, ответственность. На выходе — готовый текст договора с подставленными данными. Печать. Шаблоны сохраняются в localStorage.
Генератор счетов и инвойсов #08
Создай генератор счетов/инвойсов в Artifact. Поля: данные моей компании (ИП/ООО, ИНН, расчётный счёт), данные клиента, список услуг с ценами и количеством. Автоматический подсчёт итога с НДС и без. Кнопка «Печать» — открывает версию для печати/PDF. Шаблон строгий, деловой. localStorage.
Анализатор и конструктор дизайна #50
Создай инструмент для анализа и создания дизайна в Artifact. Два режима: Режим 1 — Генератор палитры: вводишь сферу бизнеса и настроение (доверие / энергия / премиум / дружелюбие). Приложение генерирует палитру из 5 цветов (основной, акцент, фон, текст, нейтральный) с HEX-кодами. Показывает как выглядит UI с этими цветами: кнопки, карточки, заголовки. Кнопка «Копировать CSS-переменные». Режим 2 — Чеклист анализа дизайна: загружаешь описание своего интерфейса (или вставляешь URL). Система оценивает по критериям: иерархия (есть ли главный акцент?), контрастность (читаемость текста), отступы и выравнивание, количество шрифтов, цветовая гармония, мобильная адаптация. По каждому — оценка 1–5 + конкретный совет по улучшению. Дизайн инструмента — профессиональный тёмный. Без внешних библиотек. localStorage сохраняет палитры.
Мини-CRM #09
Создай мини-CRM в Artifact. Карточки клиентов: имя, телефон, email, откуда пришёл, статус (новый / в работе / закрыт / отказ). К каждому клиенту — лента заметок и следующий шаг с датой. Канбан-доска: колонки по статусам, карточки перетаскиваются. Фильтр и поиск. localStorage.
Дашборд для малого бизнеса #10
Создай панель управления для малого бизнеса в Artifact. Страницы: дневная выручка (ввод суммы за день), график выручки за месяц, учёт расходов по категориям (аренда, зп, продукты, прочее), итог прибыли. Всё хранится в localStorage. Экспорт данных в CSV.
Табель учёта рабочего времени #11
Создай табель в Artifact. Сотрудники (имя, ставка/час). По дням месяца: отработано часов, больничный, отпуск, выходной. Автоподсчёт: часов за месяц, переработки, сумма к выплате. Итоги по всем сотрудникам. Печать. localStorage.
Учёт аренды для арендодателя #12
Создай учёт сдачи квартир в Artifact. Объекты (адрес, арендатор, сумма, дата платежа). Календарь оплат: зелёный — оплачено, красный — просрочка, серый — впереди. Учёт расходов на объект (ремонт, налоги, коммуналка). Итог: чистая прибыль по каждому объекту и суммарно. localStorage.
Планировщик контента #13
Создай контент-план в Artifact. Календарная сетка на месяц. В каждый день — карточка поста: платформа, тема, тип (рилс / сторис / пост / статья), статус (идея / в работе / готов / опубликован). Цветовая кодировка по платформам. Статистика: сколько запланировано, сделано, пропущено. localStorage.
Генератор постов для соцсетей #14
Создай конструктор постов в Artifact. Пользователь выбирает: платформа (Telegram / VK / Instagram), тип поста (продающий / информационный / развлекательный / сторителлинг), вводит тему и ключевые мысли. Приложение показывает структуру поста по формуле AIDA, поля для заполнения каждого блока, счётчик символов, предпросмотр готового текста. Кнопка «Копировать».
Домашняя бухгалтерия #15
Создай семейный бюджет в Artifact. Доходы (зарплата, подработка, прочее) и расходы по категориям. Ввод одной кнопкой: сумма + категория. Круговая диаграмма расходов. Линейный график доходы vs расходы по месяцам. Цель накопления с прогресс-баром. localStorage. Экспорт CSV.
Трекер долгов и подписок #16
Создай трекер финансовых обязательств в Artifact. Два раздела: долги (кому должен / кто должен мне, сумма, дата, статус) и подписки (название, сумма, дата списания, ежемесячно/ежегодно). Показывает: общая сумма подписок в месяц и в год, ближайшие платежи, просроченные долги. localStorage.
Калькулятор сложного процента #17
Создай инвестиционный калькулятор в Artifact. Вводишь: начальная сумма, ежемесячное пополнение, процент годовых, срок в годах. Показывает: итоговую сумму, сколько из неё твои деньги а сколько проценты, график роста по годам. Сравнение: «если не инвестировать — будет X, если инвестировать — Y». Слайдеры для быстрой подстройки.
Калькулятор зарплаты и налогов #18
Создай зарплатный калькулятор в Artifact. Режимы: сотрудник (gross → net, НДФЛ, вычеты на детей) и ИП (доход, УСН 6% или 15%, взносы, итого на руки). Сравнение: «если оформлен в штате получишь X, если как ИП — Y, как самозанятый — Z». Годовой итог.
Разделитель счетов #19
Создай приложение для разделения общих расходов в Artifact. Добавляешь участников, вносишь траты (кто заплатил, за что, сколько, на кого делится). Приложение считает кто кому сколько должен — минимальным количеством переводов. История в localStorage. Кнопка «Скинуть итог» — копирует текст для отправки в чат.
Таймер фокуса с журналом задач #20
Создай Pomodoro-таймер в Artifact. 25 минут работа / 5 минут отдых / каждый 4-й перерыв 15 минут. Перед стартом пишешь задачу. После — отмечаешь сделано или нет. В конце дня — статистика: сколько помидоров, на что потрачено время, процент завершённых задач. История по дням в localStorage. Звуковой сигнал по окончании.
Трекер привычек #21
Создай трекер привычек в Artifact. Функции: добавить привычку, отмечать выполнение по дням, streak (серия дней подряд), прогресс в процентах, недельная и месячная статистика в виде тепловой карты. Данные хранятся в localStorage — не пропадают при перезагрузке. Дизайн как у Notion — чистый, приятный.
Конструктор резюме #22
Создай конструктор резюме в Artifact. Пошаговая форма: имя, контакты, фото-заглушка, опыт работы (добавлять строки), навыки (теги), образование, о себе. Справа — живой предпросмотр в профессиональном шаблоне. Три шаблона дизайна на выбор. Кнопка «Печать в PDF». localStorage для сохранения между сессиями.
Дневник самочувствия #23
Создай дневник здоровья в Artifact. Ежедневно отмечаешь: настроение (1-10), энергия (1-10), сон (часы), вода (стаканы), симптомы (выбор из списка + свои), заметки. Графики трендов за неделю/месяц. Корреляции: «когда спишь меньше 7 часов — настроение в среднем на 3 пункта ниже». localStorage. Экспорт в CSV для врача.
Трекер лекарств и витаминов #24
Создай напоминалку о приёме лекарств в Artifact. Добавляешь: название, дозировка, время приёма (утро/день/вечер/ночь), до или после еды, курс (с — по). Ежедневный чек-лист, отмечаешь галочкой принятое. История пропусков. Предупреждение: «курс магния заканчивается через 3 дня — купить». localStorage.
Планировщик питания #25
Создай планировщик питания в Artifact. Пользователь вводит: вес, рост, цель (похудеть/набрать/поддержать), аллергии. Приложение генерирует меню на неделю с рецептами, считает КБЖУ, показывает список продуктов для закупки. Можно заменять блюда. localStorage.
Дневник тренировок #26
Создай журнал тренировок в Artifact. Выбираешь тип (зал / бег / йога / своё). Для зала: упражнение, подходы, повторения, вес. Для бега: дистанция, время, пульс. История тренировок, прогресс по каждому упражнению в графиках (был жим 40кг → стал 60кг). Персональные рекорды. localStorage.
Конструктор программы тренировок #27
Создай конструктор программы тренировок в Artifact. Выбираешь цель (масса / рельеф / сила), количество дней в неделю (3-6), доступное оборудование. Приложение генерирует сплит с упражнениями, подходами, повторениями. Таймер отдыха между подходами. Чекбоксы выполнения. Прогрессия весов. localStorage.
Учёт продуктов в холодильнике #28
Создай приложение учёта продуктов в Artifact. Добавляешь продукт, количество, дату покупки, срок годности. Приложение показывает: что скоро испортится (красным), что заканчивается, список покупок на основе того что закончилось. Категории: молочное, мясо, овощи, крупы. localStorage.
Планировщик ремонта #29
Создай планировщик ремонта квартиры в Artifact. Комнаты (добавляешь свои), в каждой — список работ с чекбоксами, бюджет (план / факт), статус. Общий прогресс-бар. Таймлайн: когда какая комната, зависимости (сначала электрика, потом стены). Итого: запланировано / потрачено / осталось. localStorage.
Трекер комнатных растений #30
Создай уход за растениями в Artifact. Добавляешь растение: название, фото-заглушка по типу, частота полива, частота подкормки, любит свет или тень. Чек-лист на сегодня: что полить, что подкормить. Отмечаешь выполнение. Предупреждение если пропустил. История ухода. localStorage.
Журнал обслуживания автомобиля #31
Создай журнал обслуживания авто в Artifact. Вносишь: пробег, дату, вид работ (масло, тормоза, шины, фильтры — выпадающий список + своё), стоимость, место. Приложение напоминает: «масло менялось 9800 км назад — пора менять». Статистика расходов по месяцам и категориям. Несколько авто. localStorage.
Тренажёр по английскому #32
Создай тренажёр по английскому в Artifact. Режим: показывает русское слово/фразу — пользователь пишет перевод — приложение проверяет. 100 самых нужных бизнес-фраз. Прогресс-бар, статистика ошибок, режим повторения слабых слов. Данные в localStorage.
Трекер чтения #33
Создай читательский дневник в Artifact. Добавляешь книгу: название, автор, страниц. Отмечаешь прогресс (на какой странице). Полка: хочу прочитать / читаю / прочитано. Статистика: книг в год, страниц в месяц, график по жанрам. Заметки и цитаты к каждой книге. localStorage.
Тренажёр таблицы умножения #37
Создай тренажёр таблицы умножения в Artifact для детей. Режим: случайный пример (например 6×7=?), пользователь вводит ответ, мгновенная проверка с анимацией. Уровни сложности: одна таблица / все до 10 / все до 20. Таймер на скорость. Статистика: правильных/неправильных ответов, личный рекорд, разбор ошибок в конце. Дизайн яркий, игровой — для детей 6–10 лет. localStorage.
Флеш-карты для школьника #38
Создай приложение флеш-карточек для учёбы в Artifact. Пользователь создаёт колоды по предметам: название колоды + карточки (термин / определение). Режимы: листать карточки / тест (написать ответ). Статистика запоминания: знаю / не знаю по каждой карточке. Режим повторения — показывает только сложные карточки. Несколько колод. localStorage.
Дневник оценок #39
Создай дневник успеваемости в Artifact. Пользователь добавляет предметы и вводит оценки с датами и комментарием учителя. Автоматически считает средний балл по каждому предмету и общий GPA. График успеваемости по неделям. Раздел «Нужно подтянуть» — предметы где средняя ниже 4. Родительский просмотр без редактирования. localStorage.
Конструктор викторин #40
Создай конструктор викторин в Artifact. Режим создания: вводишь вопрос + 4 варианта ответа + отмечаешь правильный. Режим прохождения: вопросы по одному, счётчик правильных, прогресс-бар. В конце: результат в процентах + разбор ошибок с правильными ответами. Можно создать несколько квизов по разным темам. localStorage.
Таймер экранного времени #34
Создай таймер экранного времени для родителей в Artifact. Кнопки активности: «Мультики», «Игра на планшете», «Уроки», «Чтение», «Прогулка». Нажал — пошёл отсчёт. Нажал снова — остановился. Дневной лимит на экранное время (настраивается). Когда лимит близко — жёлтый индикатор, когда превышен — красный. Статистика за неделю: сколько часов на что потрачено. localStorage.
Чарт домашних обязанностей #41
Создай расписание домашних обязанностей для семьи в Artifact. Добавляешь членов семьи (имя + аватар-эмодзи). Создаёшь задачи: мыть посуду, пылесосить, выносить мусор. Назначаешь по дням недели. Каждый отмечает галочкой выполненное. Система баллов — дети зарабатывают очки за выполнение задач. Лидерборд недели. localStorage.
Трекер роста ребёнка #42
Создай трекер физического развития ребёнка в Artifact. Добавляешь замеры: дата, возраст в месяцах, рост (см), вес (кг), окружность головы. График роста по месяцам. Сравнение с нормами ВОЗ: зелёный если в норме, жёлтый если пограничное, красный — нужно к врачу. Несколько профилей для разных детей. Экспорт данных для педиатра. localStorage.
Утренние ритуалы для ребёнка #43
Создай интерактивный чек-лист утренних и вечерних ритуалов для детей в Artifact. Два режима: Утро и Вечер. Задачи с большими эмодзи-иконками: умылся 🚿, почистил зубы 🦷, оделся 👕, позавтракал 🥣, собрал рюкзак 🎒. Ребёнок сам нажимает — задача зачёркивается с яркой анимацией. Финальный экран с поздравлением когда всё сделано. localStorage для настройки списка.
Планировщик путешествия #35
Создай планировщик поездки в Artifact. Вводишь: город, даты, бюджет, интересы (еда / архитектура / природа / ночная жизнь). Создаёшь план по дням: утро / день / вечер, к каждому слоту — место и заметка. Чек-лист сборов. Бюджет: план по категориям (жильё, еда, транспорт, развлечения) и факт. localStorage.
Упаковочный чек-лист #44
Создай умный чек-лист для сборов в дорогу в Artifact. Пользователь выбирает: тип поездки (море / горы / деловая / зима), длительность (3 / 7 / 14+ дней), с детьми (да/нет). Приложение генерирует список вещей по категориям: документы, одежда, гигиена, техника, аптечка, развлечения. Отмечаешь собранное галочкой. Можно добавить свои пункты. localStorage.
Бюджет поездки #45
Создай трекер расходов в путешествии в Artifact. Добавляешь участников и общий бюджет поездки. Вносишь траты: сумма, валюта, категория (жильё / еда / транспорт / развлечения), кто заплатил. Автоматическая конвертация в рубли по заданному курсу. Итог: потрачено / осталось, разбивка по категориям. Кто из группы сколько должен кому. localStorage.
Маршрут по городу #46
Создай планировщик маршрута по городу в Artifact. Добавляешь места: название, адрес, категория (музей / еда / парк / шопинг / смотровая), часы работы, заметка. Устанавливаешь порядок перетаскиванием. Итого: количество мест и примерное время маршрута. Ссылка «Открыть в Google Maps» для каждого адреса. Несколько маршрутов по дням. localStorage.
Оценщик стоимости квартиры #36
Создай калькулятор стоимости недвижимости в Artifact. Вводишь: город, район, площадь, этаж/этажность, ремонт (без / косметический / евро / дизайнерский), год дома, материал стен. Приложение считает примерный диапазон цены по формулам средних цен за м². Сравнение: продавать или сдавать (окупаемость аренды в годах). Без внешних библиотек.
Калькулятор ипотеки #47
Создай ипотечный калькулятор в Artifact. Вводишь: стоимость жилья, первоначальный взнос, процентная ставка, срок в годах. Показывает: ежемесячный платёж, сумма всех выплат, переплата в рублях и процентах. График погашения: соотношение основного долга и процентов по месяцам — как меняется со временем. Слайдеры для быстрой подстройки. Сравнение двух сценариев рядом. Без внешних библиотек.
Чек-лист осмотра квартиры #48
Создай чек-лист для осмотра квартиры при покупке в Artifact. 40+ пунктов проверки по разделам: Документы, Электрика, Сантехника, Окна и двери, Стены и потолок, Отопление, Подъезд и соседи. К каждому пункту: галочка (в порядке / есть замечание / критично) + текстовая заметка. Итоговая оценка и список критичных проблем. Несколько сохранённых осмотров. localStorage.
Сравнение вариантов жилья #49
Создай сравнительную таблицу вариантов квартир в Artifact. Добавляешь квартиры с параметрами: цена, площадь, район, этаж/этажность, минут до метро, состояние ремонта, год постройки. Выбираешь критерии которые важны тебе и выставляешь вес каждого (от 1 до 5). Приложение автоматически считает итоговый рейтинг и выделяет победителя. Сортировка по любому параметру. Заметки к каждой квартире. localStorage.

ЧАСТЬ 5: Попробуй прямо сейчас

Выбери любой промпт выше, нажми «Скопировать» и вставь в Claude.ai.

Через 10–15 секунд у тебя будет работающее приложение.

Открыть Claude.ai →
⚠️ На бесплатном плане:

Есть лимит сообщений (~10–15 в день). Если лимит кончился — подожди несколько часов или зайди со второго аккаунта.

Что дальше

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

Но у этого подхода есть потолок: нет базы данных, нет авторизации, нет оплаты. Для полноценных продуктов нужен Claude Code — именно этому посвящены следующие уроки этого модуля.

Нет иностранной карты для оплаты Claude?
Telegram-бот поможет оформить зарубежный способ оплаты
и оплатить подписку Anthropic из России
Открыть в Telegram →
🌍 Телепорт для доступа
Если сервисы Anthropic не открываются — нажми сюда
и наш ассистент объяснит что делать
Получить доступ →

Ты узнал:

  • Что такое мини-приложение и как оно работает
  • Как использовать режим Claude Artifacts
  • Как составить промпт, который даёт точный результат
  • 50 готовых инструментов — бери и пользуйся

Выбери приложение которое нужно тебе лично — это лучший способ начать.