Практическое руководство по созданию полноценного AEO-трекера (Answer Engine Optimization) с помощью голосового агента Super Whisper, Claude Code CLI и OpenRouter.

🎯 О чём этот конспект:

Пошаговое руководство по созданию масштабируемого B2B SaaS сервиса (AEO-трекера) с нуля без ручного ввода кода. Автор демонстрирует метод «голосового программирования» (Voice Vibe Coding) на скорости 112–150 слов в минуту, процесс генерации исчерпывающего PRD (Product Requirements Document) и реализацию микросервисной AI-архитектуры в связке Super Whisper + Claude Code CLI + OpenRouter.

👤 Кому будет полезно:

Вайбкодерам, инди-хакерам, фаундерам без глубокого бэкграунда в написании кода и AI-разработчикам, которые хотят в 3–5 раз ускорить процесс формулирования контекста, генерации ТЗ и сборки рабочих веб-приложений.

✨ Что получите:

Готовый 8-этапный фреймворк Spoken PRD, набор правил голосового промптинга, библиотеку фраз для UI/бэкенда/тестов и архитектурную схему AEO-трекера, который опрашивает 4 поисковые нейросети (Perplexity, ChatGPT, Gemini, Claude) и формирует отчет о видимости бренда.

1. Подготовка голосового стека: связка Super Whisper и Claude Code

Контекст: Обычный ввод промптов с клавиатуры создает «бутылочное горлышко»: человек печатает медленно (30–50 слов/мин) и неосознанно сокращает формулировки, лишая LLM критически важного контекста. Голосовой ввод позволяет диктовать со скоростью 112–150 слов/мин в формате непрерывного потока сознания (stream of consciousness), передавая модели все архитектурные нюансы, боли и граничные условия. Однако голосовые модели часто искажают технические термины («Superbase» вместо «Supabase», «Open Router» вместо «OpenRouter»), что разрушает сборку. Для решения этой проблемы Super Whisper настраивается через пользовательский словарь замен и связывается напрямую с CLI-агентом.

Тайминг: ▶ 00:38, ▶ 00:52, ▶ 01:10, ▶ 05:40, ▶ 05:68

Выгода: Экономия до 72 часов чистого времени на каждые 200 000 надиктованных слов; устранение ошибок распознавания стека и имен библиотек.

Как применить:

• Шаг 1: Конфигурация словаря замен — В приложении Super Whisper откройте раздел Settings -> Vocabulary -> Add Vocabulary. Добавьте технические термины вашего проекта, чтобы фонетическое распознавание подменялось на точные сущности.
  • Например: Режим Replace with: заменять super base на Supabase, open router на OpenRouter, opus five на Claude 3.5 Opus, sqlite на SQLite.
• Шаг 2: Выбор языковой модели распознавания — В настройках выберите связку моделей S1 Language или S1 Mini/Voice для максимальной точности пунктуации и транскрибации технического английского/русского языка.
• Шаг 3: Активация плагина Claude Code Agent — Перейдите в Settings -> Advanced Settings -> Agent Plugins -> Claude Code. Включите переключатель: теперь при завершении генерации или вопросе от Claude Code окно Super Whisper будет автоматически активироваться для ответа голосом по горячей клавише (Option + Space).
• Шаг 4: Запуск Claude Code в безопасном режиме планирования — Откройте пустую директорию проекта в терминале и запустите сессию в режиме Plan Mode (Shift+Tab или флаг):

claude --permission-mode plan

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

2. 8-шаговый фреймворк Spoken PRD для архитектурного проектирования

Контекст: Главная ошибка при вайбкодинге — сразу просить модель писать код («создай мне Next.js приложение»). Claude Code тратит контекстное окно на догадки, выбирает неверную структуру данных и ломает логику. Правильный подход — строгое разделение этапа планирования и этапа реализации. Автор использует метод 8 сегментов («один сегмент на одном дыхании»), где голосом задаются рамки проекта, аватар пользователя, метрика результата, пользовательский путь, дизайн-система, схема БД, AI-пайплайн и правила приёмки.

Тайминг: ▶ 04:84, ▶ 05:27, ▶ 06:03, ▶ 07:34, ▶ 12:08

Выгода: Нулевая стоимость правок на этапе ТЗ; генерация 100% валидного файла PRD.md, исключающего галлюцинации агента во время кодинга.

[Голосовой ввод через Super Whisper]
        │
        ▼
[Claude Code в Plan Mode] ──► [Генерация PRD.md (8 сегментов)]
        │
        ▼
[Анализ пробелов (5 вопросов от Claude)] ──► [Голосовые ответы]
        │
        ▼
[Поэтапный билд (Next.js + TypeScript + SQLite)]

Как применить:

• Шаг 1: Установка фрейма (Frame) — Запретите писать код и потребуйте сформировать файл PRD.md.
• Шаг 2: Формулирование целевого результата (Outcome) — Опишите, кто конечный пользователь и какую ценность он получает за первые 5 минут.
• Шаг 3: Декомпозиция пути пользователя (Journey) — Продиктуйте пронумерованные шаги онбординга и сканирования с жесткими лимитами (например, 10–15 вопросов).
• Шаг 4: Надиктовывание Spoken PRD — Зажмите горячую клавишу Super Whisper и продиктуйте базовый стартовый промпт:

I am going to describe an entire SaaS application out loud in 8 sequential sections. 
Do not write any application code yet. Listen to all sections, absorb the context, and write a complete, production-grade Product Requirements Document to a file named PRD.md.
 
Structure of my dictation:
1. Frame & Working Rules
2. Target Persona & Core Outcome (Value in <5 mins)
3. Step-by-Step User Journey (Numbered screens with strict constraints)
4. Minimalist Design System & Micro-interactions
5. SQLite Database Schema & Cost Tracking
6. Multi-Engine AI Pipeline via OpenRouter
7. Quality, Unit Tests, and Error Fallbacks
8. Phased Build Execution Loop
 
Ask me up to 5 clarifying questions at the end about anything ambiguous before finalizing PRD.md.

Результат: В корне проекта создается документ PRD.md, в котором зафиксированы все состояния интерфейса, схема таблиц и граничные случаи до первой строчки кода.

3. Архитектура AEO Tracker: Мульти-модельный пайплайн через OpenRouter

Контекст: AEO (Answer Engine Optimization) — трекинг упоминаний бизнеса в поисковых AI-моделях (ChatGPT, Perplexity, Gemini, Claude). На рынке подобные инструменты стоят от $99 до $149 в месяц. В основе архитектуры приложения лежит идея разделения «думающей» (дорогая reasoning-модель) и «оценивающей» (дешевая быстрая модель) логики. Claude 3.5 Opus / Sonnet анализирует сайт клиента и генерирует 12 поисковых интентов реальных покупателей. Затем через единый шлюз OpenRouter эти 12 вопросов параллельно отправляются в 4 поисковых движка с включенным веб-поиском. Полученные 48 ответов нормализуются и скорятся дешевой моделью в строгий JSON.

Тайминг: ▶ 02:25, ▶ 02:68, ▶ 03:42, ▶ 09:88, ▶ 10:46

Выгода: Себестоимость одного полного аудита бренда по 48 поисковым выдачам составляет всего ~$0.41 против $99+ за аналогичную подписку в готовых SaaS.

Как применить:

• Шаг 1: Настройка единого API-шлюза — Все запросы к LLM маршрутизируются через OpenRouter с одним API-ключом, что избавляет от необходимости подключать 4 отдельных SDK.
• Шаг 2: Генерация поисковых интентов — Тяжелая модель (Claude 3.5 Sonnet / Opus) скрапит сайт клиента, парсит УТП, конкурентов и генерирует 12 вопросов в 4 категориях:
  • Best X for Y (Сравнение лучших решений под нишу)
  • Problem-aware (Поиск решения конкретной боли)
  • Competitor Comparison (Прямое сравнение с альтернативами)
  • Local / Industry-specific (Отраслевые запросы)
• Шаг 3: Параллельный запуск сканирования — Приложение шлет 12 запросов в 4 модели с включенным web-search (perplexity/sonar, openai/gpt-4o, google/gemini-2.0-flash, anthropic/claude-3-5-sonnet):
• Шаг 4: Нормализация и JSON-скоринг — Дешевая модель (gpt-4o-mini) получает сырой ответ движка и аннотации источников, возвращая результат по строгому формату:

{
  "brand_mentioned": true,
  "mention_position": 2,
  "sentiment": "positive",
  "cited_sources": ["https://techcrunch.com/...", "https://g2.com/..."],
  "competitors_mentioned": ["Salesforce", "HubSpot"],
  "visibility_score": 75
}

Результат: Полная аналитическая панель видимости бренда в AI-поиске с процентом упоминаемости (Mention Rate), цитируемости (Citation Rate) и списком проигранных запросов.

4. UI/UX без «AI Slop»: Надиктовывание чистой дизайн-системы

Контекст: Пользователи оценивают SaaS за первые 10 секунд. Интерфейсы, сгенерированные AI без строгих дизайн-ограничений, выглядят одинаково («AI Slop»): фиолетовые градиенты, скачущие размеры блоков при переключении шагов онбординга, отсутствие состояний загрузки. Чтобы Claude собрал интерфейс уровня Linear или Vercel, необходимо голосом заложить конкретные дизайн-токены: шрифты, трекинг, фиксированные размеры карточек и единый акцентный цвет.

Тайминг: ▶ 08:18, ▶ 08:41, ▶ 08:73, ▶ 17:84, ▶ 18:20

Выгода: Мгновенный премиальный вид интерфейса; полное отсутствие визуальных багов и дерганий лейаута при смене шагов онбординга.

┌────────────────────────────────────────────────────────┐
│  AEO Tracker Dashboard (Geist Sans, Off-White #FAFAFA)  │
├────────────────────────────────────────────────────────┤
│  ┌──────────────────┐ ┌──────────────────┐ ┌─────────┐  │
│  │ Visibility Score │ │ Mention Rate     │ │ Avg Pos │  │
│  │ 55 / 100         │ │ 68% (28/41)      │ │ 1.8     │  │
│  │ [Accent Green]   │ │ [Accent Green]   │ │ [Dark]  │  │
│  └──────────────────┘ └──────────────────┘ └─────────┘  │
│  ┌───────────────────────────────────────────────────┐  │
│  │ Fixed-Width Onboarding Card (Smooth Slide X)      │  │
│  │ Step 3/4: Inspecting 12 Intent Queries...         │  │
│  └───────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────┘

Как применить:

• Шаг 1: Задание типографики и цветовой палитры — Запретите градиенты. Используйте шрифт Geist с плотным межбуквенным расстоянием (tight letter spacing), почти черный текст (#111111) на теплом белом фоне (#F9F9FB) и только один акцентный цвет для метрик.
• Шаг 2: Стабилизация геометрии компонентов — Зафиксируйте размеры карточки онбординга. Шаги должны плавно сменяться внутри одного контейнера без изменения его высоты и ширины.
• Шаг 3: Голосовой промпт для UI-компонентов — Продиктуйте требования к стилю:

Design requirements for all UI components:
- Aesthetic: Minimal, calm, utilitarian. High whitespace density. No generic AI purple gradients.
- Typography: Geist Sans font family with tight letter-spacing (-0.02em).
- Palette: Near-black text (#121212) on an off-white/cream background (#FBFBFA). Borders: subtle 1px solid #E5E5E3. Border radius: 6px.
- Accent: One single soft accent color (Emerald Green #10B981) used strictly for scores, badges, and positive metrics.
- Onboarding Component: A single fixed-dimension card centered on screen. Multi-step transitions must slide horizontally (transform: translateX) without resizing the parent container.
- Edge states: Explicit skeleton loaders for active scans and clear empty states explaining next actions.

Результат: Строгий, адаптивный B2B-интерфейс на Tailwind CSS / Shadcn UI, выглядящий как профессиональный коммерческий продукт.

5. Надежность бэкенда: SQLite, учет микродолларов и устойчивость к сбоям

Контекст: В мульти-модельных AI-приложениях неизбежны сетевые сбои: Perplexity может упасть по таймауту, Gemini может вернуть невалидный JSON, а баланс API-ключа может исчерпаться. Если приложение крашится из-за ошибки одной модели в пакете из 48 запросов, пользователь теряет весь прогресс сканирования. Кроме того, фаундер обязан отслеживать юнит-экономику каждого сканирования. Для этого в локальную БД SQLite закладывается учет затрат на каждый запрос в микродолларах (целые числа во избежание ошибок округления float), а пайплайн снабжается логикой повторных попыток (retries).

Тайминг: ▶ 09:28, ▶ 09:73, ▶ 11:06, ▶ 11:58, ▶ 18:35, ▶ 18:59

Выгода: 100% отказоустойчивость сканирования; детальный аудит расходов до сотых долей цента на каждый пользовательский запуск.

Как применить:

• Шаг 1: Проектирование схемы данных SQLite — База данных должна сохранять сырые ответы моделей (raw output) для возможности их бесплатного повторного перескоринга в будущем при обновлении промптов.
• Шаг 2: Хранение стоимости в микродолларах — Записывайте стоимость каждого вызова API как целочисленное значение micro-dollars (1 USD = 1 000 000 micro-dollars).
• Шаг 3: Реализация правила изоляции сбоев (Engine Isolation Rule) — Падение одного поисковика не должно прерывать общий скан. Настройте политику 2 повторных попыток (retry: 2) с fallback-статусом failed для конкретной ячейки.
• Шаг 4: Голосовой промпт для бэкенда и тестов — Надиктуйте требования к серверной части:

Backend, Database, and Reliability Rules:
1. Database: Use local SQLite with Prisma/Drizzle ORM. Store users, business_profiles, generated_questions, run_batches, individual_engine_answers, raw_llm_responses, and citations.
2. Financial Tracking: Track cost per API execution stored as integer micro-dollars (e.g., $0.00412 is stored as 4120) to eliminate floating-point rounding issues.
3. Resilience Rule: If an AI engine times out or fails, retry exactly twice. A scan run of 48 queries must NEVER fail as a whole if one or two engines fail. Log failures gracefully and display partial results.
4. Testing: Write unit tests first for scoring logic and mention detection. Mock LLM responses using recorded JSON fixtures so running the test suite costs $0.00. Never delete or weaken a test to make a build pass.

Результат: Надежный бэкенд на Next.js Server Actions / Route Handlers, сохраняющий целостность данных даже при нестабильных внешних API.

6. Семь правил голосового промптинга и библиотека фраз для Claude Code

Контекст: Эффективная работа с Claude Code требует особого стиля коммуникации. Новейшие рассуждающие модели (Claude 3.5 Sonnet, Claude 3.7) не требуют криков капсом или эмоционального давления («CRITICAL, DO NOT FAIL»), от этого они начинают возводить лишние ограничения и ломать код. Автор выделил 7 законов естественного языка и библиотеку готовых фраз, которые позволяют точно управлять поведением агента во время итеративного цикла разработки.

Тайминг: ▶ 16:63, ▶ 17:03, ▶ 17:46, ▶ 18:78, ▶ 19:28, ▶ 19:64

Выгода: Предсказуемое выполнение задач с первого раза; сокращение циклов отладки на 70%.

7 законов голосового промптинга:

1. Глагол действия вместо размышлений: Вместо «Не мог бы ты предложить улучшения?» говорите «Улучши состояние загрузки на экране запуска сканирования».
2. Объяснение причины (The «Why»): Вместо «Сделай страницы быстрыми» говорите «Страница должна загружаться быстрее 1 секунды, потому что пользователи открывают отчет со смартфонов между встречами».
3. Конкретные рамки вместо абстракций: Вместо «Не делай экран перегруженным» говорите «Используй много свободного пространства и только один акцентный цвет».
4. Точные числа вместо размытых оценок: Вместо «Сгенерируй несколько вопросов» говорите «Сгенерируй от 10 до 15 вопросов».
5. Четкий критерий готовности («Done When»): Вместо «Напиши модуль скоринга» говорите «Создай модуль скоринга, покрой его тестами; задача считается выполненной, когда все 5 юнит-тестов станут зелеными».
6. Референс на существующий код: Вместо «Добавь диаграмму» говорите «Добавь график в том же визуальном стиле и с теми же отступами, что и карточка Scorecard».
7. Спокойный авторитет без эмоций: Вместо «НИКОГДА НЕ ПЕРЕДАВАЙ API КЛЮЧИ В БРАУЗЕР ЭТО КРИТИЧНО!!!» говорите «Никогда не передавай переменные окружения и API-ключи на сторону клиента, чтобы исключить утечку данных».

Голосовая библиотека фраз для быстрой вставки:

# Фразы для UI:
"Use Geist font with tight letter spacing, near-black text on off-white, and emerald accent for scores only."
"Keep the onboarding card dimensions identical across all steps and slide smoothly between states."
 
# Фразы для интеграций и бэкенда:
"Return strictly valid JSON matching our Zod schema. If malformed, retry once with an error correction prompt."
"Store all LLM model names in a single central config file config/models.ts so we can swap providers instantly."
 
# Фразы для дебага и завершения цикла:
"The build failed with this TypeScript error. Spawn a sub-agent to review the root cause in the schema before editing components."
"In short: [сформулируйте суть одной фразой после длинного рассуждения вслух]."

Цикл сборки (Build Loop):

1. Plan: Обсуждение голосом в Plan Mode, Claude задает уточняющие вопросы.
2. Build: Реализация изолированной фазы (например, только DB schema + migrations).
3. Check: Автоматический запуск тестов и проверка типов npm run build && npm test.
4. Commit: Фиксация изменений в Git с обновлением файла PROGRESS.md.
5. Reset: Очистка контекста для перехода к следующей фазе.

FAQ

В: Почему для генерации PRD используется именно голосовой ввод через Super Whisper, а не обычный текст? О: При наборе текста человек подсознательно экономит силы и удаляет важные детали, оставляя Claude без достаточного контекста (модели приходится додумывать поведение системы). Голосовой ввод позволяет за 2–3 минуты выдать 300–500 слов плотного контекста со всеми граничными условиями, примерами и архитектурными ограничениями.

В: Что делать, если Super Whisper неправильно транскрибирует технические названия библиотек? О: Используйте встроенную функцию Custom Vocabulary в настройках Super Whisper. Задайте правила автоматической замены: например, чтобы фонетическое словосочетание super bass автоматически заменялось на правильный термин Supabase, а open router — на OpenRouter.

В: Зачем запускать Claude Code с флагом --permission-mode plan? О: Режим планирования гарантирует, что агент будет только читать файлы, анализировать структуру и задавать вопросы, не внося никаких изменений в кодовую базу. Это предотвращает порчу рабочего кода на этапе обсуждения фичи или проектирования PRD.

В: Как тестировать AI-пайплайны без слива баланса на API-ключе? О: Сохраните один раз реальные JSON-ответы от каждого поискового движка (Perplexity, GPT-4, Gemini, Claude) в папку tests/fixtures/. Все последующие интеграционные и юнит-тесты скоринга запускайте на этих сохраненных моках — это обеспечит нулевую стоимость тестов и детерминированный результат.

В: Почему важно хранить стоимость API-вызовов в микродолларах, а не в обычном типе float? О: Числа с плавающей точкой (float/double) в JavaScript и базах данных подвержены ошибкам округления (например, 0.1 + 0.2 !== 0.3). Хранение цен в микродолларах как целых чисел ($0.00041 = 410 micro-dollars) полностью исключает финансовые расхождения при масштабировании на тысячи сканирований.

В: Как предотвратить зависание AEO-сканирования, если один из внешних движков не отвечает? О: Реализуйте паттерн изоляции сбоев: каждый из 48 запросов оборачивается в независимый Promise с таймаутом (например, 15 секунд) и политикой двух повторов (retry: 2). Если движок окончательно упал, ячейка помечается статусом failed, а общий прогресс-бар продолжает идти до 100%.

Ресурсы и ссылки

• Super Whisper — Нативное приложение для голосового ввода на macOS с поддержкой AI-плагинов и локальных словарей — https://superwhisper.com
• Claude Code CLI — Официальный консольный AI-агент от Anthropic для автономного написания кода — https://docs.anthropic.com/en/docs/agents-and-tools/claude-code
• OpenRouter — Единый шлюз и API-маркетплейс для мульти-модельного доступа к LLM (Claude, GPT, Perplexity, Gemini) — https://openrouter.ai
• Geist Font — Шрифт от Vercel, оптимизированный для интерфейсов разработчиков и B2B дашбордов — https://vercel.com/font
• Roseell.dev — Образовательная платформа и сервис заказной разработки автора видео (Oliver) — https://roseell.dev

Конспект создан на основе видео «Building a fullscale B2B SaaS start to finish with voice prompting» канала Oliver (rosell.dev). Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=akH6a2NTLIE