⏱ Время на настройку: 3–5 минут 🎯 Результат: ты получаешь свой личный интерактивный прототип обучающего мобильного приложения “Duolingo для тибетского” — интерактивный, понятный и настроенный на практику
📱 Получится даже с телефона
- Почему все кайфуют от вайб-кодинга
- С этой штукой ты научишься
- Тебе понадобится
- 🪄 Что будем делать
- Что ждём в отчёте
- ⭐ Задание со звёздочкой (и альтернативы)
- 💳 Для подписчиков Claude Pro
- 🧼 Хозяйке на заметку
Почему все кайфуют от вайб-кодинга
🌍 Закинул промпт — и через 3-5 минут уже можно тестировать идею с друзьями/клиентами/учениками (вместо недель, найма команды разработки и сотен тысяч бюджета)
🎨 Готовый UX/UI — получаешь современный интерфейс с анимациями и понятной навигацией, как в топовых образовательных приложениях
🧠 Быстрое погружение в играбельный/интерактивный прототип — без дизайнера и разработчика
🎨 Идеально, когда хочется чего-то такое из приложений и сервисов, чего прямо сейчас нет или стоит дорого (например, тибетский язык)
С этой штукой ты научишься
✅ Создавать интерактивные обучающие приложения за несколько минут без навыков программирования на базе готового промпта
Тебе понадобится
🧠 Идея или тема приложения
💻📱 Компьютер или телефон
🌍 VPN
🪄 Что будем делать
В качестве примера будем пробовать навайбкодить приложение в стиле Duolingo, но для тибетского языка (как личный пример, когда что-то хочется учить, а подходящего приложения под рукой — нет). Но вы, конечно, можете сделать любой другой под свои задачи!
Идём в Claude и вставляем промпт на генерацию экранов для первых двух “дней” изучения тибетского:
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] и пошерить ↓
Если пробуете несколько раз, то в Claude есть раздел Artifacts, в котором можно переключаться между версиями, документами и приложениями ↓
Что ждём в отчёте
- 📸 Скриншот какого-то из экранов
- 🔗 Ссылка на приложение
- 💠 Какую идею взяли в работу?
- 😇 1–2 инсайта: как это можно использовать в вашей работе?
- ⏱ Сколько времени заняло? Сделали с телефона или компьютера?
⭐ Задание со звёздочкой (и альтернативы)
1 — От “отличников” мы ждём, конечно, или стартапа, или на худой приложение для собственных нужд — таск-трекер, калькулятор, трекер еды, аналитический дашборд своего бизнеса или что-то такое. Если хочется реализовать свою идею, то сначала попросите Claude спроектировать промпт, а потом реализовать его в форме приложения
2— Если идей нет, и не хочется делать Duolingo, можно взять в разделе Artifacts https://claude.ai/artifacts любой другой пример приложения и кастомизировать под себя:
3 — Если хочется сделать расслабляющую интерактивную игру-игру (не в образовательных целях), возьмите такой промпт:
Сделай расслабляющую игру: пузыри всплывают снизу, кликаешь - они лопаются с +1 очко. Нежные голубо-розовые цвета, плавные анимации. Минимум кода, максимум релакса. HTML-артефакт.
💳 Для подписчиков Claude Pro
Этот урок был сделан для бесплатных пользователей в качестве демонстрации того, что можно сделать приложение с телефона, отправив текстовый запрос. У вас, как у подписчиков, есть возможность воссоздать большую игру со сложной логикой экранов — самое время это применить 😇 Не зря же заплатили $20!
🧼 Хозяйке на заметку
🎨 Про дизайн: Если тибетские шрифты отображаются некорректно, попроси ИИ использовать web-safe шрифты или добавить fallback-опции
📱 Мобильная версия: Приложение автоматически адаптируется под мобильные устройства — проверь, как выглядят карточки на телефоне
🔊 Звук: Для добавления реального произношения тибетских слов можешь интегрировать API внешнего сервиса (дойдем до них) или попросить ИИ добавить плейсхолдеры для аудиофайлов
💾 Сохранение прогресса: В базовой версии прогресс не сохраняется между сессиями, но можно доработать через чат
🚀 Масштабирование: Если идея зайдет, код можно экспортировать и доработать в полноценное приложение, подключив бэкенд и базу данных (об этом дальше)