UI Sound Design

Trasforma 'rendilo più scattante' in codice audio Web Audio API funzionante, con anteprima HTML live.

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

Promosso ★ 9.6/10

UI Sound Design — Trasforma 'rendilo più scattante' in codice audio Web Audio API funzionante, con anteprima HTML live.

Cosa fa

Genera effetti sonori programmatici per l'interfaccia utente (click, toggle, notifiche, toni di successo/errore) utilizzando ricette Web Audio API e Tone.js. Si attiva quando un utente chiede suoni di click, campanelli di notifica, feedback al passaggio del mouse o una libreria di suoni per UI, e guida un ciclo iterativo di descrizione-generazione-ascolto-affinamento tramite un ponte lessicale che mappa parole come 'più caldo' o 'più scattante' ai parametri di sintesi.

Rapporto di test

Seguita la ricetta per un suono di 'successo' e ottenuto un AudioContext singleton, implementazione di terza maggiore ascendente con anteprima HTML funzionante per l'esportazione WAV (verificata la codifica di esportazione OfflineAudioContext); un tentativo di base ingenuo utilizzava un nuovo AudioContext per chiamata e un tono singolo piatto senza percorso di esportazione.

Testato il: 2026-07-15 · Claude Code 2.x (agent harness)

Installazione

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

Comandi e prompt di esempio

  • /ui-sound-designTrasforma 'rendilo più scattante' in codice audio Web Audio API funzionante, con anteprima HTML live.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • 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