Меня зовут Анастасия, я преподаватель английского языка из Ньюкасла. Я готовлю к IELTS, веду разговорный и деловой английский для студентов со всего мира. У меня абсолютно нулевой опыт в программировании. Я всегда думала, что для создания сайта нужен диплом по информатике и нездоровая зависимость от энергетиков. Оказалось, я была права только насчет энергетиков.

Это история о том, как я создала полноценный AI-инструмент для практики разговорного английского для своих студентов, используя только Claude Code и много любопытства. Без туториалов, без бесконечного листания Stack Overflow, без слез над клавиатурой. Ну, может, последнее немножко было.

Каждую неделю мне пишут потенциальные студенты с просьбой попробовать урок перед тем, как записаться. Справедливо. Но пробные уроки съедают время, которое я могла бы потратить на настоящие занятия. По сути, я устраивала бесплатную дегустацию в ресторане, где работает только один повар.

А что, если бы на моем сайте была страница, где любой желающий мог бы попрактиковать разговорный английский на случайную тему, получить мгновенную обратную связь от ИИ по грамматике и лексике, а я бы получала уведомление в Telegram с расшифровкой их речи?

По сути, это инструмент для привлечения клиентов, замаскированный под бесплатное упражнение. Маркетологи назвали бы это "воронкой ценности". А я называю это смекалкой.

Прежде чем рассказать как, вот что делает готовый продукт:

1. Посетитель заходит на страницу и вводит свое имя
2. Нажимает "Случайная тема" и получает что-то вроде "Мой кумир" или "Опишите свое утро"
3. Нажимает запись и говорит в микрофон до минуты
4. Браузер распознает речь в реальном времени с помощью Web Speech API
5. Расшифровка отправляется на сервер, где Claude анализирует грамматику, лексику и беглость
6. Посетитель видит подробную обратную связь прямо на странице
7. Я получаю уведомление в Telegram со всем: имя, тема, расшифровка и анализ ИИ

Это была первая задача, и честно говоря, именно на этом этапе я почувствовала себя волшебницей. Волшебницей с ноутбуком вместо палочки, но все же. Я описала Claude Code то, что хотела, обычным языком:

Нам нужна лендинг-страница для потенциальных клиентов. Они вводят имя, получают случайную тему, записывают свою речь и видят обратную связь от ИИ.

И он просто... начал строить. Один HTML-файл со всем встроенным: CSS, JavaScript, логика распознавания речи. Никаких фреймворков, никаких инструментов сборки, никакой загадочной папки с 47 000 зависимостей.

Это была часть, которая меня больше всего пугала. Оказалось, браузер умеет распознавать речь бесплатно с помощью Web Speech API:

const recognition = new (window.SpeechRecognition
  || window.webkitSpeechRecognition)();
recognition.lang = 'en-GB';
recognition.interimResults = true;
recognition.continuous = true;

recognition.onresult = (event) => {
  // Display live transcript as the user speaks
};

И это все. Никакого платного API. Никакой серверной обработки. Браузер слушает микрофон и выдает текст в реальном времени. Установка языка на en-GB была принципиальна, потому что я преподаю британский английский. Никаких "color без u" на моем сайте.

Мне не хотелось скучных тем из учебника. Жизнь слишком коротка для "Опишите свой распорядок дня", когда можно взять "Мой кумир" или "Провальные первые свидания". Поэтому мы загрузили на страницу более 50 тем по трем уровням:

• A1-A2 (начинающие): "Мое утро", "Дождливый день", "Моя любимая еда"
• B1-B2 (средний): "Книга, которая изменила мою жизнь", "Баланс работы и жизни", "Провальные первые свидания"
• C1-C2 (продвинутый): "Влияние соцсетей на образование", "Культура удаленной работы"

У каждой темы есть бейдж с уровнем. "Мой кумир" оказалась на удивление популярной. Видимо, у всех есть что сказать про Райана Гослинга.

Первая версия выглядела так, будто пришла с сайта 2008 года. Красно-коралловые акценты, которые не сочетались ни с чем. Я сказала "больше синего", и Claude поменял всю цветовую схему на мой фирменный цвет #009cea. Если бы ремонт в квартире был таким же простым.

Фронтенд умеет записывать и распознавать речь, но ему нужно куда-то отправить расшифровку для анализа. Здесь все стало чуть более техническим. Чуть-чуть.

Мой сайт размещен на AWS (S3 + CloudFront), поэтому логичным выбором был бы AWS Lambda. Но для него нужна настройка API Gateway, роли IAM и YAML-файл, от которого можно уснуть быстрее, чем от сказки на ночь. У Cloudflare Workers щедрый бесплатный тариф (100 000 запросов в день), развертывание за секунды, и весь бэкенд - один файл на JavaScript. Решение было принято, пока закипал чайник.

Весь бэкенд - один файл index.js. Он делает четыре вещи:

1 CORS, чтобы браузер мог общаться с сервером:

const ALLOWED_ORIGINS = [
  'https://britishenglish.me',
  'https://www.britishenglish.me',
  'http://localhost:8080'
];

2 Ограничение запросов, чтобы никто не перегружал сервер:

const rateLimitMap = new Map();
const RATE_LIMIT = 5;
const RATE_WINDOW_MS = 3600000; // 1 hour

3 Запрос к Claude API для анализа расшифровки. Мы используем Claude Haiku, потому что он быстрый, дешевый и на удивление хорошо находит грамматические ошибки (лучше, чем некоторые мои студенты находят свои):

const response = await fetch(
  'https://api.anthropic.com/v1/messages', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'x-api-key': env.ANTHROPIC_API_KEY,
    'anthropic-version': '2023-06-01'
  },
  body: JSON.stringify({
    model: 'claude-haiku-4-5-20251001',
    max_tokens: 1024,
    system: systemPrompt,
    messages: [{ role: 'user', content: transcript }]
  })
});

4 Уведомление в Telegram, чтобы я знала, когда кто-то пользуется инструментом. Это работает в фоновом режиме, чтобы пользователь не ждал:

ctx.waitUntil(sendTelegram(env, payload, feedback));

Это было приятно просто. Шесть команд и около двух минут жизни:

cd stack/worker && npm init -y && npm install --save-dev wrangler
npx wrangler login
npx wrangler secret put ANTHROPIC_API_KEY
npx wrangler secret put TELEGRAM_BOT_TOKEN
npx wrangler secret put TELEGRAM_CHAT_ID
npx wrangler deploy

И это реально все. Никакого CI/CD пайплайна. Никакого Docker. Никакой команды девопсов. Просто преподаватель с терминалом.

Этот баг чуть не сломал меня. Я записала себя, говоря "I am just testing this new website", живая расшифровка показала каждое слово идеально, а потом результат сказал "Речь не обнаружена." Простите, что?

Оказалось, Web Speech API хранит текст как "промежуточные результаты" перед финализацией. Когда запись останавливается, последний фрагмент речи часто все еще промежуточный. Он никогда не становится финальным. Это как написать сочинение карандашом, а потом кто-то стирает последний абзац перед сдачей.

let lastInterim = '';

recognition.onresult = (event) => {
  let interim = '';
  for (let i = event.resultIndex;
       i < event.results.length; i++) {
    if (event.results[i].isFinal) {
      finalTranscript += event.results[i][0].transcript;
    } else {
      interim += event.results[i][0].transcript;
    }
  }
  lastInterim = interim;
};

function stopRecording() {
  if (lastInterim) {
    finalTranscript += lastInterim;
  }
  // now finalTranscript has everything
}

Вот это меня реально удивило.

Для контекста: один пробный урок занимает 30 минут моего времени. Этот инструмент обрабатывает неограниченное количество "пробных занятий" практически бесплатно. Окупаемость настолько хорошая, что кажется незаконной.

Вайб-кодинг - это реально

Я описывала функции обычным языком и смотрела, как они появляются. "Добавь больше синего." "Расшифровка исчезает, когда я останавливаю запись." "Добавь смешные темы про свидания." Каждый раз код менялся и все просто работало.

Стек проще, чем я думала

Весь проект - это один HTML-файл (фронтенд), один JavaScript-файл (бэкенд) и несколько API-ключей. Никакого React. Никакой базы данных. Никаких Docker-контейнеров. Никакого Kubernetes. Никаких загадочных аббревиатур, которые звучат как названия болезней. Просто файлы, которые делают свое дело.

Правило 80/20 работает

Базовая страница заработала примерно за час. Остальное время ушло на полировку: цвета, выбор тем, баги, особенности развертывания. Прямо как в преподавании. Довести студента до B1 - это легко. А вот с B2 до C1 - тут уже отрабатываешь свою зарплату.

Страница для практики речи работает. Студенты могут попробовать в любое время, я получаю уведомления в Telegram, а обратная связь от ИИ, честно говоря, очень хорошая. Лучше, чем я бы написала за то же время, если быть честной.

Следующий шаг: подключить ManyChat к моему Instagram, чтобы каждый, кто комментирует пост, автоматически получал сообщение со ссылкой на практику речи. Бесплатное привлечение клиентов на автопилоте. Потому что если я чему-то и научилась из этого опыта - лучшие инструменты работают, пока ты спишь.

Ирония того, что преподаватель английского создала AI-инструмент для практики английского, от меня не ускользает. Но вот мы здесь. И честно? Это довольно круто.