UI Sound Design

Verwandelt 'mach es knackiger' in funktionierenden Web Audio API-Soundcode mit einer Live-HTML-Vorschau.

von dannyjpwilliams · dannyjpwilliams/ui-sound-design-skill

Getestet · Funktioniert ★ 9.6/10

UI Sound Design — Verwandelt 'mach es knackiger' in funktionierenden Web Audio API-Soundcode mit einer Live-HTML-Vorschau.

Was es kann

Generiert programmatische UI-Soundeffekte (Klicks, Toggles, Benachrichtigungen, Erfolgs-/Fehlertöne) mithilfe von Web Audio API und Tone.js-Rezepten. Wird ausgelöst, wenn ein Benutzer nach Klickgeräuschen, Benachrichtigungstönen, Hover-Feedback oder einer UI-Soundbibliothek fragt, und treibt eine iterative Schleife aus Beschreiben-Generieren-Anhören-Verfeinern über eine Vokabelbrücke an, die Wörter wie 'wärmer' oder 'knackiger' auf Syntheseparameter abbildet.

Testbericht

Folgte dem Rezept für einen 'Erfolgs'-Sound und erhielt einen Singleton-AudioContext, eine aufsteigende Dur-Terz-Implementierung mit einer funktionierenden HTML-Vorschau für den WAV-Export (verifizierter OfflineAudioContext-Exportcode); ein naiver Basisversuch verwendete einen neuen AudioContext pro Aufruf und einen flachen einzelnen Ton ohne Exportpfad.

Getestet am: 2026-07-15 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/dannyjpwilliams/ui-sound-design-skill
cd ui-sound-design-skill
mkdir -p ~/.claude/skills
cp -r skills/ui-sound-design ~/.claude/skills/ui-sound-design

Befehle & Beispiel-Prompts

  • /ui-sound-designVerwandelt 'mach es knackiger' in funktionierenden Web Audio API-Soundcode mit einer Live-HTML-Vorschau.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • Make a satisfying click sound for this button using Web Audio API
  • I need a notification chime for new messages in my app
  • Build a UI sound library with hover, toggle, and success tones