17 | ‣

⏱ Время на настройку: 3–5 минут 🎯 Результат: ты получаешь свой личный интерактивный прототип обучающего мобильного приложения “Duolingo для тибетского” — интерактивный, понятный и настроенный на практику

📱 Получится даже с телефона

image

Почему все кайфуют от вайб-кодинга

🌍 Закинул промпт — и через 3-5 минут уже можно тестировать идею с друзьями/клиентами/учениками (вместо недель, найма команды разработки и сотен тысяч бюджета)

🎨 Готовый UX/UI — получаешь современный интерфейс с анимациями и понятной навигацией, как в топовых образовательных приложениях

🧠 Быстрое погружение в играбельный/интерактивный прототип — без дизайнера и разработчика

🎨 Идеально, когда хочется чего-то такое из приложений и сервисов, чего прямо сейчас нет или стоит дорого (например, тибетский язык)

С этой штукой ты научишься

✅ Создавать интерактивные обучающие приложения за несколько минут без навыков программирования на базе готового промпта

Тебе понадобится

🧠 Идея или тема приложения

💻📱 Компьютер или телефон

🌍 VPN

🪄 Что будем делать

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

Идём в ClaudeClaude и вставляем промпт на генерацию экранов для первых двух “дней” изучения тибетского:

Create a React component for a Tibetan alphabet learning app with Duolingo-style UI. The app should teach two letters across 2 days:
Day 1 - Letter ཨ (sounds like "A"):

Intro screen with large ཨ and "Start Learning" button
Audio recognition: play "A" sound, user selects ཨ from choices [ཨ, ཀ, མ, ཁ]
Visual recognition: find ཨ in a 3x2 grid
Completion screen with celebration

Day 2 - Letter ཀ (sounds like "ka") + syllables:

Intro screen with large ཀ
Audio recognition: play "ka" sound, user selects ཀ from choices
Syllable building: show how ཀ + ོ = ཀོ (ko)
Completion screen

UI Requirements:

Green header bar with streak/hearts/XP counters (use Flame, Heart, Star icons from lucide-react)
Progress bar showing current screen / total screens
Day 1/Day 2 toggle buttons in header
Mobile-first design with rounded cards and shadows
Celebration animation (+XP) when answers are correct
Choice buttons in grid layout with hover effects
Green/red feedback for correct/wrong answers

State Management:

currentDay (1 or 2)
currentScreen (index within day)
userProgress object with xp, hearts, streak
answers object to track responses

Features:

XP rewards: intro=10, exercises=15-20, completion=50+
Hearts decrease on wrong answers
Letter deck collection system
Navigation between screens with prev/next buttons
Celebration modal with bouncing animation

Make it colorful, engaging, and educational. Use Tailwind CSS classes. Include proper error handling and smooth transitions.

И получаем играбельное приложение, которое можно протестировать, и если нравится — опубликовать через кнопку [Publish] и пошерить ↓

image

Если пробуете несколько раз, то в Claude есть раздел Artifacts, в котором можно переключаться между версиями, документами и приложениями ↓

image

Что ждём в отчёте

  • 📸 Скриншот какого-то из экранов
  • 🔗 Ссылка на приложение
  • 💠 Какую идею взяли в работу?
  • 😇 1–2 инсайта: как это можно использовать в вашей работе?
  • ⏱ Сколько времени заняло? Сделали с телефона или компьютера?

⭐ Задание со звёздочкой (и альтернативы)

1 — От “отличников” мы ждём, конечно, или стартапа, или на худой приложение для собственных нужд — таск-трекер, калькулятор, трекер еды, аналитический дашборд своего бизнеса или что-то такое. Если хочется реализовать свою идею, то сначала попросите Claude спроектировать промпт, а потом реализовать его в форме приложения

2— Если идей нет, и не хочется делать Duolingo, можно взять в разделе Artifacts https://claude.ai/artifacts любой другой пример приложения и кастомизировать под себя:

image

3 — Если хочется сделать расслабляющую интерактивную игру-игру (не в образовательных целях), возьмите такой промпт:

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

💳 Для подписчиков Claude Pro

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

🧼 Хозяйке на заметку

🎨 Про дизайн: Если тибетские шрифты отображаются некорректно, попроси ИИ использовать web-safe шрифты или добавить fallback-опции

📱 Мобильная версия: Приложение автоматически адаптируется под мобильные устройства — проверь, как выглядят карточки на телефоне

🔊 Звук: Для добавления реального произношения тибетских слов можешь интегрировать API внешнего сервиса (дойдем до них) или попросить ИИ добавить плейсхолдеры для аудиофайлов

💾 Сохранение прогресса: В базовой версии прогресс не сохраняется между сессиями, но можно доработать через чат

🚀 Масштабирование: Если идея зайдет, код можно экспортировать и доработать в полноценное приложение, подключив бэкенд и базу данных (об этом дальше)