Концепция
Инструмент — устройство, которое берёшь в поле и играешь сразу: все ручки и кнопки под рукой, а нота всегда попадает в лад. Выбрана ля-минорная пентатоника, поэтому ошибиться нельзя, а исполнение строится на смене аккордов, вводе и выводе голосов и эффектах-переходах.Подробнее о проекте
Создание инструмента
генерация инструмента
UI kit
Устройство инструмента
Четыре ручки-голоса: BASS, PLUCK, PAD, DRUMS
Нажатие выбирает голос. После этого экран показывает его ноты, а длинные клавиши внизу играют именно им. Если тянуть ручку вверх или вниз, меняется один главный параметр голоса: у BASS это яркость (срез фильтра), у PLUCK длина затухания, у PAD скорость нарастания и длина хвоста, у DRUMS строй бочки. Двойной клик возвращает значение по умолчанию. Цветное кольцо показывает, сколько выставлено.
Экран-секвенсор
Сетка из 16 шагов и 6 строк. Клик по клетке ставит или убирает ноту, можно вести мышью и рисовать несколько сразу. Для голосов строки означают ноты, для DRUMS инструменты. Слева четыре иконки волн, их тоже можно нажимать. Справа мини-микшер: 6 столбиков уровня с фейдерами. Белый столбик это текущий шаг. Внизу строка статуса: голос, октава, аккорд, BPM, свинг, режим PLAY/STOP/REC. До первого касания экран просит коснуться его, чтобы браузер разрешил звук.Набросок композиции
Сет на 44 такта строится как история из пяти частей. Блоки показывают, какие голоса звучат и какие кнопки нажимаются.
Промпт-дизайн
Код синтезатора написан с помощью нейросети Claude. Референс, задача, выбор решений и приёмка результата — работа автора, которая шла несколькими запросами по шагам.1 этап: Разработка дизайна инструмента В качестве референса были взяты три инструмента и объединены в визуальный инструмент2 этап: Разработка кода инструмента Работу с нейросетью Claude я выстроила как последовательный процесс разработки интерфейса. Вместо одного большого запроса я использовала несколько этапов, постепенно уточняя требования к визуальному оформлению, функциональности и технической реализации. Каждый последующий запрос основывался на предыдущем результате и помогал приблизить проект к требованиям курса.1. Контекст и визуальный референс На первом этапе я передала нейросети описание курса, включая технологический стек, требования к итоговому проекту и условия промежуточной сдачи. Это позволило задать технические рамки разработки ещё до начала реализации. В качестве визуального ориентира я приложила сгенерированное изображение инструмента. Оно определило основные характеристики будущего интерфейса: цветовую палитру, материалы, расположение элементов и общий визуальный характер. Референс стал основой для последующих запросов, поскольку позволял ориентироваться на конкретный образ, а не только на текстовое описание.2. Формирование функциональных требований На следующем этапе я попросила Claude превратить референс в работающий сайт. Важно было сохранить визуальное сходство с изображением и одновременно обеспечить взаимодействие пользователя с элементами интерфейса. Отдельно я обозначила необходимость объёмных кнопок, которые визуально напоминали бы физические элементы музыкального инструмента. Также я предложила добавить звуковое сопровождение, оставив нейросети возможность самостоятельно подобрать характер звуков в рамках заданных ограничений. Для реализации звука я указала библиотеку Tone.js и запретила использование внешних аудиосэмплов. Таким образом, запрос включал одновременно творческую задачу и конкретные технические требования. Я также предложила нейросети задавать уточняющие вопросы, если исходных данных недостаточно для принятия решения.
3. Доработка визуальной составляющей После получения первого прототипа я сосредоточилась на соответствии интерфейса исходному референсу. Основное внимание уделялось визуальной целостности: соотношению размеров элементов, цветам, форме кнопок и общей композиции. Отдельным направлением стала визуальная обратная связь при взаимодействии с кнопками. Для такого интерфейса важно, чтобы пользователь понимал, какие элементы доступны для нажатия, а само взаимодействие воспринималось естественно. Объём и визуальное оформление кнопок должны были поддерживать концепцию физического инструмента, а не создавать впечатление стандартного веб-сайта.4. Работа со звуковым взаимодействием Звуковая составляющая рассматривалась как часть пользовательского опыта, а не как дополнительное украшение. При работе над ней необходимо было учитывать характер звуков, их соответствие действиям пользователя и общую согласованность с концепцией инструмента. Использование Tone.js также задавало технические рамки: звуки должны были создаваться программно, без подключения готовых аудиофайлов. Это позволяло сохранить самостоятельность реализации и соответствовать требованиям проекта.5. Итерации по коду и структуре проекта После получения первоначальной реализации я запросила полный код проекта, чтобы иметь возможность изучать его и продолжать работу. Затем я попросила разделить код на три файла: index.html, style.css и script.js. Такое разделение соответствовало структуре, принятой в рамках курса, и позволяло разграничить разметку, стили и программную логику. Дополнительно я указала на необходимость исправить опечатки в подписях интерфейса. Это помогло учесть не только техническую работоспособность, но и качество представления проекта.6. Подготовка к объяснению интерфейса На следующем этапе я запросила подробное описание назначения кнопок и принципов взаимодействия с ними. Описание элементов позволяло систематизировать информацию о функциональности сайта и подготовить объяснение принятых решений.7. Финальные правки после фитбэка После я записала 4 присета и попросила Claude оформить их в виде флешек, для дальнейшей работы
