Как ИИ собрал мне синтезатор, или Где искать вау-эффект

Я попросил Claude сделать сайт уровня Awwwards и получил синтезатор, на котором можно играть прямо в браузере. Что сделало его хорошим, как придумать такое же для уже существующей страницы, и скилл, который можно скачать.

11 октября 2026 г.Essay8мин чтения

Тёмная, кинематографичная страница вымышленного синтезатора: 3D-синтезатор из ореха и алюминия на фоне заголовка «Sings between the notes.»

Мне хотелось посмотреть, на что это способно. Промпт был примерно такой: выбери тему, напиши бриф, запусти трёх агентов, и пусть каждый соберёт современный сайт «уровня Awwwards». Личный блог, страница продукта, что угодно.

Claude выбрал синтезатор. Вымышленный. ONDES-1 — четырёхголосый аналоговый полисинт от студии из четырёх человек в Лионе: ореховые боковины, 37 клавиш и лента, на которой играют кольцом на пальце. €2 890, 400 штук, поставки весной 2027. Ничего из этого не существует.

Минут через двадцать с чем-то я открыл первый сайт, нажал A на клавиатуре, и он сыграл ноту. Нажал S, D, F, сыграл очень плохую мелодию, а линия, проходящая через огромный логотип, задрожала в такт звуку. Я сидел и улыбался фейковой странице продукта как идиот.

Этот пост о том, почему это сработало. Потому что это была не удача.

Три агента, один бриф, три совершенно разных сайта

Все агенты получили один и тот же бриф: факты о продукте, список обязательных разделов и одно жёсткое требование — синтезатор, на котором можно играть прямо на странице, через Web Audio, и звук включается только после клика посетителя. Статичные HTML, CSS и JS. Без сборки, без внешних картинок, без lorem ipsum и без ошибок в консоли.

Различались они коротким арт-направлением для каждого:

Swiss Signal — «Experimental Jetset встречает инструкцию от Braun». Огромный узкий шрифт, видимая сетка, чёрное на белёсом и один синий.
Nocturne — «презентация Apple, скрещённая с ночной студией звукозаписи». 3D-синтезатор на Three.js, тёплый свет, камера подлетает к каждой детали, пока вы скроллите.
Hi-Fi Catalogue, 1974 — японская брошюра hi-fi техники из 70-х. Кремовая бумага, горчичный и орех, ручки, которые крутятся перетаскиванием.

Swiss Signal: слово ONDES-1 огромными чёрными буквами, сквозь которое идёт синяя волна, на белёсой сетке.

Hi-Fi Catalogue: кремовая страница-брошюра с пухлым логотипом ONDES-1, наклейкой «400 штук» и нарисованной панелью синтезатора с ручками, VU-метрами, лентой и клавишами.

Один продукт, один бриф, а визуально у трёх сайтов нет ничего общего. В швейцарском осциллограф рисуется по настоящему звуку, который вы играете. В Nocturne вы кликаете по 3D-клавишам, и они нажимаются. В каталоге вы щёлкаете тумблером питания, он играет короткий аккорд из четырёх нот, и стрелки VU-метров качаются.

Не верьте на слово, они живые. Включите звук, откройте любой и жмите от A до K: Swiss Signal · Nocturne · Hi-Fi Catalogue. Это ровно то, что собрали агенты, без правок. Продукт, цена и форма предзаказа — всё фейк, так что купить не пытайтесь.

Nocturne, раздел про фильтр: крупный план шлифованной металлической панели 3D-синтезатора с ручками, подписанными по-французски, рядом таблица характеристик.

Так что же сделало его хорошим?

Я, конечно, спросил. Дело в промпте? В стеке? В визуальном направлении? Честный ответ — во всём сразу, примерно в таком порядке:

Своё арт-направление для каждого агента. Без него все трое скатились бы в один и тот же тёмный градиент с Inter сверху. Конкретные референсы («инструкция Braun»), правило для шрифта, правило для цвета, правило для движения («чётко, механически, никаких плавающих блобов») — вот что разводит их в разные стороны.
Вау, которое растёт из самого предмета. На синтезаторе играют. Интерактив тут не украшение поверх страницы продукта, он и есть продукт.
Конкретный бриф. Настоящие цифры, место, цена. Расплывчатый вход даёт расплывчатый текст.
Скучный стек. Ни фреймворка, ни сборки, ни конфига, который может упасть. Все силы уходят в то, что вы видите.
Время проверить свою работу. Каждый агент работал 20–30 минут, сам делал скриншоты своего сайта на разных размерах экрана и чинил то, что выглядело криво.

Второй пункт засел у меня в голове. Я думал о нём весь следующий день и, кажется, в нём весь фокус:

Не спрашивайте «какой классный эффект сюда добавить?». Спросите «что эта штука делает, и как посетитель может сделать это сам?»

Параллакс на странице синтезатора — это просто параллакс. Синтезатор, на котором можно поиграть, — это причина остаться.

ИИ стал очень, очень хорош в анимациях

Ещё недавно на просьбу об «анимации» ИИ выдавал fade-in и кнопку, которая подпрыгивает, будто перепила кофе. В этот раз я получил физику верёвок.

Без преувеличений. Когда я потом попробовал то же самое на своём сайте, один агент сделал кабели, которые провисают и раскачиваются, пока вы их тащите, через интегрирование Верле (дешёвый способ симулировать верёвку как цепочку точек). Другой сделал банку с закваской, в которой пузырьки появляются, поднимаются и лопаются, а анимация останавливается, когда банка уходит за экран, чтобы вентилятор ноутбука не взлетел. Третий разложил мой логотип-сову на слои 3D-печати и анимировал крошечную печатающую головку, которая его печатает.

И скучные части тоже были на месте, что, честно говоря, впечатляет даже больше: управление с клавиатуры, поддержка prefers-reduced-motion, запасной вариант без WebGL, тёмная тема. То, что я сам пропустил бы в пятницу вечером.

Но креативными модели сами по себе не стали. Без направления они всё так же выбирают безопасное и шаблонное. Изменилось другое: когда вы даёте им направление, они реально могут его исполнить.

Как придумать вау для существующей страницы

Собрать вымышленный синтезатор с нуля — это лёгкий режим. Настоящий вопрос был такой: что делать со страницей, которая уже есть, например с этим блогом?

Та же идея. Не начинайте с эффектов. Начинайте с того, что предмет на самом деле делает, из чего он сделан или как он ведёт себя во времени. Для этого сайта это:

Я чиню серверы и сайты на WordPress.
Я печатаю на 3D-принтере.
Я пеку хлеб.
Я писал про COBOL и мейнфреймы.
Я обещаю публиковать пост каждую пятницу.

Каждая строчка — это семечко. Дальше вопрос: как посетитель может это прожить, а не прочитать? Вот что получилось:

Что я делаю	Игрушка
Чиню серверы	Серверная стойка, которую кто-то неправильно скоммутировал. Почини кабели — получишь мой email.
Пеку хлеб + пощу по пятницам	Закваска, которая поднимается всю неделю и убегает из банки в пятницу.
3D-печать	Логотип-сова печатается слой за слоем при первом визите.
Пост про COBOL	Спрятанный зелёный терминал мейнфрейма с настоящими командами по постам.

Стойка, вообще-то, была моей идеей, а агенты её улучшили. Я хотел пластилиновую стойку с перепутанными кабелями и секретным сообщением в конце. Они добавили цветные кольца вокруг нужных портов, стикер с картой сети («да, духовка в сети») и маленькие лампочки, которые горят красным, жёлтым или зелёным в зависимости от того, насколько вы близко.

Стойка в коридоре: пластилиновая серверная стойка с патч-панелью 4×4, тремя перепутанными цветными кабелями, стикером с картой сети и маленьким терминалом с надписью «no route to host».

Теперь она живёт на странице контактов. Кнопки «пропустить» нет, и обычного email на этом сайте нигде нет. Хотите мне написать — почините стойку. Мой сайт, мои правила.

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

Не всё попало в финал. Мы ещё сделали граф интересов и выключатель-шнурок для темы, и оба были нормальные. Но нельзя, чтобы шесть фич кричали одновременно, поэтому я выбирал по громкости:

Одна главная сцена — громкая, но на своей странице: стойка.
Одна фоновая штука — тихая и меняется со временем: банка с закваской.
Один разовый восторг — сова, которая печатается раз за визит.
Одна пасхалка — терминал. Найдёте — молодцы.

У каждой своё место, так что они не дерутся за ваше внимание.

Работает и на скучных вещах: письма о безопасности

У меня есть небольшая система, которая каждый день присылает мне уведомления о безопасности WordPress: новые уязвимости, что уже эксплуатируют, что обновлять. Вот как это выглядело раньше:

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

Технически всё верно. Совершенно нечитаемо в 8 утра.

Сначала я попросил Claude Design сделать покрасивее и получил вот это. Чисто, нормально, тёмная шапка с цветными плашками — вы видели такое тысячу раз:

Версия от Claude Design: тёмная шапка, цветные плашки со счётчиками и белые карточки с цветной полосой слева для каждой уязвимости.

Потом я прогнал на нём wow-скилл. В письмах нельзя запускать JavaScript, так что физики верёвок тут нет. Вау должно было прийти из арт-направления и из того же вопроса: что письмо о безопасности на самом деле делает? Оно говорит, что обновить.

Поэтому одна из трёх версий показывает каждое исправление как diff. Красная строка ушла, зелёная пришла. - < 7.1.2, + 7.1.2. Читаешь как pull request, а это ровно то, чем я сейчас и займусь.

Версия-diff: у каждой уязвимости затронутая версия в красной строке с минусом, а исправленная — в зелёной строке с плюсом, как в диффе кода.

Две другие ушли совсем в другую сторону. Одна — редакционный дайджест, ранжированный как газета, с полосой критичности сверху. Другая — громкий брутализм с большими цветными блоками для exploited, PoC и alert.

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

Бруталистская версия: чёрная шапка «Daily Digest», большие цветные блоки-счётчики (4 exploited, 1 PoC, 5 alert) и красная карточка «Exploited».

Во всех пяти одни и те же данные. Разница между «нормально» и «хочу это читать» — одно направление и один хороший вопрос.

Скилл

После всего этого я попросил Claude превратить весь процесс в скилл, чтобы не объяснять его каждый раз заново. Он называется wow-page, и работает так:

Смотрит на страницу или тему. Что делает человек или продукт? Какой стек?
Ищет глагол. Что предмет делает, из чего сделан, какие у него ритмы? Вот этот шаг и решает всё. Остальное — логистика.
Брейнштормит идеи вместе с вами — у каждой место и громкость. Плюс настоящая рекомендация, а не просто меню. Приносите и свои идеи: стойка была моей.
Пишет бриф и по промпту на агента: разное арт-направление для редизайна или по одной фиче на агента для существующей страницы.
Клонирует существующую страницу один раз, чтобы все агенты стартовали с одной копии, а не каждый со своей догадки.
Запускает агентов параллельно, каждого в своей папке, каждый сам скриншотит свою работу.
Ревьюит всё со скриншотами, честными минусами и рейтингом. Кто-то же должен сказать вам, какой вариант хуже.
Объединяет выбранное в один прототип.
Передаёт в настоящий код со спецификацией и строгим правилом ничего не деплоить. Выкатывать — по-прежнему ваша работа.

Скачать скилл wow-page (zip)

Чтобы установить его для Claude Code, распакуйте в папку скиллов:

unzip wow-page-skill.zip -d ~/.claude/skills/

Потом попросите что-нибудь вроде «improve my homepage» или «what wow thing can I add to my site», или вызовите напрямую через /wow-page. Он запускает несколько агентов одновременно, каждого на 10–30 минут, так что это не дёшево. Начните с трёх.

Вывод

Вау — это не эффект. Это то, о чём ваша страница, превращённое в то, что можно потрогать.

Для синтезатора это игра на нём. Для страницы контактов сисадмина — починка стойки. Для письма о безопасности — чтение обновления как диффа. Сначала найдите глагол, дайте каждому агенту настоящее направление и дайте им проверить свою работу.

А если вы дочитали до сюда — идите чинить мою стойку.