01 · Что это и зачем
Идея простая: вместо десятка вкладок и платных подписок — один HTML-файл, который открывается в браузере и даёт доступ сразу ко многим моделям через их официальные API. Ты вставляешь свои ключи, файл лежит у тебя на диске, запросы идут напрямую в модели. Никакого сервиса-посредника между тобой и нейросетью.
Зачем это маркетологу и эксперту:
- Скорость. Один запрос — сразу к нужной модели, без переключения вкладок.
- Сравнение. Одну задачу гонишь по 4 моделям и берёшь лучший кусок из каждой.
- Приватность. Брифы и данные клиента не уходят в чужой сервис.
- Деньги. Платишь только за токены API, а не за пять подписок сразу.
02 · Как это работает
Один файл index.html содержит интерфейс (поле ввода + список моделей) и небольшой скрипт, который шлёт твой промпт в выбранную модель и показывает ответ. Ключи хранятся локально в браузере (localStorage), на сервер ничего не уходит.
- Выбираешь модель из списка (или режим «гонки» — об этом ниже).
- Пишешь промпт → ответ появляется тут же.
- Файл можно открыть на любом компьютере — он автономный.
03 · Собрать за 5 минут
Самый быстрый путь — попросить Claude Code (или любую модель) сгенерировать стартовый файл по описанию. Скелет, от которого можно отталкиваться:
<!-- index.html — локальный мульти-ИИ пульт (скелет) -->
<input id="key" placeholder="вставь свой API-ключ" />
<select id="model">
<option value="gpt-4o">ChatGPT</option>
<option value="claude-opus">Claude</option>
<option value="gemini">Gemini</option>
<option value="grok">Grok</option>
</select>
<textarea id="prompt" placeholder="твой запрос"></textarea>
<button onclick="ask()">Спросить</button>
<div id="out"></div>
<script>
async function ask() {
// ключ хранится только в браузере, на сервер не уходит
localStorage.setItem('key', key.value);
// здесь — fetch к официальному API выбранной модели
// (endpoint и формат берёшь из доков провайдера)
}
</script>index.html: поле для API-ключа (хранить в localStorage), выпадающий список моделей, поле промпта, кнопка. По клику — запрос в выбранную модель через её официальный REST API, ответ выводить ниже. Без бэкенда, всё в одном файле».04 · RACE MODE — 4 модели наперегонки
Самая полезная фишка: одну задачу отправляешь сразу в несколько моделей и сравниваешь ответы рядом. Дальше собираешь «идеальный ответ» — берёшь структуру у одной, формулировки у другой, факты проверяешь третьей.
- ChatGPT — крепкая структура и текст.
- Claude — длинный контекст, код, нюансы.
- Gemini — свежие данные и мультимодальность.
- Grok — альтернативный взгляд, тренды.
fetch к разным API и вывод ответов в 4 колонки.05 · 5 промптов под вайбмаркетинг
Ради этого всё и затевается. Готовые промпты — вставляй и адаптируй:
1) ЛЕНДИНГ
«Собери лендинг для [продукт]: секции (оффер, боли, как работает,
кейсы, FAQ, CTA), тексты и чистый HTML+CSS в одном файле».
2) ВОРОНКА ЗАПУСКА
«Распиши воронку запуска [продукт]: лендинг + 5 писем прогрева +
6 сторис + 3 рилс-сценария. Под аудиторию [кто]».
3) КОНТЕНТ-ПЛАН
«30 идей коротких видео по теме [ниша] с хуками первой строкой
и CTA. Сгруппируй по болям аудитории».
4) ОФФЕР
«Сформулируй 5 вариантов оффера для [продукт] по схеме
результат + срок + без чего. Добавь усилители и гарантию».
5) РАЗБОР КОНКУРЕНТА
«Вот текст лендинга конкурента: [вставить]. Разбери структуру,
сильные ходы и где у него дыры, которые мы закроем».06 · Мини-план на вечер
- Получи API-ключи нужных моделей (у провайдеров).
- Попроси Claude Code собрать
index.htmlпо промпту выше. - Вставь ключи, проверь одну модель.
- Добавь RACE MODE — параллельный запрос в 4 модели.
- Прогони 5 промптов выше на своём реальном проекте.
index.html и промпт-паки.07 · Ресурсы и ссылки
Где взять API-ключи моделей из гайда — официальные консоли провайдеров: